Tabs

The Tabs category in the @bentley/ui-core package includes the HorizontalTabs and VerticalTabs components.

Properties

The TabsProps interface specifies the properties for both the HorizontalTabs and VerticalTabs components.

The labels prop is required and specifies the text shown for each tab.

The onClickLabel prop specifies the handler to be called when clicking on a label.

The activeIndex prop specifies the index of the initial active tab.

The green prop indicates whether the bar on the active tab is green instead of the default blue.

Examples

Horizontal Tabs

<HorizontalTabs labels={["Tab 1", "Tab 2", "Tab 3"]} activeIndex={0} />

tabs

Green Active Bar

<HorizontalTabs labels={["Tab 1", "Tab 2", "Tab 3"]} activeIndex={0} green />

tabs green

Vertical Tabs

<VerticalTabs labels={["Tab 1", "Tab 2", "Tab 3"]} activeIndex={0} />

tabs vertical

Dark Theme

tabs dark

API Reference

Last Updated: 12 June, 2024