介绍

本文档主要用于描述 ShadcnBadge 组件的一些功能和用法。

用法

查看代码

<template>
    <ShadcnBadge text="Badge">Badge</ShadcnBadge>
</template>

<script setup lang="ts">
</script>

类型 (type)

查看代码

<template>
    <ShadcnBadge type="primary" text="Badge">Primary</ShadcnBadge>
    <ShadcnBadge type="success" text="Badge">Success</ShadcnBadge>
    <ShadcnBadge type="warning" text="Badge">Warning</ShadcnBadge>
    <ShadcnBadge type="danger" text="Badge">Danger</ShadcnBadge>
</template>

<script setup lang="ts">
</script>

文本 (text)

查看代码

<template>
    <ShadcnBadge text="Text">Badge</ShadcnBadge>
</template>

<script setup lang="ts">
</script>

点 (dot)

查看代码

<template>
    <ShadcnBadge dot>Badge</ShadcnBadge>
</template>

<script setup lang="ts">
</script>

最大值 (max)

查看代码

<template>
    <ShadcnBadge text="10" max="5">Badge</ShadcnBadge>
</template>

<script setup lang="ts">
</script>

液态玻璃效果 (glass)

液态玻璃效果通过半透明背景和背景模糊创建现代化的视觉效果，在彩色背景上表现最佳。

查看代码

<template>
    <div class="space-y-6">
        <div class="relative">
            <div class="h-40 rounded-lg flex items-center justify-center gap-8 bg-gradient-to-r from-blue-400 to-indigo-400">
                <ShadcnBadge glass type="primary" text="5">
                    <div class="px-6 py-3 rounded-lg bg-white/50 text-gray-900">
                        Primary
                    </div>
                </ShadcnBadge>
                <ShadcnBadge glass type="success" text="10">
                    <div class="px-6 py-3 rounded-lg bg-white/50 text-gray-900">
                        Success
                    </div>
                </ShadcnBadge>
                <ShadcnBadge glass type="warning" text="99+">
                    <div class="px-6 py-3 rounded-lg bg-white/50 text-gray-900">
                        Warning
                    </div>
                </ShadcnBadge>
                <ShadcnBadge glass type="danger" text="New">
                    <div class="px-6 py-3 rounded-lg bg-white/50 text-gray-900">
                        Danger
                    </div>
                </ShadcnBadge>
            </div>
        </div>
        <div class="relative">
            <div class="h-40 rounded-lg flex items-center justify-center gap-8 bg-gradient-to-r from-pink-400 to-rose-400">
                <ShadcnBadge glass dot>
                    <div class="px-6 py-3 rounded-lg bg-white/50 text-gray-900">
                        Dot Badge
                    </div>
                </ShadcnBadge>
                <ShadcnBadge glass text="10" max="5">
                    <div class="px-6 py-3 rounded-lg bg-white/50 text-gray-900">
                        Max 5
                    </div>
                </ShadcnBadge>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
</script>

徽章 (Badge) 属性

徽章 (Badge) 插槽