首页 文章

离子框架如何修复 Headers

提问于
浏览 次
0

enter image description here

enter image description here

enter image description here

我正在使用Ionic框架 . 单击 Headers 中的搜索图标将显示搜索栏 . 但是， Headers 在此过程中移动 . 有什么问题？你能减少 Headers 高度并消除边界吗？

代码

主页

<ion-menu [content]="content">
      <ion-header>
         <ion-toolbar no-border-top>
            <button  ion-button icon-only menuToggle>
            <ion-icon name="menu"></ion-icon>
            </button>
            <ion-title>Left Menu</ion-title>   
         </ion-toolbar>
       </ion-header>
    </ion-menu>

内容部分（searchBar）

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-searchbar   *ngIf="toggled"
       (ionInput)="filterItems($event)"
       (ionCancel)="cancelSearch($event)"
       (ionClear) = "cancelSearch($event)"
       [showCancelButton]="true"></ion-searchbar>
     <ion-buttons end>
      <button  ion-button icon-only #button2 *ngIf="!toggled" (click)="toggle()">
        <ion-icon name="search"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>

</ion-header>

内容部分脚本

public toggle(): void {
      this.toggled = this.toggled ? false : true;
   }
  public cancelSearch(ev){
   ev.target.value='';
   this.toggled = false;
  }
html ionic-framework ionic2 ionic3

1 回答

  • 0

    您还需要将第一个按钮放在 ion-buttons 指令中：

    <ion-header>

  <ion-navbar>

    <ion-buttons start>
      <button ion-button menuToggle>
        <ion-icon name="menu"></ion-icon>
      </button>
    </ion-buttons>

    <ion-searchbar   *ngIf="toggled"
       (ionInput)="filterItems($event)"
       (ionCancel)="cancelSearch($event)"
       (ionClear) = "cancelSearch($event)"
       [showCancelButton]="true"></ion-searchbar>

     <ion-buttons end>
      <button ion-button icon-only #button2 *ngIf="!toggled" (click)="toggle()">
        <ion-icon name="search"></ion-icon>
      </button>
    </ion-buttons>

  </ion-navbar>

</ion-header>
    回复于

相关问题