9.7k
新建

徽章 (Badge)

上一页下一页

用于显示徽章或看起来像徽章的组件。

徽章 (Badge)
次要 (Secondary)
破坏性 (Destructive)
大纲
已验证 (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>

安装

pnpm dlx shadcn-vue@latest add badge

使用方法

<script setup lang="ts">
import { Badge } from '@/components/ui/badge'
</script>

<template>
  <Badge variant="default | outline | secondary | destructive">
    Badge
  </Badge>
</template>

链接 (Link)

你可以使用 as-child 属性来让其他组件呈现徽章样式。以下是一个看起来像徽章的链接示例。

<script setup lang="ts">
import { Badge } from '@/components/ui/badge'
</script>

<template>
  <Badge as-child>
    <a href="#">Badge</a>
  </Badge>
</template>
头像面包屑