Tabs 标签页

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

组件特性

🎨 3 种视觉变体：支持 line、segment、pill 视觉变体。
📐 4 种位置：支持上、下、左、右标签位置。
📱 可滚动：支持标签溢出时的水平滚动。
✖️ 可关闭：支持可关闭的标签面板。
✋ 可拖拽：支持拖拽重排标签。
⚡ 懒加载：支持标签面板内容的懒渲染。
📱 响应式折叠：支持标签溢出的响应式折叠。
🎨 主题定制：基于 BrConfigProvider 支持全局主题配置和 TailwindCSS 局部覆盖。

基础用法

<script setup lang="ts">
import { BrTabs, BrTabsList, BrTabsTrigger, BrTabsContent } from '@breezeui/vue'
</script>

<template>
  <BrTabs default-value="account" class="w-full">
    <BrTabsList>
      <BrTabsTrigger value="account">Account</BrTabsTrigger>
      <BrTabsTrigger value="password">Password</BrTabsTrigger>
    </BrTabsList>
    <BrTabsContent value="account">Make changes to your account here.</BrTabsContent>
    <BrTabsContent value="password">Change your password here.</BrTabsContent>
  </BrTabs>
</template>

变体

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

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

<script setup lang="ts">
import { BrTabs, BrTabsList, BrTabsTrigger, BrTabsContent } from '@breezeui/vue'
</script>

<template>
  <div class="space-y-4 w-full">
    <div class="space-y-2">
      <h3 class="text-sm font-medium">Line Variant</h3>
      <BrTabs default-value="tab1" variant="line" class="w-full">
        <BrTabsList>
          <BrTabsTrigger value="tab1">Tab 1</BrTabsTrigger>
          <BrTabsTrigger value="tab2">Tab 2</BrTabsTrigger>
        </BrTabsList>
        <BrTabsContent value="tab1" class="p-4 border rounded-md">Content 1</BrTabsContent>
        <BrTabsContent value="tab2" class="p-4 border rounded-md">Content 2</BrTabsContent>
      </BrTabs>
    </div>

    <div class="space-y-2">
      <h3 class="text-sm font-medium">Card Variant</h3>
      <BrTabs default-value="tab1" variant="card" class="w-full">
        <BrTabsList>
          <BrTabsTrigger value="tab1">Tab 1</BrTabsTrigger>
          <BrTabsTrigger value="tab2">Tab 2</BrTabsTrigger>
        </BrTabsList>
        <BrTabsContent value="tab1" class="p-4 border rounded-md mt-2">Content 1</BrTabsContent>
        <BrTabsContent value="tab2" class="p-4 border rounded-md mt-2">Content 2</BrTabsContent>
      </BrTabs>
    </div>

    <div class="space-y-2">
      <h3 class="text-sm font-medium">Underline Variant</h3>
      <BrTabs default-value="tab1" variant="underline" class="w-full">
        <BrTabsList>
          <BrTabsTrigger value="tab1">Tab 1</BrTabsTrigger>
          <BrTabsTrigger value="tab2">Tab 2</BrTabsTrigger>
        </BrTabsList>
        <BrTabsContent value="tab1" class="p-4 border rounded-md">Content 1</BrTabsContent>
        <BrTabsContent value="tab2" class="p-4 border rounded-md">Content 2</BrTabsContent>
      </BrTabs>
    </div>
  </div>
</template>

垂直标签页

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

<script setup lang="ts">
import { BrTabs, BrTabsList, BrTabsTrigger, BrTabsContent } from '@breezeui/vue'
</script>

<template>
  <BrTabs default-value="account" position="left" class="w-full h-[300px]">
    <BrTabsList class="w-32">
      <BrTabsTrigger value="account">Account</BrTabsTrigger>
      <BrTabsTrigger value="password">Password</BrTabsTrigger>
      <BrTabsTrigger value="notifications">Notifications</BrTabsTrigger>
      <BrTabsTrigger value="display">Display</BrTabsTrigger>
    </BrTabsList>
    <BrTabsContent value="account" class="p-6">Account settings here.</BrTabsContent>
    <BrTabsContent value="password" class="p-6">Password settings here.</BrTabsContent>
    <BrTabsContent value="notifications" class="p-6">Notification settings here.</BrTabsContent>
    <BrTabsContent value="display" class="p-6">Display settings here.</BrTabsContent>
  </BrTabs>
</template>

可滚动标签页

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

<script setup lang="ts">
import { BrTabs, BrTabsList, BrTabsTrigger, BrTabsContent } from '@breezeui/vue'
</script>

<template>
  <BrTabs default-value="tab1" class="w-full">
    <BrTabsList scrollable>
      <BrTabsTrigger v-for="i in 15" :key="i" :value="`tab${i}`">
        Tab {{ i }}
      </BrTabsTrigger>
    </BrTabsList>
    <BrTabsContent v-for="i in 15" :key="i" :value="`tab${i}`" class="p-4 border rounded-md mt-2">
      Content {{ i }}
    </BrTabsContent>
  </BrTabs>
</template>

可关闭标签页

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

<script setup lang="ts">
import { ref } from 'vue'
import { BrTabs, BrTabsList, BrTabsTrigger, BrTabsContent } from '@breezeui/vue'

const activeTab = ref('tab1')

const tabs = ref([
  { value: 'tab1', title: 'Tab 1', content: 'Content 1' },
  { value: 'tab2', title: 'Tab 2', content: 'Content 2' },
  { value: 'tab3', title: 'Tab 3', content: 'Content 3' },
])

const handleClose = (value: string | number) => {
  const index = tabs.value.findIndex(tab => tab.value === value)
  if (index === -1) return

  tabs.value.splice(index, 1)

  // If the active one is closed tab，automatically activate the previous or next one
  if (activeTab.value === value) {
    if (tabs.value.length > 0) {
      const nextIndex = index >= tabs.value.length ? index - 1 : index
      activeTab.value = tabs.value[nextIndex].value
    } else {
      activeTab.value = ''
    }
  }
}
</script>

<template>
  <BrTabs v-model="activeTab" class="w-full" closable>
    <BrTabsList>
      <BrTabsTrigger 
        v-for="tab in tabs" 
        :key="tab.value" 
        :value="tab.value"
        @close="handleClose"
      >
        {{ tab.title }}
      </BrTabsTrigger>
    </BrTabsList>
    <BrTabsContent 
      v-for="tab in tabs" 
      :key="tab.value" 
      :value="tab.value"
      class="p-4 border rounded-md mt-2"
    >
      {{ tab.content }}
    </BrTabsContent>
  </BrTabs>
</template>

主题

全局定制 (BrConfigProvider)

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

<script setup lang="ts">
import { BrTabs, BrTabsList, BrTabsTrigger, BrTabsContent, BrConfigProvider } from '@breezeui/vue'

const theme = {
  primary: '#10b981', // emerald-500
  radius: 0.5,
}
</script>

<template>
  <BrConfigProvider :theme="theme">
    <div class="space-y-4 w-full">
      <h3 class="font-medium">Emerald Theme with ConfigProvider</h3>
      <BrTabs default-value="account" variant="line" class="w-full">
        <BrTabsList>
          <BrTabsTrigger value="account">Account</BrTabsTrigger>
          <BrTabsTrigger value="password">Password</BrTabsTrigger>
        </BrTabsList>
        <BrTabsContent value="account" class="p-4 border mt-2">Account (Emerald Theme)</BrTabsContent>
        <BrTabsContent value="password" class="p-4 border mt-2">Password (Emerald Theme)</BrTabsContent>
      </BrTabs>
    </div>
  </BrConfigProvider>
</template>

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

#Tabs 标签页

#组件特性

#基础用法

#变体

#垂直标签页

#可滚动标签页

#可关闭标签页

#主题

#全局定制 (BrConfigProvider)

#API

#BrTabs Props

#BrTabsList Props

#BrTabsTrigger Props

#BrTabsContent Props

#Emits