CODEWITHSUNDEEP
nativescriptangular2-nativescript
Veer3383
Veer3383

Reputation: 1825

How to customize tabview in nativescript?

How can i dock my Tabview items to the left of the screen like in the image below?

enter image description here This is how my layout looks like currently.

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

Resulting layout

enter image description here

Upvotes: 1

Views: 2853

Answers (1)

Ophir Stern
Ophir Stern

Reputation: 1287

It may be a bit of overkill for your needs, but what I've found simplest for us was to change the tab buttons to be fully designable and customizable by disabling the current buttons and the add new tab buttons.

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


And in code:

  • Add tap event handlers for when button selected and give it a custom selected class (for styling)
  • Hide the default tab buttons using the tabs loaded event:
onTabsLoaded(): void{
    let tabViewElement = <TabView>this.tabView.nativeElement;
    if (tabViewElement && tabViewElement.android) {
        tabViewElement.android.removeViewAt(0);
    } else {
        tabViewElement.ios.tabBar.hidden = true;
    }
};

and with a bit of css, our result:

Custom nativescript tabs

Hope this helps, good luck!

Upvotes: 5

Related Questions