介绍

本文档主要用于描述 ShadcnProgress 组件的一些特性和用法。

用法

查看代码

<template>
    <ShadcnProgress v-model="value">Progress</ShadcnProgress>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(10)
</script>

状态 (status)

查看代码

<template>
    <ShadcnProgress v-model="value" status="success">Success</ShadcnProgress>
    <ShadcnProgress v-model="value" status="error">Error</ShadcnProgress>
    <ShadcnProgress v-model="value" status="warning">Warning</ShadcnProgress>
    <ShadcnProgress v-model="value" status="info">Info</ShadcnProgress>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(10)
</script>

尺寸 (size)

查看代码

<template>
    <ShadcnProgress v-model="value" size="default">Default</ShadcnProgress>
    <ShadcnProgress v-model="value" size="large">Large</ShadcnProgress>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(10)
</script>

显示标签 (show-label)

查看代码

<template>
    <ShadcnProgress v-model="value" size="large" show-label>Progress</ShadcnProgress>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(10)
</script>

进度条 (Progress) 属性