Question

我对Ionic比较陌生，我试图制作一个简单的登录页面。但是，当我说它不会显示标题栏。有谁知道我做错了什么？

<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>

Answer 1

您还没有为标题编写html。您需要添加一个带有class="bar bar-header"的div来显示标题。

  <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>

这是一个有效的fiddle。

离子离子视图标题没有显示

1 个答案: