首页 文章

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

提问于
浏览 次
1

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

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

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

Example code below:

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

How it looks in Chrome via Ionic Serve when spoofing iPhone mode

How it looks on a real iOS device:

What works:

我可以使用 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>

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

ionic-framework ionic3

1 回答

  • 0

    尝试使用 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>

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

    回复于

相关问题