标签页

用于在同一页面切换相关内容面板的组件。

安装


pnpm dlx shadcn@latest add @lumi-ui/tabs

基本用法

import { Tabs, TabsListContent, TabsPanel, TabsTab } from "@/registry/ui/tabs";

<Tabs>
  <TabsListContent>
    <TabsTab>标签 1</TabsTab>
    <TabsTab>标签 2</TabsTab>
  </TabsListContent>
  <TabsPanel>内容 1</TabsPanel>
  <TabsPanel>内容 2</TabsPanel>
</Tabs>

组件结构

 <Tabs>
   <TabsListContent>
     <TabsTab/>
   </TabsListContent>
   <TabsPanel/>
 </Tabs>

实用示例

注意

我们已经默认添加了 CSS 变量来处理垂直标签页。如果你的应用不需要垂直标签页，可以删除所有 data-[orientation=vertical] 相关的样式。

下划线样式

幽灵样式

如果只对文字进行样式设计，可以忽略 TabsIndicator 组件。

提示

TabsListContent 是一个针对常见用法的复合组件，它有一个默认的类似“胶囊”的指示器。你可以根据你的设计系统调整 TabIndicator的样式。

API 参考

基础组件

组件	描述
`Tabs`	将标签按钮组和对应的内容面板组合在一起。渲染一个 `<div>` 元素。
`TabsList`	将各个标签按钮组合在一起。渲染一个 `<div>` 元素。
`TabsTab`	一个独立的交互式标签按钮，用于切换对应的内容面板。渲染一个 `<button>` 元素。
`TabsIndicator`	一个视觉指示器，可以设置样式以匹配当前选中标签的位置。渲染一个 `<span>` 元素。
`TabsPanel`	当对应的标签被选中时显示的面板。渲染一个 `<div>` 元素。

复合组件

组件	描述
`TabsListContent`	一个包装了 `TabsList` 和 `TabsIndicator` 组件的复合组件。提供默认的类似“胶囊”的样式。