Master-detail pattern for navigating content
See selecting tabs to learn how to select a tab
For m-tabs only:
|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:
|true or false
|Set the selected tab to true. See Selecting tabs for examples.
|Disables the tab.
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:
All of the necessary ARIA attributes are here in the example below: