Tabs

Вкладки. Бесплатно, MIT · Навигация и каркас › Переключение

Установка

npx valyro-cli@latest add tabs

npx shadcn@latest add https://valyro.xyz/r/tabs.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { Tabs } from 'valyro-ui';

Prop	Type	Default
`items`	`TabItem[]`		Tabs in order, each with optional panel content. Or compose them as children: `Tabs.List`, `Tabs.Tab`, `Tabs.Panel`.
`children`	`ReactNode`		The compound form instead of `items`: a `Tabs.List` of `Tabs.Tab`s, then a `Tabs.Panel` per tab that has content.
`value`	`string`		Controlled `value`; use with `onValueChange`.
`defaultValue`	`string`		Initial `value` when uncontrolled.
`onValueChange`	`(value: string) => void`		Called with the new `value` when it changes.
`variant`	`'underline' \| 'pills'`	`'underline'`	`underline`: a bar slides along the baseline; `pills`: a filled shape slides behind the active tab.
`label`	`string`		Accessible name of the tab list.
`animation`	`'default' \| 'spring'`	`'default'`	`spring`: the indicator springs between tabs, the new panel slides in from the side of the tab it came from and the panel area eases to the new height. `default`: the theme's indicator, instant panels.
`keyboardActivation`	`'automatic' \| 'manual'`	`'automatic'`	`automatic` (default): moving focus with the arrow keys selects the tab. `manual`: the arrows only move focus and Enter or Space selects, for panels that are slow to render or load (WAI-ARIA APG, React Aria).
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	`vertical`: the tabs stack in a column beside the panel and move with ArrowUp / ArrowDown.

Tabs.List (TabsList), Tabs.Tab (TabsTab), Tabs.Panel (TabsPanel)