Tabs

Master-detail pattern for navigating content

Demo

API

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:

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: