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

Green Active Bar

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

Vertical Tabs

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

Dark Theme

API Reference

• Tabs

Last Updated: 11 June, 2024