介绍

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

用法

查看代码

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

<script setup lang="ts">
import { useData } from 'vitepress'
import { computed } from 'vue'

const { isDark } = useData()
const darkMode = computed(() => isDark.value)

import { ref } from 'vue'

const value = ref(10)
</script>

状态 (status)

查看代码

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

<script setup lang="ts">
import { useData } from 'vitepress'
import { computed } from 'vue'

const { isDark } = useData()
const darkMode = computed(() => isDark.value)

import { ref } from 'vue'

const value = ref(10)
</script>

尺寸 (size)

查看代码

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

<script setup lang="ts">
import { useData } from 'vitepress'
import { computed } from 'vue'

const { isDark } = useData()
const darkMode = computed(() => isDark.value)

import { ref } from 'vue'

const value = ref(10)
</script>

显示标签 (show-label)

查看代码

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

<script setup lang="ts">
import { useData } from 'vitepress'
import { computed } from 'vue'

const { isDark } = useData()
const darkMode = computed(() => isDark.value)

import { ref } from 'vue'

const value = ref(10)
</script>

液态玻璃效果 (glass)

查看代码

<template>
    <div class="p-6 rounded-lg bg-gradient-to-r from-purple-400 to-pink-400">
        <div class="p-8 rounded-lg bg-white/50 space-y-4">
            <ShadcnProgress v-model="value" glass>Basic Glass</ShadcnProgress>
            <ShadcnProgress :model-value="75" glass status="success" show-label>Success</ShadcnProgress>
            <ShadcnProgress :model-value="45" glass status="warning" show-label>Warning</ShadcnProgress>
            <ShadcnProgress :model-value="30" glass status="error" show-label>Error</ShadcnProgress>
            <ShadcnProgress v-model="value" glass size="large" show-label>Large</ShadcnProgress>
        </div>
    </div>
</template>

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

const value = ref(60)
</script>

进度条 (Progress) 属性