Question

如何在同一离子工具栏中显示ion-searchbar和ion-segment内联？我正在使用Ionic 3.

（如果你很好奇，这只是横向模式的事情，因为在横向模式下，垂直空间是非常宝贵的。）

我（大部分）能够将其与ion-col一起使用，如下所示。通过Ionic Serve，Chrome中的一切看起来都很棒。但是当在真实设备上运行时，ion-segment会被推下并且看起来不正确。

以下示例代码：

<ion-toolbar color="primary">

  <ion-row>
    <ion-col no-padding>
      <ion-segment [(ngModel)]="joined" (ionChange)="switchView($event)" color="light">
        <ion-segment-button [value]="true">
          {{'PROJECT_JOINED_BUTTON' | translate}}
        </ion-segment-button>
        <ion-segment-button [value]="false">
          {{'PROJECT_LIST_BUTTON' | translate}}
        </ion-segment-button>
      </ion-segment>
    </ion-col>
    <ion-col no-padding>
      <ion-searchbar [(ngModel)]="query" (ionInput)="load()" color="light" debounce="500" showCancelButton="true" placeholder="Search projects"></ion-searchbar>
    </ion-col>
  </ion-row>


</ion-toolbar>

欺骗iPhone模式时，通过Ionic Serve在Chrome中的外观

它在真实iOS设备上的外观：

什么有效：

我我能够使用ion-buttons end让按钮与最终对齐。但是，当我将ion-segment包裹在ion-buttons内时，该片段根本不显示。当我尝试将end属性应用于ion-segment时，该细分会覆盖搜索栏。

<ion-toolbar color="primary">

  <ion-searchbar [(ngModel)]="query" (ionInput)="load()" color="light" debounce="500" showCancelButton="true" placeholder="Search projects"></ion-searchbar>

  <ion-buttons end>
    <button ion-button clear>
      Test Button
    </button>
  </ion-buttons>

</ion-toolbar>

有没有办法可靠地显示与离子工具栏内的其他内容内联的离子段？谢谢！

Answer 1

尝试使用 align-items-center 和 col-6 ，如：

<ion-toolbar color="primary">
    <ion-grid>
      <ion-row align-items-center>
        <ion-col no-padding col-6>
          <ion-segment [(ngModel)]="joined" (ionChange)="switchView($event)" color="light">
            <ion-segment-button [value]="true">
              {{'PROJECT_JOINED_BUTTON' | translate}}
            </ion-segment-button>
            <ion-segment-button [value]="false">
              {{'PROJECT_LIST_BUTTON' | translate}}
            </ion-segment-button>
          </ion-segment>
        </ion-col>
        <ion-col no-padding col-6>
          <ion-searchbar [(ngModel)]="query" (ionInput)="load()" color="light" debounce="500" showCancelButton="true" placeholder="Search projects"></ion-searchbar>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-toolbar>

文档： https://ionicframework.com/docs/api/components/grid/Grid/

离子3：显示内联的离子搜索栏和离子段按钮

1 个答案: