安裝
Terminal
pnpm dlx shadcn-vue add @admin/avatarimport { AdminAvatar, AdminAvatarFallback, AdminAvatarImage,} from '@/components/admin/avatar'用法
<script setup lang="ts">import { AdminAvatar, AdminAvatarFallback, AdminAvatarImage } from '@/components/admin/avatar'</script><template> <admin-avatar> <admin-avatar-image alt="@user" src="https://i.pravatar.cc/64" /> <admin-avatar-fallback>TP</admin-avatar-fallback> </admin-avatar></template>場景
Fallback 圖示 / 縮寫
載入失敗時回退到 admin-avatar-fallback。
<script setup lang="ts">import { IconUser } from '@tabler/icons-vue'import { AdminAvatar, AdminAvatarFallback, AdminAvatarImage } from '@/components/admin/avatar'</script><template> <div class="flex items-center gap-4"> <admin-avatar> <admin-avatar-image alt="broken" src="https://broken.example/does-not-exist.png" /> <admin-avatar-fallback>AB</admin-avatar-fallback> </admin-avatar> <admin-avatar> <admin-avatar-fallback>CD</admin-avatar-fallback> </admin-avatar> <admin-avatar> <admin-avatar-fallback> <icon-user class="size-6" /> </admin-avatar-fallback> </admin-avatar> </div></template>API 參考
組成
<template> <admin-avatar> <admin-avatar-image src="..." /> <admin-avatar-fallback>FB</admin-avatar-fallback> </admin-avatar></template>admin-avatar
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
class | ClassValue | — | 根元素之自訂 class |
Slots
| 名稱 | Bindings | 說明 |
|---|---|---|
default | {} | — |
admin-avatar-image
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
src* | string | — | — |
referrerPolicy | HTMLAttributeReferrerPolicy | undefined | — | — |
crossOrigin | "" | "anonymous" | "use-credentials" | undefined | — | — |
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`. |
class | ClassValue | — | 根元素之自訂 class |
* 代表必填
Slots
| 名稱 | Bindings | 說明 |
|---|---|---|
default | {} | — |
admin-avatar-fallback
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
delayMs | number | undefined | — | Useful for delaying rendering so it only appears for those with slower connections. |
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`. |
class | ClassValue | — | 根元素之自訂 class |
Slots
| 名稱 | Bindings | 說明 |
|---|---|---|
default | {} | — |
更新紀錄
- fix: admin-avatar-image 補上 class prop 對齊 sibling 元件80f49e9