Tabs

Primary and secondary tabs (COMPONENT_SPEC §17; Compose PrimaryTabRow,SecondaryTabRow, PrimaryScrollableTabRow,SecondaryScrollableTabRow with Tab and LeadingIconTab). Fixed rows split the width into equal tabs; scrollable rows size tabs to their labels (at least 90dp) after a 52dp edge padding. The primary indicator spans the selected tab's content, the secondary one the whole tab. Selecting another tab slides the indicator on the default spatial spring from wherever it is (Compose's TabIndicatorOffsetNode), and a scrollable row scrolls the selected tab to the centre.

Keyboard (APG tabs, manual activation as Compose and m3.material.io): Tab enters the row on the selected tab, the arrow keys move the focus (no wrapping), Home / End jump to the ends, Space / Enter select. Each tab controls a role="tabpanel".

Static rows (m3e-css)

Plain HTML with m3e-css classes: .m3e-tabs (--primary /--secondary, --scrollable, --leading-icon), arole="tablist" __list and .m3e-tab buttons. Thearia-selected="true" tab draws the indicator.

Element

<m3e-tabs variant scrollable icon-position label selected> with<m3e-tab value icon disabled label-hidden> children and a<m3e-tab-panel value> per tab; selection-change (cancelable) when another tab is pressed.

VideosPhotosAudioVideos you watched recently.Photos from your library.Songs and podcasts.
OverviewSpecsUsageCodeOverview panel.Specs panel.Usage panel.Code panel.
Tab 1Tab 2Tab 3 with lots of textTab 4Tab 5Tab 6 with lots of textTab 7Tab 8Tab 9 with lots of textTab 10Tab 1 panel. Tab 2 panel. Tab 3 with lots of text panel. Tab 4 panel. Tab 5 panel. Tab 6 with lots of text panel. Tab 7 panel. Tab 8 panel. Tab 9 with lots of text panel. Tab 10 panel.
Tab 1Tab 2Tab 3 with lots of textTab 4Tab 5Tab 6 with lots of textTab 7Tab 8Tab 9 with lots of textTab 10

React

<Tabs variant scrollable iconPosition items selectedKey onSelectionChange>(or <Tab id icon> children) followed by its<TabPanel id>s; the same DOM as the element.