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:
  • index of the Tab
  • id of the Tab if present
  • href if the clicked target was a link, this will be its href
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: