离子项目中的标题输入未显示

Question

我正在使用 ionic 文档中的复制粘贴代码作为标题输入 http://ionicframework.com/docs/components/#bar-inputs

<div class="bar bar-header item-input-inset">
  <label class="item-input-wrapper">
   <i class="icon ion-ios-search placeholder-icon"></i>
   <input type="search" placeholder="Search">
  </label>
  <button class="button button-clear">
    Cancel
  </button>
</div>

但我没有看到它。 我只希望我的标题成为一个视图中的搜索栏。

这里是视图代码开始：

<ion-view>
  <div class="bar bar-header item-input-inset">
    <label class="item-input-wrapper">
      <i class="icon ion-ios-search placeholder-icon"></i>
      <input type="search" placeholder="Search">
    </label>
    <button class="button button-clear">
       Cancel
    </button>
  </div>
  <ion-content>
  ...

Answer 1

您可以添加 Header Inputs 两种方式

1) 添加index.html

<div class="bar bar-header item-input-inset">
    <label class="item-input-wrapper">
        <i class="icon ion-ios-search placeholder-icon"></i>
        <input type="search" placeholder="Search">
      </label>
    <button class="button button-clear">
        Cancel
      </button>
</div>
<ion-nav-view></ion-nav-view>

2) 添加index.html

<ion-nav-view></ion-nav-view>

在您的模板页面中（例如 template/home.html）

<ion-view>
    <div class="bar bar-header item-input-inset">
        <label class="item-input-wrapper">
            <i class="icon ion-ios-search placeholder-icon"></i>
            <input type="search" placeholder="Search">
          </label>
        <button class="button button-clear">
            Cancel
          </button>
    </div>
    <ion-content>
        ...
    </ion-content>
</ion-view>

Demo