Tab Bar

Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy. The Tab Bar contains the Tab Scroller and Tab components.

Markup

<m-tab-bar>
    <m-tab-scroller>
        <m-tab>
            <m-icon slot="icon" icon="home"/>
            Home
        </m-tab>
        <m-tab>
            <m-icon slot="icon" icon="favorite"/>
            Like me
        </m-tab>
        <m-tab>
            <m-icon slot="icon" icon="person"/>
            About me
        </m-tab>
    </m-tab-scroller>
</m-tab-bar>

or the 0.x.y versions compatible way (not suggested)

<m-tab-bar>
    <m-tab>
        <m-icon slot="icon" icon="home"/>
        Home
    </m-tab>
    <m-tab>
        <m-icon slot="icon" icon="favorite"/>
        Like me
    </m-tab>
    <m-tab>
        <m-icon slot="icon" icon="person"/>
        About me
    </m-tab>
</m-tab-bar>

Props

Prop	Type	Default	Description
focusOnActivate	Boolean	true	Sets whether tabs focus themselves when activated.
useAutomaticActivation	Boolean	true	Sets how tabs activate in response to keyboard interaction. Automatic (true) activates as soon as a tab is focused with arrow keys; manual (false) activates only when the user presses space/enter. The default is automatic (true).
activateTab	Number	0	Activates the tab at the given index.
scrollIntoView	Number	0	Scrolls the tab at the given index into view.
align	String	''	Only use when <m-tab-scroller> is not provided in the default slot. Sets the elements inside the scroll content element to be aligned to the start, center, or end of the scroll content element.

Slots

Slot	Description
default	tab bar content (tabs, or tabs within <m-tab-scroller>)

Events

Event	Payload	Description
activated	{"index": number}	Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.

Tab Scroller

A Tab Scroller allows for smooth native and animated scrolling of tabs.

Props

Prop	Type	Default	Description
align	String	''	Sets the elements inside the scroll content element to be aligned to the start, center, or end of the scroll content element.

Slots

Slot	Description
default	tabs

Tab

Props

Prop	Type	Default	Description
active	Boolean	false	whether the tab should be marked as active
spanningOnlyContent	Boolean	true	whether the label in the default slot should be visible
focusOnActivate	Boolean	true	Sets whether the tab should focus itself when activated.
stacked	Boolean	false	Indicates that the tab icon and label should flow vertically instead of horizontally.
minWidth	Boolean	false	Indicates that the tab should shrink in size to be as narrow as possible without causing text to wrap.
id	String	''	Value of the root tab element's id attribute.
fade	Boolean	false	Only use when <m-tab-indicator> is not provided in the indicator slot. Sets up the tab indicator to fade in on activation and fade out on deactivation.
indicatorIcon	''	Only use when <m-tab-indicator> is not provided in the indicator slot. The icon content of the tab indicator content.
indicatorIconClass	'material-icons'	Only use when <m-tab-indicator> is not provided in the indicator slot. The icon class of the tab indicator content.
href	''	whether the tab should be a hyperlink and should use anchor tag instead of a button

NOTE: The tab indicator is an underline indicator by default. You can change it to a icon indicator by setting indicatorIcon or indicatorClass to a different value or provide a <m-tab-indicator> in the indicator slot.

NOTE: In case of using anchor tag for tab (<m-tab href="some/url">) it is required to switch off automatic activation in parent component (<m-tab-bar :useAutomaticActivation="false">).

Slots

Slot	Description
default	tab label
icon	icon
indicator	tab indicator

Tab Indicator

A Tab Indicator is a visual guide that shows which Tab is active.

Props

Prop	Type	Default	Description
fade	Boolean	false	Sets up the tab indicator to fade in on activation and fade out on deactivation.
icon	String	''	The icon to use when using as an icon indicator
active	Boolean	false	Activates or deactivates the indicator.
iconClass	String	'material-icons'	The class applied to the icon when using as an icon indicator.

Reference

• https://github.com/material-components/material-components-web/tree/master/packages/mdc-tabs