Navigation
Tabs & TabPanels
Sliding indicator measured from the active tab, plus a swipeable panel track for phones.
Tabs TabPanels
import { Tabs, TabPanels } from '@anomalia/ui'; Notes
- The indicator is measured, not assumed, and re-measured on resize — so it survives late-loading fonts.
- TabPanels gives you the Material gesture: drag horizontally to change tab, committing on distance or velocity.
- Only the active panel is exposed to assistive tech; the neighbours are
inert.
Examples
Basics
The indicator is measured from the active tab and re-measured on resize, so it stays aligned through font loading and reflow.
Active section: plan
Swipeable
Drag the panel sideways — the Material gesture the web usually omits. The track follows the finger, resists at the ends, and commits on distance or velocity.
Monday
Carousel · behind the scenes of the new collection.
API
Tabs
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | Bindable active value. |
items | SegmentOption[] | — | `{ value, label, badge?, disabled? }`. |
variant | 'underline' | 'pill' | 'underline' | Indicator style. |
TabPanels
| Prop | Type | Default | Description |
|---|---|---|---|
values | string[] | — | Panel order — must match the Tabs items. |
panel | Snippet<[string]> | — | Rendered once per value. |
swipeable | boolean | true | Enable the drag gesture. |
Every component also forwards the native attributes of its root element, plus class, so anything not listed here still works.