BreezeUI
  • 简体中文

    • Progress 进度条

    基于 BrConfigProvider 实现全局主题配置，支持线性/环形两种进度展示模式，用于展示操作的当前进度。

    组件特性

    • 📊 线性和径向：支持线性进度条和径向圆形进度。
    • 📏 多种尺寸：支持 sm、md、lg 尺寸规格。
    • 🏷️ 标签：支持 label、indicator 和隐藏标签模式。
    • ⏳ 不确定状态：支持未知进度的 indeterminate 动画。
    • 🎨 自定义颜色：支持不同状态的自定义颜色。
    • 📐 自定义粗细：支持径向进度的自定义线宽。
    • 🎨 主题定制：基于 BrConfigProvider 支持全局主题配置和 TailwindCSS 局部覆盖。

    基础用法

    线性进度条 (Linear)

    默认的进度条样式，支持不同的尺寸。

    <script setup lang="ts">
import { ref } from 'vue'
import { BrProgress } from '@breezeui/vue'

const progress = ref(45)
</script>

<template>
  <div class="space-y-4 w-full">
    <BrProgress v-model="progress" size="sm" />
    <BrProgress v-model="progress" size="md" />
    <BrProgress v-model="progress" size="lg" />
  </div>
</template>

    环形进度条 (Radial)

    将 variant 设置为 radial 以使用环形进度条。

    <script setup lang="ts">
import { ref } from 'vue'
import { BrProgress } from '@breezeui/vue'

const progress = ref(60)
</script>

<template>
  <div class="flex items-center gap-4">
    <BrProgress v-model="progress" variant="radial" size="sm" />
    <BrProgress v-model="progress" variant="radial" size="md" />
    <BrProgress v-model="progress" variant="radial" size="lg" />
  </div>
</template>

    进度标签 (Labels)

    可以通过 showLabel 属性显示进度标签，支持自定义格式和位置。

    <script setup lang="ts">
import { ref } from 'vue'
import { BrProgress } from '@breezeui/vue'

const progress = ref(75)
const formatLabel = (val: number, max: number) => `${val} / ${max}`
</script>

<template>
  <div class="space-y-6 w-full">
    <!-- Outer Label -->
    <BrProgress v-model="progress" show-label="outer" />
    <!-- Inner Label -->
    <BrProgress v-model="progress" size="2xl" show-label="inner" />
    <!-- Custom Format -->
    <BrProgress v-model="progress" show-label="outer" :label-format="formatLabel" />
    <!-- Radial Label -->
    <BrProgress v-model="progress" variant="radial" size="xl" show-label />
  </div>
</template>

    不确定状态 (Indeterminate)

    当不确定具体进度时，可以使用 indeterminate 属性显示加载动画。

    <script setup lang="ts">
import { BrProgress } from '@breezeui/vue'
</script>

<template>
  <div class="space-y-6 w-full">
    <BrProgress indeterminate />
    <BrProgress variant="radial" indeterminate />
  </div>
</template>

    主题定制

    BrProgress 完全集成了 BrConfigProvider，允许你通过全局配置或局部类名定制样式。

    全局定制 (BrConfigProvider)

    你可以通过 BrConfigProvider 的 theme 和 size 属性覆盖默认 CSS 变量，以自定义颜色、动画速度等。

    <script setup lang="ts">
import { ref } from 'vue'
import { BrConfigProvider, BrProgress } from '@breezeui/vue'

const progress = ref(50)
const theme = {
  primary: '#10B981', // Change progress bar color
  transitionDuration: '1000ms', // Change animation speed
}
</script>

<template>
  <div class="space-y-4 w-full">
    <BrConfigProvider :theme="theme" size="lg">
      <BrProgress v-model="progress" />
      <BrProgress v-model="progress" variant="radial" />
    </BrConfigProvider>
  </div>
</template>

    颜色定制 (Colors)

    你可以使用 TailwindCSS 工具类、或组件自带的 color 和 trackColor 属性覆盖样式。

    <script setup lang="ts">
import { ref } from 'vue'
import { BrProgress } from '@breezeui/vue'

const progress = ref(30)
</script>

<template>
  <div class="space-y-4 w-full">
    <!-- Using props -->
    <BrProgress v-model="progress" color="#ef4444" track-color="#fee2e2" />
    
    <!-- Using named color -->
    <BrProgress v-model="progress" color="orange" />
    
    <!-- Using Tailwind classes (text-color for indicator, bg-color for track) -->
    <BrProgress v-model="progress" class="text-blue-500 bg-blue-100" />
  </div>
</template>

    API

    BrProgress / BrProgressLinear / BrProgressRadial

    这三个组件共享相同的属性和事件。BrProgress 是一个包装器，根据 variant 属性渲染对应的子组件。

    Props

    属性名类型默认值说明
    modelValuenumber | null0进度条的当前值 (0 - max)
    maxnumber100进度条的最大值
    variant'linear' | 'radial''linear'进度条的视觉变体
    size'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'default''default'进度条的尺寸
    colorstring-自定义进度指示器的颜色
    trackColorstring-自定义进度条轨道的颜色
    thicknessnumber | string-自定义厚度（线性为高度，环形为描边宽度）
    showLabelboolean | stringfalse是否显示进度标签（支持 'inner' / 'outer'）
    labelFormat(value: number, max: number) => string-自定义标签格式化函数
    disabledbooleanfalse是否禁用
    indeterminatebooleanfalse是否处于不确定状态（加载动画）
    animationDurationstring | number-动画持续时间（覆盖主题配置）

    Emits

    事件名说明参数
    update:modelValue更新绑定值(value: number | null)

    Slots

    插槽名说明
    label自定义进度标签内容，参数为 { value, max, percentage }
    title自定义外部标签左侧的标题内容（仅限线性进度条的 outer 模式）