跳到主要内容

Tabbed components

Dynamic tabbed interfaces

Examples

Create dynamic tabbed interfaces, as described in the WAI ARIA Authoring Practices. Tabs is a higher-level component for quickly creating a Nav matched with a set of TabPanes.

结果
Loading...
实时编辑器

Controlled

Tabs can be controlled directly when you want to handle the selection logic personally.

结果
Loading...
实时编辑器

No animation

Set the transition prop to false.

结果
Loading...
实时编辑器

Fill and justify

Similar to the Nav component, you can force the contents of your Tabs to extend the full available width. To proportionately fill the space use fill. Notice that the Tabs is the entire width but each Tab item is a different size.

结果
Loading...
实时编辑器

If you want each Tab to be the same size use justify.

结果
Loading...
实时编辑器

Dynamic tabbed interfaces should not contain dropdown menus, as this causes both usability and accessibility issues. From a usability perspective, the fact that the currently displayed tab’s trigger element is not immediately visible (as it’s inside the closed dropdown menu) can cause confusion. From an accessibility point of view, there is currently no sensible way to map this sort of construct to a standard WAI ARIA pattern, meaning that it cannot be easily made understandable to users of assistive technologies.

That said, it Dropdowns do work technically (sans focus management), but we don't make any claims about support.

Custom Tab Layout

For more complex layouts the flexible TabContainer,

TabContent, and TabPane components along with any style of Nav allow you to quickly piece together your own Tabs component with additional markup needed.

Create a set of NavItems each with an eventKey corresponding to the eventKey of a TabPane. Wrap the whole thing in a TabContainer and you have fully functioning custom tabs component. Check out the below example making use of the grid system, pills and underline.

Pills

结果
Loading...
实时编辑器

API

Tabs

Tab

TabContainer

TabContent

TabPane