Question

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

码

主页

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

Answer 1

您也希望将第一个按钮放在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>

离子框架如何修复标题

1 个答案: