Tabs

Material Design 3 tabs web components (lit-material-tabs, lit-material-tab).

3.4 KB gzipped
@lit-material/tabs 0.2.0
Renders on the server

Example

Install

npm install @lit-material/tabs @lit-material/tokens

import "@lit-material/tabs";

Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide

API

`<lit-material-tab-panel>`

Content for one tab. Place lit-material-tab-panel elements as siblings after a lit-material-tabs (same parent): the tabs pair them with their tabs by index, show the selected one, and wire aria-labelledby / aria-controls between them.

Properties

Property	Attribute	Type	Default	Description
`selected`	`selected`	`boolean`	`false`	Whether this panel is shown. Managed by the preceding `lit-material-tabs`.

Slots

Slot	Description
default	The panel's content.

`<lit-material-tab>`

A single tab within lit-material-tabs. Purely presentational — it has no click handler of its own; the parent listens for the bubbling click (via event.composedPath(), the same delegation pattern lit-material-select and lit-material-menu use) and drives selected/roving tabindex from there, the same way lit-material-select-option's selected is entirely managed by its parent.

Properties

Property	Attribute	Type	Default	Description
`selected`	`selected`	`boolean`	`false`
`disabled`	`disabled`	`boolean`	`false`
`ariaControls`	`aria-controls`	`string \| null`	`null`	Id of the panel this tab shows. The button lives in this element's shadow root, where an id can't reach the page, so the panel is linked through ARIA element reflection (`ariaControlsElements`) where the browser has it.

Slots

Slot	Description
default	The tab's label.
`icon`	An optional icon shown above the label.

CSS parts

Part	Description
`tab`	The button (background/padding).
`ripple`	The state-layer element the hover/press feedback is drawn on.
`focus-ring`	The focus indicator element.

`<lit-material-tabs>`

Material Design 3 tabs — a horizontal row of lit-material-tab elements with a sliding active indicator, following the WAI-ARIA tabs pattern with automatic activation (moving focus with the arrow keys immediately switches the selected tab, matching real Material Design tab behavior — the same roving-tabindex, wrap-on-arrow-keys, activate-immediately model lit-material-radio already uses for its group).

Properties

Property	Attribute	Type	Default	Description
`selected`	`selected`	`number`	`0`	Index of the selected tab.

Events

Event	Description
`change`	Fires when the selected tab changes via user interaction.

Slots

Slot	Description
default	`lit-material-tab` elements.

CSS parts

Part	Description
`tablist`	The container (the tabs' row plus the divider beneath it).
`indicator`	The sliding active-tab indicator.

Source on GitHub npm