离子3:在线显示离子搜索条和离子段按钮。

Question

如何在同一个离子工具栏中显示ion-searchbar和ion-segment内联？我用的是离子3。

(如果你好奇的话，这只是景观模式，因为在景观模式中，垂直空间是非常重要的。)

我(大部分)能够让它与ion-col一起工作，如下所示。通过离子服务，所有的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>

如何在Chrome中通过离子服务欺骗iPhone模式

​

在真正的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和-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>

documentation: https://ionicframework.com/docs/api/components/grid/Grid/