Question

这是我的标题部分：

<ion-header color="primary">
  <ion-toolbar color="primary">
    <app-my-header-component></app-my-header-component>
    <ion-segment [(ngModel)]="topTab" (ionChange)="onTabChanged()">
      <ion-segment-button  value="send" >
         <ion-icon color="light"  title="Risultati" name="list-box">Invia</ion-icon>
         <ion-label>Risultati</ion-label>
      </ion-segment-button>
      <ion-segment-button value="calendar" >
         <ion-icon color="light" title="Inviate" name="stats"></ion-icon>
        <ion-label>Classifica</ion-label>
      </ion-segment-button>

      <ion-segment-button value="match" >
        <ion-icon color="light" title="Partite" name="calendar"></ion-icon>
        <ion-label>Partite</ion-label>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>

我希望ion-segment部分中的元素占用更多空间。因此，如果有两个ion-segment buttons，我希望每个元素占用屏幕的50％。在3的情况下，为33％。我该如何实现？在第二步中，由于屏幕更大，我只需要设备而不是pc的情况！

Answer 1

  <ion-header color="primary">
      <ion-toolbar color="primary">
        <app-my-header-component></app-my-header-component>
        <ion-segment [(ngModel)]="topTab" (ionChange)="onTabChanged()">
          <ion-row>
            <ion-col>
              <ion-segment-button  value="send" >
                <ion-icon color="light"  title="Risultati" name="list-box">Invia</ion-icon>
                <ion-label>Risultati</ion-label>
             </ion-segment-button>
            </ion-col>
            <ion-col>
              <ion-segment-button value="calendar" >
                <ion-icon color="light" title="Inviate" name="stats"></ion-icon>
               <ion-label>Classifica</ion-label>
             </ion-segment-button>
            </ion-col>
            <ion-col>
              <ion-segment-button value="match" >
                <ion-icon color="light" title="Partite" name="calendar"></ion-icon>
                <ion-label>Partite</ion-label>
              </ion-segment-button>
            </ion-col>
          </ion-row>
        </ion-segment>
      </ion-toolbar>
    </ion-header>

智能手机离子工具栏中的全宽离子段

1 个答案: