www/docs/components/tabs.mdx
import TabsControlled from '!!raw-loader!../examples/Tabs/Controlled'; import LeftTabs from '!!raw-loader!../examples/Tabs/LeftTabs'; import TabsNoAnimation from '!!raw-loader!../examples/Tabs/NoAnimation'; import TabsUncontrolled from '!!raw-loader!../examples/Tabs/Uncontrolled'; import TabsFill from '!!raw-loader!../examples/Tabs/Fill'; import TabsJustified from '!!raw-loader!../examples/Tabs/Justified';
Create dynamic tabbed interfaces, as described in the
<abbr title="Web Accessibility Initiative">WAI</abbr> <AriaAbbr /> Authoring Practices.
Tabs is a higher-level component for quickly creating a
Nav matched with a set of TabPanes.
Tabs can be controlled directly when you want to handle the
selection logic personally.
Set the transition prop to false.
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.
If you want each Tab to be the same size use justify.
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.
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.