组件
Badge
Secondary
Destructive
Outline
Verified
8
99
20+
<script setup lang="ts">
import { BadgeCheckIcon } from 'lucide-vue-next'
import { Badge } from '@/components/ui/badge'
</script>
<template>
<div class="flex flex-col items-center gap-2">
<div class="flex w-full flex-wrap gap-2">
<Badge>Badge</Badge>
<Badge variant="secondary">
Secondary
</Badge>
<Badge variant="destructive">
Destructive
</Badge>
<Badge variant="outline">
Outline
</Badge>
</div>
<div class="flex w-full flex-wrap gap-2">
<Badge
variant="secondary"
class="bg-blue-500 text-white dark:bg-blue-600"
>
<BadgeCheckIcon />
Verified
</Badge>
<Badge class="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums">
8
</Badge>
<Badge
class="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums"
variant="destructive"
>
99
</Badge>
<Badge
class="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums"
variant="outline"
>
20+
</Badge>
</div>
</div>
</template>安装
🌐 Installation
pnpm dlx shadcn-vue@latest add badge
用法
🌐 Usage
<script setup lang="ts">
import { Badge } from '@/components/ui/badge'
</script>
<template>
<Badge variant="default | outline | secondary | destructive">
Badge
</Badge>
</template>链接
🌐 Link
你可以使用 as-child 属性让另一个组件看起来像一个徽章。以下是一个看起来像徽章的链接示例。
🌐 You can use the as-child prop to make another component look like a badge. Here's an example of a link that looks like a badge.
<script setup lang="ts">
import { Badge } from '@/components/ui/badge'
</script>
<template>
<Badge as-child>
<a href="#">Badge</a>
</Badge>
</template>