Tab Bar

The Tab Bar widget displays a horizontal row of tabs. It is typically used in conjunction with a Tab Controller and a Tab View to create a tabbed interface.

Properties

Property
Description

tabBarScrollable.value

If true, the tab bar can be scrolled horizontally.

tabBarScrollable.tabAlignment

The alignment of the tabs within the scrollable area.

labelPadding

The padding around the label of each tab.

indicatorColor

The color of the indicator that highlights the selected tab.

indicatorWeight

The thickness of the indicator.

dividerColor

The color of the divider line below the tab bar.

dividerHeight

The height of the divider line.

indicatorSize

The size of the indicator (tab or label).

tabBarPadding

The padding around the entire tab bar.

Children of Tab Bar

Slot
Description

selectedWidget

A widget to use as the template for the selected tab.

unselectedWidget

A widget to use as the template for the unselected tabs.


Default Properties

The Tab Bar widget supports all three sections of default properties:

Layout

  • width

  • height

  • padding

  • margin

  • align

Appearance

  • bgColor

  • borderRadius

  • border

    • borderWidth

    • borderColor

    • borderType (e.g., solid, dashed)

    • strokeAlign

Interactions

  • onClick — Used to add actions to the Tab Bar widget.

Last updated