Mam następujący układ dla jon-tabs:

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

Chcę, aby moja siatka jonowa była zawarta w moim przycisku ION-Tab, aby podjąć pełną szerokość przycisku kart tj. Chcę, aby czerwona przestrzeń była rozszerzona na ten sam rozmiar, co biała przestrzeń na zrzucie ekranu poniżej:

ion-tabs

Byłem w stanie znaleźć to, jeśli zmienię kierunek Flex z kolumny na wiersz w narzędziach deweloperskich na poziomie siatki, daje mi wynik, którego chcę. Ale nie mogę ćwiczyć, jak to zrobić w CSS, a nawet stylu inline. Spędziłem drogę na długą próbę wielu rzeczy z dokumentacji jonowej. Czy ktoś może skierować mnie we właściwym kierunku?

0
daveywc 22 marzec 2021, 10:13

1 odpowiedź

Najlepsza odpowiedź

Znalazłem rozwiązanie w końcu. Wszystko, czego potrzebowałem, było:

ion-tab-button {​
    flex-direction: row;
}
0
daveywc 22 marzec 2021, 22:59