Progress

基于 reka-ui 的 Progress 原语构建的新粗野主义风格进度条。

预览

安装

pnpm dlx brutx@latest add progress

用法

<script setup>
import { ref } from 'vue'
import Progress from '@/components/ui/Progress.vue'

const progress = ref(45)
</script>

<template>
    <Progress v-model="progress" />
</template>

带最大值

<script setup>
import { ref } from 'vue'
import Progress from '@/components/ui/Progress.vue'

const progress = ref(75)
</script>

<template>
    <Progress v-model="progress" :max="100" />
</template>

属性

属性	类型	默认值
modelValue	number	0
max	number	100
class	string	—

样式

• 轨道使用 border-3 border-brutal 搭配 shadow-brutal-sm
• 指示器使用 bg-brutal-primary 搭配平滑的 transform 过渡
• 填充通过 translateX 实现平滑动画