Comment personnaliser tabview dans nativescript?

Question

Comment puis-je ancrer mes éléments Tabview à gauche de l'écran comme dans l'image ci-dessous?

Voici à quoi ressemble ma mise en page pour le moment.

<TabView dock="left" tabsBackgroundColor="red" selectedIndex="1" selectedColor="#FF0000" iosIconRenderingMode="alwaysOriginal" sdkExampleTitle sdkToggleNavButton> 
    <StackLayout tabsBackgroundColor="red" *tabItem="{ iconSource: 'res://ic_ham'}" > 
    </StackLayout> 
    <StackLayout *tabItem="{title: 'Home'}"> 
      <ns-home></ns-home> 
    </StackLayout> 
    <StackLayout *tabItem="{title: 'Bookings'}"> 
      <ns-booking></ns-booking> 
    </StackLayout> 
</TabView> 

mise en page résultant

Answer 1

Il est peut-être un peu exagéré pour vos besoins, mais ce que j'ai trouvé plus simple pour nous était de changer les boutons de l'onglet pour être pleinement personnalisable et personnalisable en désactivant les boutons actuels et les nouveaux boutons de tabulation.

<StackLayout class="grid-tab-view" columns="*,100,100,100,*" ios:rows="auto, auto" android:rows="auto, *"> 
    <label row="0" col="1" class="tab-button" text="Tab1" (tap)="switchTabByIndex(0)" [ngClass]="{'selected': tabSelectedIndex===0}"></label> 
    <label row="0" col="2" class="tab-button" text="Tab2" (tap)="switchTabByIndex(1)" [ngClass]="{'selected': tabSelectedIndex===1}"></label> 
    <label row="0" col="3" class="tab-button" text="Tab3" (tap)="switchTabByIndex(2)" [ngClass]="{'selected': tabSelectedIndex===2}"></label> 
    <TabView colSpan="5" row="1" col="0" #tabView class="tab-view" [(ngModel)]="tabSelectedIndex" (loaded)="onTabsLoaded()" (selectedIndexChanged)="onTabSwitch($event)"> 
     <StackLayout class="tab" *tabItem="{title: 'Tab1'}"> 
      <Label text="tab1 body"></Label> 
     </StackLayout> 
     <StackLayout class="tab" *tabItem="{title: 'Tab2'}"> 
      <Label text="tab2 body"></Label> 
     </StackLayout> 
     <StackLayout class="tab" *tabItem="{title: 'Tab3'}"> 
      <Label text="tab3 body"></Label> 
     </StackLayout> 
    </TabView> 
</StackLayout> 

Et dans le code:

• Ajouter des gestionnaires d'événements du robinet lorsque le bouton sélectionné et lui donner une classe personnalisée sélectionnée (pour le style)
• Masquer les boutons de l'onglet par défaut en utilisant les onglets événement chargé:

onTabsLoaded(): void{ 
    let tabViewElement = <TabView>this.tabView.nativeElement; 
    if (tabViewElement && tabViewElement.android) { 
     tabViewElement.android.removeViewAt(0); 
    } else { 
     tabViewElement.ios.tabBar.hidden = true; 
    } 
}; 

et avec un peu de css, notre résultat:

Hope this helps, bonne chance!