Admin 元件
Notification
浮動通知（vue-sonner）。狀態變體與動作按鈕。
安裝
Terminal
pnpm dlx shadcn-vue add @admin/notificationimport { AdminNotification, errorNotification, infoNotification, successNotification, warningNotification,} from '@/components/admin/notification'用法
<script setup lang="ts">import { toast } from 'vue-sonner'import { AdminButton } from '@/components/admin/button'</script><template> <admin-button @click="toast('Saved successfully')">Show notification</admin-button></template>場景
狀態變體
<script setup lang="ts">import { AdminButton } from '@/components/admin/button'import { errorNotification, infoNotification, successNotification, warningNotification} from '@/components/admin/notification'</script><template> <div class="flex items-center gap-3"> <admin-button @click="successNotification('儲存成功', '變更已套用至系統。')" >Success</admin-button > <admin-button variant="outline" @click="infoNotification('已複製到剪貼簿', '可直接貼上使用。')" >Info</admin-button > <admin-button variant="outline" @click="warningNotification('空間即將用盡', '請盡快清理檔案。')" >Warning</admin-button > <admin-button variant="outline" @click="errorNotification('儲存失敗', '請檢查網路後重試。')" >Error</admin-button > </div></template>含操作按鈕
以 action 設定按鈕標籤與 callback，適合「復原」這類可逆操作。
<script setup lang="ts">import { toast } from 'vue-sonner'import { AdminButton } from '@/components/admin/button'import { successNotification } from '@/components/admin/notification'function showUndo() { toast.success('已刪除一筆項目', { classes: { toast: 'flex items-center rounded-[4px] border-success-20 bg-success-10 p-4 md:w-full md:max-w-60.75', icon: 'shrink-0', content: 'ml-2 flex flex-1 flex-col gap-y-1', title: 'typo-title-small text-text-90', description: 'typo-caption-medium text-text-70', closeButton: 'order-last ml-4 shrink-0 cursor-pointer' }, description: '30 秒內可以復原。', closeButton: true, unstyled: true, action: { label: '復原', onClick: () => successNotification('已復原', '項目已成功還原。') } })}</script><template> <admin-button @click="showUndo">刪除並顯示復原通知</admin-button></template>API 參考
組成
<template> <admin-notification /></template>admin-notification 須在 app root（通常是 app.vue）掛載一次；後續以函式呼叫的方式觸發通知。
admin-notification
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
id | string | undefined | — | — |
invert | boolean | undefined | — | — |
theme | Theme | undefined | — | — |
position | Position | undefined | — | — |
closeButtonPosition | CloseButtonPosition | undefined | — | — |
hotkey | string[] | undefined | — | — |
richColors | boolean | undefined | — | — |
expand | boolean | undefined | — | — |
duration | number | undefined | — | — |
gap | number | undefined | — | — |
visibleToasts | number | undefined | — | — |
closeButton | boolean | undefined | — | — |
toastOptions | ToastOptions | undefined | — | — |
class | string | undefined | — | — |
offset | Offset | undefined | — | — |
mobileOffset | Offset | undefined | — | — |
dir | "ltr" | "rtl" | "auto" | undefined | — | — |
swipeDirections | SwipeDirection[] | undefined | — | — |
icons | ToastIcons | undefined | — | — |
containerAriaLabel | string | undefined | — | — |
更新紀錄
- feat: 新增 warning 通知並收斂 variant 樣式7fccfa4