Question

我正在尝试将搜索栏添加到其中一个页面的标题中。

<ion-view view-title="">
    <ion-nav-buttons side="left">
        <label class=" item item-input-wrapper">
            <i class="icon ion-ios-search placeholder-icon"></i>
            <input type="search" placeholder="Search">
        </label>
  </ion-nav-buttons>

  <ion-content>
    Search content
  </ion-content>
</ion-view>

搜索栏确实按预期显示在标题中。但是如何才能使搜索字段在标题中的宽度达到100％？我确实试过申请：

.buttons-left, .left-buttons{
    width:100% !important;
}

确实有效。但问题是它也会影响所有其他页面。我尝试将class和id添加到ion-nav-buttons，但它没有显示。

如何仅在特定页面上将自定义宽度应用于ion-nav-buttons？

Answer 1

我不确定这是否是放置搜索字段的最佳位置：

<ion-nav-buttons>

您可以为特定视图定义自定义标题：

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

并在视图中使用指令hide-nav-bar="true"告诉当前视图隐藏导航栏：

<ion-view view-title="home" hide-nav-bar="true">
    ...
</ion-view>

这是你的最终结果：

<ion-view view-title="home" hide-nav-bar="true">

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


  <ion-content padding='true' scroll='false' has-footer='false'>

    <div class="card">
      <div class="item item-text-wrap">
        HOME PAGE
      </div>
    </div>

  </ion-content>

</ion-view>

我还使用了一些样式来改变结果：

.search-bar
{
  width:100% !important;
  background: inherit;
  height: inherit !important;
}

这就是它在Plunker中的样子。

离子导航按钮全宽

1 个答案: