Tabs

用于在同一页面和上下文中切换相关视图。

预览

投资组合视图

切换概览、活动与设置；概览初始显示示例组合价值和月度变化。

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

安装

npx shadcn@latest add @neumorphism-ui/tabs

先安装一次共享 base，然后使用 CLI 添加组件及其依赖。

Registry JSON

用法

为 TabsList 提供名称，让 TabsTrigger 和 TabsContent 的 value 一致。设置初始值，需要与其他控件共享视图时使用受控状态。

"use client";

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

export default function Example() {
  return (
    <Tabs defaultValue="profile">
      <TabsList aria-label="Account settings">
        <TabsTrigger value="profile">Profile</TabsTrigger>
        <TabsTrigger value="security">Security</TabsTrigger>
      </TabsList>
      <TabsContent value="profile">Edit your profile.</TabsContent>
      <TabsContent value="security">Manage your security settings.</TabsContent>
    </Tabs>
  );
}

API 参考

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

组件	属性	类型	默认值	说明
`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 值。

预览

投资组合视图

安装

用法

API 参考

无障碍