TabView

<TabView> is a UI component that shows content grouped into tabs and lets users switch between them.

<TabView>
  <TabViewItem title="First">
    <Label text="First Tab Content" textAlignment="center" verticalAlignment="center" />
  </TabViewItem>
  <TabViewItem title="Second">
    <Label text="Second Tab Content" textAlignment="center" verticalAlignment="center" />
  </TabViewItem>
  <TabViewItem title="Third">
    <Label text="Third Tab Content" textAlignment="center" verticalAlignment="center" />
  </TabViewItem>
</TabView>

<TabView>
  <StackLayout *tabItem="{title: 'First'}">
    <GridLayout>
      <ContentView verticalAlignment="center" horizontalAlignment="center">
        <label text="First Tab Content"></label>
      </ContentView>
    </GridLayout>
  </StackLayout>
  <StackLayout *tabItem="{title: 'Second'}">
    <GridLayout>
      <ContentView verticalAlignment="center" horizontalAlignment="center">
        <label text="Second Tab Content"></label>
      </ContentView>
    </GridLayout>
  </StackLayout>
  <StackLayout *tabItem="{title: 'Third'}">
    <GridLayout>
      <ContentView verticalAlignment="center" horizontalAlignment="center">
        <label text="Third Tab Content"></label>
      </ContentView>
    </GridLayout>
  </StackLayout>
</TabView>

<tabView>
  <tabViewItem nodeRole="items" title="First">
    <label
      text="First Tab Content"
      textAlignment="center"
      verticalAlignment="middle"
    ></label>
  </tabViewItem>
  <tabViewItem nodeRole="items" title="Second">
    <label
      text="Second Tab Content"
      textAlignment="center"
      verticalAlignment="middle"
    ></label>
  </tabViewItem>
  <tabViewItem nodeRole="items" title="Third">
    <label
      text="Third Tab Content"
      textAlignment="center"
      verticalAlignment="middle"
    ></label>
  </tabViewItem>
</tabView>

<tabview>
  <tabviewitem title="First">
    <label
      text="First Tab Content"
      textAlignment="center"
      verticalAlignment="center"
    ></label>
  </tabviewitem>
  <tabviewitem title="Second">
    <label
      text="Second Tab Content"
      textAlignment="center"
      verticalAlignment="center"
    ></label>
  </tabviewitem>
  <tabviewitem title="Third">
    <label
      text="Third Tab Content"
      textAlignment="center"
      verticalAlignment="center"
    ></label>
  </tabviewitem>
</tabview>

<tabView>
  <tabViewItem title="First">
    <label
      text="First Tab Content"
      textAlignment="center"
      verticalAlignment="center"
    ></label>
  </tabViewItem>
  <tabViewItem title="Second">
    <label
      text="Second Tab Content"
      textAlignment="center"
      verticalAlignment="center"
    ></label>
  </tabViewItem>
  <tabViewItem title="Third">
    <label
      text="Third Tab Content"
      textAlignment="center"
      verticalAlignment="center"
    ></label>
  </tabViewItem>
</tabView>

<TabView>
  <TabViewItem title="First">
    <Label text="First Tab Content" textAlignment="center" verticalAlignment="center"></Label>
  </TabViewItem>
  <TabViewItem title="Second">
    <Label text="Second Tab Content" textAlignment="center" verticalAlignment="center"></Label>
  </TabViewItem>
  <TabViewItem title="Third">
    <Label text="Third Tab Content" textAlignment="center" verticalAlignment="center"></Label>
  </TabViewItem>
</TabView>

Props ​

selectedIndex ​

selectedIndex: number

Gets or sets the currently selected tab.

Defaults to 0.

tabTextColor ​

tabTextColor: Color

Gets or sets the text color of the tab titles.

.tab-view {
  tab-text-color: #fff;
}

See Color.

tabTextFontSize ​

tabTextFontSize: number

Gets or sets the font size of the tab titles.

.tab-view {
  tab-text-font-size: 24;
}

tabBackgroundColor ​

tabBackgroundColor: Color

Sets the background color of the tabs.

.tab-view {
  tab-background-color: #3d5a80;
}

See Color.

androidSelectedTabHighlightColor ​

androidSelectedTabHighlightColor: Color

Sets the underline color of the tabs. Android only.

.tab-view {
   android-selected-tab-highlight-color:: #3d5a80;
}

See Color.

androidTabsPosition ​

androidTabsPosition: 'top' | 'bottom'

Sets the position of the tabs. Android only.

Defaults to top.

iosIconRenderingMode ​

iosIconRenderingMode: 'automatic' | 'alwaysOriginal' | 'alwaysTemplate'

Gets or sets the icon rendering mode on iOS. iOS only.

Defaults to automatic.

See UIImage.RenderingMode.

...Inherited ​

For additional inherited properties, refer to the API Reference.

TabViewItem Props ​

title ​

title: string

Gets or sets the title of the tab strip entry.

textTransform ​

textTransform: TextTransformType // "initial" | "none" | "capitalize" | "uppercase" | "lowercase"

Gets or sets the text transform.

See TextTransformType.

Defaults to initial.

iconSource ​

iconSource: string

Gets or sets the icon source of the tab strip entry.

Supported paths are res://, font:// or an absolute path (eg. ~/assets/image.png).

See Image for details on the different paths.

Events ​

selectedIndexChange ​

on('selectedIndexChanged', (args: EventData) => {
  const tabView = args.object as TabView
  console.log('TabView selectedIndex:', tabView.selectedIndex)
})

Emitted when the selected tab changes.

Native component ​

• Android: androidx.viewpager.widget.ViewPager
• iOS: UITabBarController