Tabs

两端斜切的轨道，以及一块弹向当前标签页的强调色斜切块。所有边缘倾斜方向一致，斜切块无论停在哪一端，都与轨道平行。

安装

terminal

# once per project: where @zzzui items come frompnpm dlx shadcn@latest registry add @zzzui=https://zzzui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zzzui/tabs

示例

带面板

Three errands, one delivery across the river, a call at nine.

tabs-basic.tsx

import { Tabs, TabsList, TabsPanel, TabsTab } from "@/components/zero/tabs";export default function TabsBasic() {  return (    <Tabs defaultValue="today" className="w-full max-w-md">      <TabsList>        <TabsTab value="today">Today</TabsTab>        <TabsTab value="week">This week</TabsTab>        <TabsTab value="later">Later</TabsTab>      </TabsList>      <TabsPanel value="today" className="font-medium text-zero-text-2">        Three errands, one delivery across the river, a call at nine.      </TabsPanel>      <TabsPanel value="week" className="font-medium text-zero-text-2">        The workshop reopens on Thursday; the parts arrive the day before.      </TabsPanel>      <TabsPanel value="later" className="font-medium text-zero-text-2">        Nothing planned yet.      </TabsPanel>    </Tabs>  );}

尺寸

tabs-sizes.tsx

import { Tabs, TabsList, TabsTab } from "@/components/zero/tabs";export default function TabsSizes() {  return (    <div className="grid justify-items-center gap-5">      {(["sm", "md", "lg"] as const).map((size) => (        <Tabs key={size} size={size} defaultValue="notes">          <TabsList>            <TabsTab value="notes">Notes</TabsTab>            <TabsTab value="level">Level</TabsTab>            <TabsTab value="schedule">Schedule</TabsTab>          </TabsList>        </Tabs>      ))}    </div>  );}

图标、长文字与禁用的标签页

tabs-icons.tsx

import { LockIcon, SearchIcon } from "@/components/zero/icons";import { Tabs, TabsList, TabsTab } from "@/components/zero/tabs";export default function TabsIcons() {  return (    <Tabs defaultValue="all">      <TabsList>        <TabsTab value="all">All</TabsTab>        <TabsTab value="open">Open commissions</TabsTab>        <TabsTab value="search">          <SearchIcon />          Find        </TabsTab>        <TabsTab value="locked" disabled>          <LockIcon />          Locked        </TabsTab>      </TabsList>    </Tabs>  );}

快捷键，如同游戏手柄的肩键

Press Q or E anywhere on the page to step between tabs.

tabs-hotkeys.tsx

import { Tabs, TabsList, TabsPanel, TabsTab } from "@/components/zero/tabs";export default function TabsHotkeys() {  return (    <Tabs defaultValue="board" className="w-full max-w-lg">      <TabsList hotkeys={["q", "e"]}>        <TabsTab value="board">Board</TabsTab>        <TabsTab value="today">Today</TabsTab>        <TabsTab value="rank">Rank</TabsTab>      </TabsList>      <TabsPanel value="board" className="font-medium text-zero-text-2">        Press Q or E anywhere on the page to step between tabs.      </TabsPanel>      <TabsPanel value="today" className="font-medium text-zero-text-2">        Four shifts today; the night one is yours.      </TabsPanel>      <TabsPanel value="rank" className="font-medium text-zero-text-2">        Level 8, sixty points from 9.      </TabsPanel>    </Tabs>  );}

行为

斜切块弹向新的标签页，约四分之一秒后落定；开启「减少动态效果」时直接落到目标位置，不经过滑动。滑动过程中，每个标签页的文字被斜切块覆盖的部分变为深色，其余部分保持浅色，因此深色轨道上不会出现深色文字。

按方向键可在标签页之间移动焦点；按 Enter 或空格键激活当前聚焦的标签页，该标签页立即在焦点框内显示为填充状态。Tabs 仅支持水平方向。设置 hotkeys 后，在页面任意位置按这两个键即可前后切换，如同游戏用肩键翻页。按键提示显示在轨道两端；触屏设备上没有键盘可按，提示只会挤占标签页的空间，因此不显示。

属性

Tabs

属性	类型	默认值	说明
size	"sm" \| "md" \| "lg"	"md"	单个标签页高 32、40 或 52 px；轨道另加描边与内边距。

另可传入 Base UI Tabs.Root 的全部属性。

TabsList

属性	类型	默认值	说明
hotkeys	[string, string]	—	切换到上一个、下一个标签页的两个按键，焦点不在文本框内时于页面任意位置生效；显示在轨道两端。

另可传入 Base UI Tabs.List 的全部属性。

TabsTab

属性	类型	默认值	说明
value	string	—	该标签页显示的面板。

另可传入 Base UI Tabs.Tab 的全部属性。

TabsPanel

属性	类型	默认值	说明
value	string	—	显示该面板的标签页。

另可传入 Base UI Tabs.Panel 的全部属性。