导航与展开@neumorphism-ui/tabs

Tabs

基于 Base UI Tabs，将 active trigger 呈现为 raised 表面，将 list 呈现为 inset track。支持受控与非受控值、自动或手动激活，以及横向和纵向排列。

@neumorphism-ui/tabs

Registry JSON

预览

投资组合价值₩18,420,000本月 +6.8%

安装

npx shadcn@latest add @neumorphism-ui/tabs

CLI 会依次处理 npm 依赖、base token、utils 和组件源码。

首次使用此 Registry？请先完成 namespace 配置。

用法

Import

import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/components/ui/tabs"

Example

<Tabs defaultValue="surface">
  <TabsList aria-label="设计 token">
    <TabsTrigger value="surface">表面</TabsTrigger>
    <TabsTrigger value="motion">动效</TabsTrigger>
    <TabsTrigger value="access">无障碍</TabsTrigger>
  </TabsList>
  <TabsContent value="surface">浮起与内嵌表面 token。</TabsContent>
  <TabsContent value="motion">简短且一致的过渡 token。</TabsContent>
  <TabsContent value="access">焦点与对比度 token。</TabsContent>
</Tabs>

API 参考

组件	属性	类型	默认值	说明
`Tabs`	`value / defaultValue`	`string`	`—`	受控的 active tab 值或非受控初始值。
`Tabs`	`onValueChange`	`(value: string) => void`	`—`	active tab 变化时调用。
`Tabs`	`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	设置 list 方向和 Arrow 键导航轴。
`TabsList`	`activateOnFocus`	`boolean`	`false`	决定用 Arrow 键移动 focus 时是否同时激活 panel。
`TabsTrigger`	`value`必填	`string`	`—`	与所关联 TabsContent 共享的唯一值。
`TabsContent`	`value`必填	`string`	`—`	用于打开该 panel 的 trigger 值。