Полный ионный сегмент в ионной панели инструментов для смартфона

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%. Как я могу достичь этого? На втором этапе этот сценарий я хочу только для устройств, а не для ПК, поскольку экран больше!

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>