I am relatively new to Ionic and I'm trying to make a simple login page. However when i put it won't show a header bar. Does anyone have any idea what i do wrong?
<ion-view view-title="Sign-In">
<ion-content>
<div class="list">
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text" ng-model="user.username">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password" ng-model="user.password">
</label>
</div>
<div class="padding">
<button class="button button-block button-positive" ng- click="signIn(user)">
Sign-In
</button>
<p class="text-center">
<a href="#/forgot-password">Forgot password</a>
</p>
</div>
</ion-content>
</ion-view>
You haven't written the html for the header. You need to add a div with the class="bar bar-header"
to display the header.
<ion-view view-title="Sign-In">
<div class="bar bar-header bar-light">
<h1 class="title">Header</h1>
</div>
<ion-content class="has-header">
<div class="list">
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text" ng-model="user.username">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password" ng-model="user.password">
</label>
</div>
<div class="padding">
<button class="button button-block button-positive" ng-click="signIn(user)">
Sign-In
</button>
<p class="text-center">
<a href="#/forgot-password">Forgot password</a>
</p>
</div>
</ion-content>
</ion-view>
Here is a working fiddle .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.