Admin 元件
Breadcrumb
目前頁面在網站階層中的位置。
安裝
Terminal
pnpm dlx shadcn-vue add @admin/breadcrumbimport { AdminBreadcrumb, AdminBreadcrumbItem, AdminBreadcrumbLink, AdminBreadcrumbList, AdminBreadcrumbPage, AdminBreadcrumbSeparator,} from '@/components/admin/breadcrumb'用法
<script setup lang="ts">import { AdminBreadcrumb, AdminBreadcrumbItem, AdminBreadcrumbLink, AdminBreadcrumbList, AdminBreadcrumbPage, AdminBreadcrumbSeparator} from '@/components/admin/breadcrumb'</script><template> <admin-breadcrumb> <admin-breadcrumb-list> <admin-breadcrumb-item> <admin-breadcrumb-link href="/">Home</admin-breadcrumb-link> </admin-breadcrumb-item> <admin-breadcrumb-separator /> <admin-breadcrumb-item> <admin-breadcrumb-page>Component</admin-breadcrumb-page> </admin-breadcrumb-item> </admin-breadcrumb-list> </admin-breadcrumb></template>場景
多層階層
以 admin-breadcrumb-link 連接每一層，最後一層用 admin-breadcrumb-page 標記當前頁。
<script setup lang="ts">import { AdminBreadcrumb, AdminBreadcrumbItem, AdminBreadcrumbLink, AdminBreadcrumbList, AdminBreadcrumbPage, AdminBreadcrumbSeparator} from '@/components/admin/breadcrumb'</script><template> <admin-breadcrumb> <admin-breadcrumb-list> <admin-breadcrumb-item> <admin-breadcrumb-link href="/">Home</admin-breadcrumb-link> </admin-breadcrumb-item> <admin-breadcrumb-separator /> <admin-breadcrumb-item> <admin-breadcrumb-link href="/docs/components">Docs</admin-breadcrumb-link> </admin-breadcrumb-item> <admin-breadcrumb-separator /> <admin-breadcrumb-item> <admin-breadcrumb-link href="#">Components</admin-breadcrumb-link> </admin-breadcrumb-item> <admin-breadcrumb-separator /> <admin-breadcrumb-item> <admin-breadcrumb-page>Breadcrumb</admin-breadcrumb-page> </admin-breadcrumb-item> </admin-breadcrumb-list> </admin-breadcrumb></template>Theme 變體
theme prop 切換 primary / secondary，當前頁文字會套用對應色系。
<script setup lang="ts">import { AdminBreadcrumb, AdminBreadcrumbItem, AdminBreadcrumbLink, AdminBreadcrumbList, AdminBreadcrumbPage, AdminBreadcrumbSeparator} from '@/components/admin/breadcrumb'</script><template> <div class="flex flex-col gap-3"> <admin-breadcrumb theme="primary"> <admin-breadcrumb-list> <admin-breadcrumb-item> <admin-breadcrumb-link href="/">Home</admin-breadcrumb-link> </admin-breadcrumb-item> <admin-breadcrumb-separator /> <admin-breadcrumb-item> <admin-breadcrumb-page>Primary 主題</admin-breadcrumb-page> </admin-breadcrumb-item> </admin-breadcrumb-list> </admin-breadcrumb> <admin-breadcrumb theme="secondary"> <admin-breadcrumb-list> <admin-breadcrumb-item> <admin-breadcrumb-link href="/">Home</admin-breadcrumb-link> </admin-breadcrumb-item> <admin-breadcrumb-separator /> <admin-breadcrumb-item> <admin-breadcrumb-page>Secondary 主題</admin-breadcrumb-page> </admin-breadcrumb-item> </admin-breadcrumb-list> </admin-breadcrumb> </div></template>API 參考
組成
<template> <admin-breadcrumb theme="primary"> <admin-breadcrumb-list> <admin-breadcrumb-item> <admin-breadcrumb-link href="/">Home</admin-breadcrumb-link> </admin-breadcrumb-item> <admin-breadcrumb-separator /> <admin-breadcrumb-item> <admin-breadcrumb-page>Current</admin-breadcrumb-page> </admin-breadcrumb-item> </admin-breadcrumb-list> </admin-breadcrumb></template>admin-breadcrumb
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
class | ClassValue | — | 根元素之自訂 class |
theme | "primary" | "secondary" | undefined | — | 主題色（透過 context 傳遞給所有子元件） |
Slots
| 名稱 | Bindings | 說明 |
|---|---|---|
default | {} | — |
admin-breadcrumb-list
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
class | ClassValue | — | 根元素之自訂 class |
Slots
| 名稱 | Bindings | 說明 |
|---|---|---|
default | {} | — |
admin-breadcrumb-item
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
class | ClassValue | — | 根元素之自訂 class |
Slots
| 名稱 | Bindings | 說明 |
|---|---|---|
default | {} | — |
admin-breadcrumb-link
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 | "a" | The element or component this component should render as. Can be overwritten by `asChild`. |
class | ClassValue | — | 根元素之自訂 class |
Slots
| 名稱 | Bindings | 說明 |
|---|---|---|
default | {} | — |
admin-breadcrumb-page
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
class | ClassValue | — | 根元素之自訂 class |
Slots
| 名稱 | Bindings | 說明 |
|---|---|---|
default | {} | — |
admin-breadcrumb-separator
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
class | ClassValue | — | 根元素之自訂 class |
Slots
| 名稱 | Bindings | 說明 |
|---|---|---|
default | {} | — |