This will be the most simple example of showing how you can use the
components together to display some content. When using tabs, you need to provide a unique id to each
or provide a
tabId to the
Tabs component. These ids are required for accessibility and help when
you need additional control of the content (see next example).
- Tab one
- Tab two
Tabs normally are a full page layout type of thing, the
TabsContainer can be updated to include
a toolbar and be fixed to the top of the page. This will apply some additional styles and class names to offset
the tab panels and fix the toolbar + tabs to the top of the page.
There are times where you don't need the
TabsContainer component to handle selecting
active tab content for you and adding swiping. For these cases, you can just use the
with a list of
Tab that have no children. For this documentation site, I am using
Tabs component with
react-router to change the route and display different
content in the
Check out the source code in this card to see how the
DocumentationTabs was added.