Skip to main content

TabSelector

TabSelector renders tab items as buttons and emits a tab-selection event. Use it with TabController, NavController, or your own screen state to switch visible content.

Key Fields​

  • tabs: tab item array.
  • selectedItemIndex: selected tab index.
  • buttonStyleKey: style key used for generated tab buttons.
  • onTabSelected: called when a tab button is clicked.

Example​

TabSelector({
  tabs: [
    { id: 'home', title: 'Home' },
    { id: 'movies', title: 'Movies' },
  ],
  selectedItemIndex: this.selectedTabIndex,
}).onTabSelected(event => {
  this.selectedTabIndex = event.index;
});

Keep content switching in the owning screen or controller. TabSelector owns the selectable tab row.