Tabs 标签页

一组分层的内容部分—称为标签面板—一次显示一个。

基础用法

Make changes to your account here.

Example

变体

使用 variant 属性控制标签页的视觉样式。

• Line: 默认样式，带有底部边框和活动指示器。
• Card: 卡片样式，带有边框。
• Underline: 简单的下划线样式。

Line Variant

Content 1

Card Variant

Content 1

Underline Variant

Content 1

Example

垂直标签页

使用 position 属性控制标签列表的位置。

Account settings here.

Example

可滚动标签页

在 BrTabsList 上设置 scrollable 属性，以便在标签超出容器宽度时启用滚动。

Content 1

Example

可关闭标签页

在 BrTabs 或 BrTabsTrigger 上设置 closable 属性以使标签可关闭。

Content 1

Example

主题

全局定制 (BrConfigProvider)

你可以通过 BrConfigProvider 的 theme 属性覆盖默认的 CSS 变量。

Emerald Theme with ConfigProvider

Account (Emerald Theme)

Example

API

BrTabs Props

名称	类型	默认值	描述
variant	string	'line'	视觉样式变体: line, card, underline
position	string	'top'	标签列表的位置: top, right, bottom, left
responsive	boolean	false	是否响应式
closable	boolean	false	是否可关闭
draggable	boolean	false	是否可拖拽
lazyLoad	boolean	true	是否懒加载内容
limit	number	0	折叠前的最大可见标签数

以及所有 Radix Vue TabsRoot 的属性。

BrTabsList Props

名称	类型	默认值	描述
scrollable	boolean	false	是否可滚动

以及所有 Radix Vue TabsList 的属性。

BrTabsTrigger Props

名称	类型	默认值	描述
closable	boolean	undefined	是否可关闭。覆盖父级 closable
draggable	boolean	undefined	是否可拖拽。覆盖父级 draggable

以及所有 Radix Vue TabsTrigger 的属性。

BrTabsContent Props

所有 Radix Vue TabsContent 的属性。

Emits

名称	描述	参数
update:modelValue	选中标签改变时触发	`(value: string
close	点击标签关闭按钮时触发	`(value: string
drag-end	拖拽结束时触发	`(newOrder: (string