Tabs — Loidolt Theme

import { Tabs } from '@loidolt/theme-svelte';

Example

A small, coherent foundation for Loidolt applications.

Location, crop shape and size. Every panel stays mounted, so a hidden panel keeps its state.

Defaults to the first tab, and falls back to it if the selected tab disappears — removing a tab cannot blank every panel.
Every panel stays mounted and hidden while unselected, so panels keep their state.
variant="rail" is an icon rail for a settings sidebar: give each tab an icon snippet and a short label, and the root a height so its panels scroll beside the rail. Switch orientation to horizontal where the layout stacks; a vertical rail also falls back to a row on phones.
panelHeader renders shared content once above the panels, such as a filter field; the vertical rail pins it while the panels scroll.

Generated from the component source, so it cannot drift from the implementation.

Tabs props
Prop	Type	Default	Notes
`children` required	`Snippet<[{ value: T }]>`	`—`	Every panel stays mounted, hidden while unselected, so a panel keeps its state and its controls can be found while another one shows.
`tabs` required	`TabItem<T>[]`	`—`
`class`	`string`	`—`
`contentClass`	`string`	`—`
`label`	`string`	`—`	Accessible name of the tab list.
`listClass`	`string`	`—`
`onValueChange`	`(value: T) => void`	`—`
`orientation`	`Orientation`	`'horizontal'`
`panelHeader`	`Snippet`	`—`	Shared content above the panels, such as a filter or search; pinned while the rail's panels scroll.
`panelsClass`	`string`	`—`	The element around the panels, present in the rail variant or with a `panelHeader`.
`ref` bindable	`HTMLElement \| null`	`null`
`value` bindable	`T`	`tabs[0]?.value`	Defaults to the first tab, so a panel is always rendered.
`variant`	`'line' \| 'rail'`	`'line'`	`line` underlines the selected tab. `rail` is an icon rail for a settings sidebar: short labels under icons, the list fixed beside (or above) panels that scroll on their own.