Tabs
Master-detail pattern for navigating content
Demo
See selecting tabs to learn how to select the tabs
API
Tags
Name | Type | Content | |||||||
---|---|---|---|---|---|---|---|---|---|
m-tabs |
Custom tag | button or a children |
Attributes
Name | Value | Description |
---|
For m-tabs only:
scrollable |
Boolean attribute | Makes the tab list horizontally scrollable. In some cases, like flex grow, overflow doesn't happen and so the parent element will need an explicit width (try the width-full utility class). |
For tab only:
aria-selected |
true or false | Set the selected tab to true. | |||||||
disabled |
Boolean attribute | Disables the tab. |
Guidelines
Selecting tabs
Selecting the tab
Setting the selected tab is handled by your app. To select a tab, set aria-selected=true
. There are a several approaches you could take to manage this, but event delegation comparing tabs to the clicked tab is probably the simplest:
That will select the tab, but that is not typically everything you need to do. Showing the corresponding tab panel requires a bit more.
Showing a tab panel
This component assumes nothing about what happens when a tab is selected, which allows for multiple use cases like toggling between tab panels in the DOM or navigating to a new page or something else. Here's an example of the typical use case of selecting a tab and showing its panel:
Here's the same thing with a more declarative approach using Riot.js, for example:
Accessibility
All of the necessary ARIA attributes are here in the example below: