Admin 元件
Badge
狀態或數量的小型標籤。尺寸 small／medium／large。
安裝
Terminal
pnpm dlx shadcn-vue add @admin/badgeimport { AdminBadge } from '@/components/admin/badge'用法
<script setup lang="ts">import { AdminBadge } from '@/components/admin/badge'</script><template> <div class="flex items-center gap-2"> <admin-badge>99</admin-badge> </div></template>場景
尺寸
尺寸：small（圓點）、medium（預設）、large（可塞多字）。
<script setup lang="ts">import { AdminBadge } from '@/components/admin/badge'</script><template> <div class="flex items-center gap-4"> <admin-badge size="small" /> <admin-badge size="medium">3</admin-badge> <admin-badge size="large">99+</admin-badge> </div></template>附掛在圖示上
以絕對定位疊在 icon 右上角，做未讀數 / 新訊息提示。
<script setup lang="ts">import { AdminBadge } from '@/components/admin/badge'</script><template> <div class="flex items-center gap-6"> <div class="relative"> <icon class="text-[2rem]" name="lucide:bell" /> <admin-badge class="absolute -top-1 -right-1" size="medium">5</admin-badge> </div> <div class="relative"> <icon class="text-[2rem]" name="lucide:mail" /> <admin-badge class="absolute -top-1 -right-1" size="small" /> </div> </div></template>API 參考
組成
<template> <admin-badge>內容</admin-badge></template>admin-badge
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
asChild | boolean | undefined | — | Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details. |
as | globalThis.Component | AsTag | undefined | "div" | The element or component this component should render as. Can be overwritten by `asChild`. |
variant | "default" | undefined | — | 視覺樣式變體 |
size | "small" | "medium" | "large" | undefined | — | Badge 尺寸 |
class | ClassValue | — | 根元素之自訂 class |
Slots
| 名稱 | Bindings | 說明 |
|---|---|---|
default | {} | — |
更新紀錄
- fix: 修正 admin-badge 屬性洩漏並清理重複 classbb8999e