Tabs
Master-detail pattern for navigating content
Demo
See selecting tabs to learn how to select a tab
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. See Selecting tabs for examples. | |||||||
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 without a framework:
That will only select the tab. Selecting the corresponding tab panel is explained next.
Showing a tab panel
Mdash assumes nothing about what happens when a tab is selected, which allows for multiple solutions like toggling the hidden
attribute, directly changing the DOM, rendering different components, 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: