Tabs
Master-detail pattern for navigating content
Demo
API
Tags
Name | Type | Content | |||||||
---|---|---|---|---|---|---|---|---|---|
m-tabs |
Custom Element | <m-tab> children |
|||||||
m-tab |
Custom tag | Any |
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 full-width utility class). |
For m-tab only:
selected |
Boolean attribute | Selects that Tab. If more than one Tab has this attribute the first is selected. If no Tabs have it, then the first Tab is selected | |||||||
disabled |
Boolean attribute | Disables the Tab. |
Events
Name | Detail | Description | |||||||
---|---|---|---|---|---|---|---|---|---|
select |
An object with properties:
|
Fired after a tab was selected. If the tab's content is a link the click will be prevented and you'll need to use e.detail.href to navigate. This also fires when Tabs is first initialized. |
Methods
Signature | Description | ||||||||
---|---|---|---|---|---|---|---|---|---|
select(index) |
Selects the Tab at index . This will trigger the select event just as if the user had clicked it. |
Guidelines
Tab panel
Tabs does not enforce anything related to the toggled content, but its select
event is there to help. The content, aka "tab panels", and how they're managed is completely left up to the application. By listening to the select
event and using its detail
data you can react in any way that makes sense for your use cases. This typically means showing the section of relevant content and hiding others. Here's a simple example:
Here's the same thing in a Riot app, for example:
Accessibility
Some of the necessary ARIA roles and attributes are added and maintained automatically, but you will need to set role="tabpanel"
on the element that contains a Tab's corresponding content. You should further associate the tab and tab panel by setting up these ARIA attributes: