BreezeUI
  • 简体中文

    • Segment 分段选择器

    分段控制器组件，用于在互斥选项之间切换，带有平滑的滑动指示器动画。

    组件特性

    • 🎨 平滑动画：带有平滑的滑动指示器动画。
    • 📏 多种尺寸：支持 sm、md（默认）、lg 尺寸规格。
    • ❌ 禁用状态：支持禁用整组或单个选项。
    • 🖼️ 图标支持：支持通过 BrIcon 或内联内容展示图标。
    • 🌗 暗黑模式：基于 BrConfigProvider 自动适配暗黑模式。
    • 🎨 主题定制：支持全局主题配置和 TailwindCSS 局部覆盖。

    基础用法

    <script setup>
import { BrSegment, BrSegmentItem } from '@breezeui/vue'
import { ref } from 'vue'

const value = ref('month')
</script>

<template>
  <BrSegment v-model="value">
    <BrSegmentItem value="day">Day</BrSegmentItem>
    <BrSegmentItem value="week">Week</BrSegmentItem>
    <BrSegmentItem value="month">Month</BrSegmentItem>
    <BrSegmentItem value="year">Year</BrSegmentItem>
  </BrSegment>
</template>

    尺寸

    使用 BrSegment 的 size 属性控制整体尺寸。可选值：sm、md（默认）、lg。

    <script setup>
import { BrSegment, BrSegmentItem } from '@breezeui/vue'
import { ref } from 'vue'

const value = ref('md')
</script>

<template>
  <div class="flex flex-col gap-4">
    <BrSegment v-model="value" size="sm">
      <BrSegmentItem value="sm">Small</BrSegmentItem>
      <BrSegmentItem value="md">Medium</BrSegmentItem>
      <BrSegmentItem value="lg">Large</BrSegmentItem>
    </BrSegment>
    <BrSegment v-model="value" size="md">
      <BrSegmentItem value="sm">Small</BrSegmentItem>
      <BrSegmentItem value="md">Medium</BrSegmentItem>
      <BrSegmentItem value="lg">Large</BrSegmentItem>
    </BrSegment>
    <BrSegment v-model="value" size="lg">
      <BrSegmentItem value="sm">Small</BrSegmentItem>
      <BrSegmentItem value="md">Medium</BrSegmentItem>
      <BrSegmentItem value="lg">Large</BrSegmentItem>
    </BrSegment>
  </div>
</template>

    禁用

    使用 BrSegment 的 disabled 属性禁用整组，或在单个 BrSegmentItem 上设置 disabled 禁用特定选项。

    <script setup>
import { BrSegment, BrSegmentItem } from '@breezeui/vue'
import { ref } from 'vue'

const value = ref('list')
</script>

<template>
  <div class="flex flex-col gap-4">
    <BrSegment v-model="value" disabled>
      <BrSegmentItem value="list">List</BrSegmentItem>
      <BrSegmentItem value="grid">Grid</BrSegmentItem>
      <BrSegmentItem value="table">Table</BrSegmentItem>
    </BrSegment>

    <BrSegment v-model="value">
      <BrSegmentItem value="list">List</BrSegmentItem>
      <BrSegmentItem value="grid" disabled>Grid</BrSegmentItem>
      <BrSegmentItem value="table">Table</BrSegmentItem>
    </BrSegment>
  </div>
</template>

    图标

    BrSegmentItem 支持通过 BrIcon 或内联内容展示图标。

    <script setup>
import { BrSegment, BrSegmentItem, BrIcon } from '@breezeui/vue'
import { ref } from 'vue'

const value = ref('grid')
</script>

<template>
  <div class="flex flex-col gap-4">
    <BrSegment v-model="value">
      <BrSegmentItem value="list">
        <BrIcon icon="lucide:list" size="sm" />
      </BrSegmentItem>
      <BrSegmentItem value="grid">
        <BrIcon icon="lucide:grid-3x3" size="sm" />
      </BrSegmentItem>
      <BrSegmentItem value="table">
        <BrIcon icon="lucide:table" size="sm" />
      </BrSegmentItem>
    </BrSegment>

    <BrSegment v-model="value">
      <BrSegmentItem value="list">
        <BrIcon icon="lucide:list" size="sm" class="mr-1.5" />
        List
      </BrSegmentItem>
      <BrSegmentItem value="grid">
        <BrIcon icon="lucide:grid-3x3" size="sm" class="mr-1.5" />
        Grid
      </BrSegmentItem>
      <BrSegmentItem value="table">
        <BrIcon icon="lucide:table" size="sm" class="mr-1.5" />
        Table
      </BrSegmentItem>
    </BrSegment>
  </div>
</template>

    API

    BrSegment Props

    名称类型默认值描述
    modelValuestring | numberundefined当前选中值（支持 v-model 双向绑定）
    size'sm' | 'md' | 'lg''md'分段控制器尺寸
    disabledbooleanfalse是否禁用整组
    classanyundefined自定义 CSS 类名

    BrSegmentItem Props

    名称类型默认值描述
    valuestring | number— （必填）选项的唯一标识值
    disabledbooleanfalse是否禁用该项
    classanyundefined自定义 CSS 类名

    BrSegment Emits

    名称描述参数
    update:modelValue选中值变更时触发(value: string | number)

    无障碍

    • BrSegment 具有 role="radiogroup" 和 aria-disabled 支持
    • 每个 BrSegmentItem 具有 role="radio" 和反映激活状态的 aria-checked
    • 键盘导航：ArrowLeft/ArrowRight 切换选项，Home/End 跳转到首尾
    • 焦点管理：仅当前激活项在 Tab 序列中