Ionic 3: Отображение панели ионного поиска и кнопок ионного сегмента в строке

Question

Как отображать строки ion-searchbar и ion-segment на одной панели инструментов ion?Я использую Ionic 3.

(если вам интересно, это только в ландшафтном режиме, потому что в ландшафтном режиме вертикальное пространство стоит дороже).

Я(в основном) может заставить это работать с ion-col, как показано ниже.Все выглядит хорошо в Chrome через Ionic Serve.Но при работе на реальном устройстве 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 через Ionic Serve при подмене режима iPhone

Как это выглядит на реальном устройстве iOS:

Что работает:

I am В состоянии получить кнопки для выравнивания до конца, используя 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/