ElyriTabs
标签页：受控 / 非受控双支持，方向键与 Home / End 导航，符合 WAI-ARIA 标签页模式。
安装
添加组件
pnpm dlx @elyri/cli@latest add tabs示例
分段
分段胶囊样式，选中项由滑块带动切换动画。
Tabs keep every panel mounted and only hide the inactive ones.
Recent activity shows up here.
Preferences live in this panel.
import { Tabs } from './components/elyri/Tabs';
export function Example() {
return (
<Tabs defaultValue="overview" variant="segmented" className="demo-ui-tabs">
<Tabs.List>
<Tabs.Trigger value="overview">Overview</Tabs.Trigger>
<Tabs.Trigger value="activity">Activity</Tabs.Trigger>
<Tabs.Trigger value="settings">Settings</Tabs.Trigger>
</Tabs.List>
<Tabs.Panel value="overview">Tabs keep every panel mounted and only hide the inactive ones.</Tabs.Panel>
<Tabs.Panel value="activity">Recent activity shows up here.</Tabs.Panel>
<Tabs.Panel value="settings">Preferences live in this panel.</Tabs.Panel>
</Tabs>
);
}下划线
文字加下划线样式，选中项底部高亮。
Tabs keep every panel mounted and only hide the inactive ones.
Recent activity shows up here.
Preferences live in this panel.
import { Tabs } from './components/elyri/Tabs';
export function Example() {
return (
<Tabs defaultValue="overview" variant="underline" className="demo-ui-tabs">
<Tabs.List>
<Tabs.Trigger value="overview">Overview</Tabs.Trigger>
<Tabs.Trigger value="activity">Activity</Tabs.Trigger>
<Tabs.Trigger value="settings">Settings</Tabs.Trigger>
</Tabs.List>
<Tabs.Panel value="overview">Tabs keep every panel mounted and only hide the inactive ones.</Tabs.Panel>
<Tabs.Panel value="activity">Recent activity shows up here.</Tabs.Panel>
<Tabs.Panel value="settings">Preferences live in this panel.</Tabs.Panel>
</Tabs>
);
}纵向
垂直排列，适合侧边导航布局。
Tabs keep every panel mounted and only hide the inactive ones.
Recent activity shows up here.
Preferences live in this panel.
import { Tabs } from './components/elyri/Tabs';
export function Example() {
return (
<Tabs defaultValue="overview" orientation="vertical" className="demo-ui-tabs">
<Tabs.List>
<Tabs.Trigger value="overview">Overview</Tabs.Trigger>
<Tabs.Trigger value="activity">Activity</Tabs.Trigger>
<Tabs.Trigger value="settings">Settings</Tabs.Trigger>
</Tabs.List>
<Tabs.Panel value="overview">Tabs keep every panel mounted and only hide the inactive ones.</Tabs.Panel>
<Tabs.Panel value="activity">Recent activity shows up here.</Tabs.Panel>
<Tabs.Panel value="settings">Preferences live in this panel.</Tabs.Panel>
</Tabs>
);
}属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
value | string | — | 受控选中值 |
defaultValue | string | — | 非受控初始值 |
onValueChange | (value: string) => void | — | 选中值变化回调，受控与非受控都会触发 |
orientation | 'horizontal' | 'vertical' | 'horizontal' | 排列方向：horizontal / vertical |
variant | 'segmented' | 'underline' | 'segmented' | 外观样式：segmented（分段胶囊）/ underline（文字加下划线），滑块带切换动画 |
Tabs.List | HTMLAttributes<HTMLDivElement> | — | 标签栏，承接方向键导航 |
Tabs.Trigger | { value: string } & ButtonHTMLAttributes | — | 单个标签，value 与面板对应 |
Tabs.Panel | { value: string } & HTMLAttributes | — | 面板，始终留在 DOM 中，仅隐藏未选中的 |
...rest | HTMLAttributes | — | 其余属性透传给原生 div |