Admin 元件

Tag

分類、狀態或關鍵字的靜態標籤。

安裝

Terminal

pnpm dlx shadcn-vue add @admin/tag

import { AdminTag } from '@/components/admin/tag'

用法

<script setup lang="ts">import { AdminTag } from '@/components/admin/tag'</script><template>  <div class="flex items-center gap-2">    <admin-tag>Vue</admin-tag>    <admin-tag>Nuxt</admin-tag>  </div></template>

場景

圓角變體

<script setup lang="ts">import { AdminTag } from '@/components/admin/tag'</script><template>  <div class="flex items-center gap-2">    <admin-tag rounded="square-filled">Square</admin-tag>    <admin-tag rounded="round-filled">Rounded</admin-tag>  </div></template>

搭配 icon

<script setup lang="ts">import { AdminTag } from '@/components/admin/tag'</script><template>  <div class="flex items-center gap-2">    <admin-tag rounded="round-filled">      <icon name="lucide:check" />      完成    </admin-tag>    <admin-tag rounded="round-filled">      <icon name="lucide:clock" />      進行中    </admin-tag>    <admin-tag rounded="square-filled">      <icon name="lucide:tag" />      標籤    </admin-tag>  </div></template>

API 參考

組成

<template>  <admin-tag>標籤文字</admin-tag></template>

admin-tag

Props

名稱	型別	預設值	說明
`class`	`ClassValue`	—	根元素之自訂 class
`rounded`	`"round-filled" \| "square-filled" \| undefined`	—	圓角樣式變體
`closable`	`boolean \| undefined`	—	設為 `true` 時顯示右側關閉按鈕

Events

名稱	Payload	說明
`close`	—	點擊右側關閉按鈕時觸發

Slots

名稱	Bindings	說明
`default`	`{}`	—

更新紀錄

2026-07-08fix: admin-tag 關閉按鈕補上 type="button" 避免誤觸表單送出f8dac9f

Tabs

分頁切換。

Textarea

多行文字輸入。可搭配字數限制。