Tabs 选项卡

Tabs 现在除了使用 Rue 当前的 box / border / lift 视觉，还提供了内容面板、默认激活项、额外操作区、居中、垂直摆放和 editable-card 等更完整的 API。

何时使用

需要在同一信息区域里切换多个视图、状态面板或设置分组时。
既想使用 daisyUI 的 box / border / lift 视觉，又需要受控、垂直摆放、额外操作区或可编辑标签头时。

受控与非受控

支持 `activeKey`、`defaultActiveKey` 与 `onChange`。

内容与布局

支持 `items.children`、`destroyOnHidden`、`centered`、`tabPlacement`。

操作能力

支持 `tabBarExtraContent`、`indicator` 与 `editable-card`。

# tabs

# tabs-border

# tabs-lift

# tabs-box

# content-panels

# tab-bar-extra-content

Workspace

# centered-tabs

# tab-placement

# editable-card

# custom-indicator

# Sizes

# tabs-bottom

# tab-disabled

# Tabs with custom color

API

Tabs 同时覆盖基础视觉标签、带面板的内容切换和 editable-card 交互，下面按根组件和单项配置拆开列出。

属性	说明	类型	默认值
`items`	标签数据源，每项至少包含 key 和 label。	`TabItem[]`	`[]`
`activeKey`	当前激活项，传入后进入受控模式。	`string`	`-`
`defaultActiveKey`	非受控模式下的初始激活项。	`string`	`首个未禁用项`
`onChange`	切换标签时回调当前 key。	`(key: string) => void`	`-`
`type`	语义化风格，card 与 editable-card 会自动套用 box 视觉。	`'line' \| 'card' \| 'editable-card'`	`-`
`style`	daisyUI 视觉风格。	`'box' \| 'border' \| 'lift'`	`由 type 推导`
`placement`	传统上下摆放位置。	`'top' \| 'bottom'`	`'top'`
`tabPlacement`	扩展摆放位置，支持垂直导航。	`'top' \| 'bottom' \| 'start' \| 'end'`	`优先于 placement`
`size`	标签尺寸，支持 xs 到 xl 以及 small / middle / large 别名。	`TabsSize`	`'md'`
`centered`	横向模式下居中排列标签头。	`boolean`	`false`
`destroyOnHidden`	切换后销毁未激活面板内容。	`boolean`	`false`
`tabBarExtraContent`	标签栏额外内容，可传单个节点或 { left, right }。	`any \| { left?: any; right?: any }`	`-`
`indicator`	激活态指示条配置，支持对齐、宽度和样式。	`{ align?: string; size?: number \| string; className?: string; style?: Record<string, any> }`	`-`
`onEdit`	editable-card 模式下新增或删除标签时触发。	`(eventOrKey: MouseEvent \| string, action: 'add' \| 'remove') => void`	`-`
`hideAdd`	editable-card 模式下隐藏新增按钮。	`boolean`	`false`
`addIcon`	新增按钮自定义内容。	`any`	`'+'`
`removeIcon`	删除按钮默认图标。	`any`	`'×'`
`className`	根节点附加类名。	`string`	`-`
`tabBarClassName`	tablist 附加类名。	`string`	`-`
`contentClassName`	面板容器附加类名。	`string`	`-`

属性	说明	类型	默认值
`key`	标签唯一标识。	`string`	`-`
`label`	标签文案，建议优先传纯文本；复杂前缀建议配合 icon 使用。	`any`	`-`
`icon`	标签前置图标或节点。	`any`	`-`
`children`	对应面板内容；任一项传入后会渲染 tabpanel。	`any`	`-`
`disabled`	禁用当前标签。	`boolean`	`false`
`className`	单个标签按钮附加类名。	`string`	`-`
`contentClassName`	单个面板附加类名。	`string`	`-`
`closable`	editable-card 模式下控制当前项是否可关闭。	`boolean`	`未禁用项默认为 true`
`closeIcon`	当前项自定义关闭图标。	`any`	`-`

使用建议

activeKey + onChange适合和路由、筛选条件、外部状态统一联动。

defaultActiveKey适合静态文档、局部示例或无需外部接管的轻交互场景。

复杂标签头优先用icon+ 文本label 组合，兼顾语义和稳定渲染。

需要完整内容区域切换时给items.children 传面板节点；只做导航标签时可以只传label。

FAQ

activeKey 和 defaultActiveKey 怎么选？

activeKey是受控模式，当前激活项由外部状态决定；defaultActiveKey只设置初始值，后续切换由组件内部维护。

style 和 type 会冲突吗？

type更偏语义能力，像card、editable-card 会自动套用适合的视觉；如果你明确传了style，就以显式样式为准。

placement 和 tabPlacement 有什么区别？

placement只覆盖上下位置；tabPlacement额外支持 start和end两种垂直摆放，并且优先级更高。

为什么复杂 label 建议拆成 icon 和文本？

当前组件会给label包一层文本容器。为了避免复杂节点在运行时被串成[object Object]，推荐把徽标、点状状态这类前缀放到icon，把主要文案保持在label。