Tengo el siguiente diseño para pestañas de iones:

  <ion-tabs #tabs (ionTabsDidChange)="setCurrentTab()" >
    <ion-tab-bar slot="bottom">
      <ion-tab-button routerDirection='root' *ngFor="let tab of tabList" [tab]="tab.root" class="actual-tab">
        <ion-grid>
          <ion-row>
            <ion-col size="10">
              <ion-thumbnail id="thumbnail_viewer{{tab.root}}"></ion-thumbnail>
            </ion-col>
            <ion-col size="2" class="ion-align-self-start ion-justify-content-end">
              <ion-icon class="close" name="close" (click)=closeTab(tab.root) title="Close tab" [style.visibility]="tab.root === 'tab1' ? 'hidden' : 'visible'"></ion-icon>
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col size="10">
                <ion-label>{{tab.title}}</ion-label>
            </ion-col>
          </ion-row>
        </ion-grid>
      </ion-tab-button>
      <ion-tab-button (click)="addTab(false)">
        <ion-icon name="add-circle"></ion-icon>
      </ion-tab-button>
    </ion-tab-bar>
  </ion-tabs>
</ion-content>

Quiero que mi rejilla de iones contenida dentro de mi botón de pestaña de iones ocupe todo el ancho del botón de pestaña, es decir, quiero que el espacio rojo se extienda al mismo tamaño que el espacio en blanco en la captura de pantalla a continuación:

ion-tabs

He podido encontrar que si cambio la dirección flexible de columna a fila en las herramientas de desarrollador a nivel de cuadrícula, me da el resultado que quiero. Pero no puedo averiguar cómo hacerlo en CSS o incluso en un estilo en línea. He pasado mucho tiempo probando muchas cosas de la documentación iónica. ¿Alguien me puede apuntar en la dirección correcta?

0
daveywc 22 mar. 2021 a las 10:13

1 respuesta

La mejor respuesta

Encontré una solución al final. Todo lo que necesitaba era:

ion-tab-button {​
    flex-direction: row;
}
0
daveywc 22 mar. 2021 a las 22:59