Appearance
Breadcrumb 面包屑
用于显示当前页面在网站层级结构中的位置,并通过导航链接帮助用户快速返回之前的页面。
基础用法
面包屑的基本用法,展示页面层级关系。
基础用法
自定义分隔符
禁用状态
vue
<template>
<div class="breadcrumb-demo">
<h3>基础用法</h3>
<div class="breadcrumb-group">
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink as-child>
<a href="/">Home</a>
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator> / </BreadcrumbSeparator>
<BreadcrumbItem>
<BreadcrumbLink as-child>
<a href="/components">Components</a>
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator> / </BreadcrumbSeparator>
<BreadcrumbItem>
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
</div>
<h3>自定义分隔符</h3>
<div class="breadcrumb-group">
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink as-child>
<a href="/">首页</a>
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator>
<Icon name="chevron-right" :size="16" />
</BreadcrumbSeparator>
<BreadcrumbItem>
<BreadcrumbLink as-child>
<a href="/products">产品中心</a>
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator>
<Icon name="chevron-right" :size="16" />
</BreadcrumbSeparator>
<BreadcrumbItem>
<BreadcrumbLink as-child>
<a href="/products/electronics">电子产品</a>
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator>
<Icon name="chevron-right" :size="16" />
</BreadcrumbSeparator>
<BreadcrumbItem>
<BreadcrumbPage>手机</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
</div>
<h3>禁用状态</h3>
<div class="breadcrumb-group">
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink as-child>
<a href="/">Home</a>
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator> / </BreadcrumbSeparator>
<BreadcrumbItem>
<BreadcrumbLink disabled> Disabled Link </BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator> / </BreadcrumbSeparator>
<BreadcrumbItem>
<BreadcrumbPage>Current Page</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
</div>
</div>
</template>
<script setup>
import {
Breadcrumb,
BreadcrumbList,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbSeparator,
BreadcrumbPage,
} from '@/components/Breadcrumb';
import { Icon } from '@/components/Icon';
</script>
<style scoped>
.breadcrumb-demo {
/* padding: 20px; */
}
h3 {
font-size: 16px;
font-weight: 500;
}
.breadcrumb-group {
/* padding: 15px; */
/* background-color: #f5f5f5; */
border-radius: 8px;
}
</style>与Dropdown结合使用
面包屑可以与Dropdown组件结合使用,实现复杂的导航结构。
与Dropdown结合使用
多级导航示例
vue
<template>
<div class="breadcrumb-demo">
<h3>与Dropdown结合使用</h3>
<div class="breadcrumb-dropdown-group">
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink as-child>
<a href="/">Home</a>
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator> / </BreadcrumbSeparator>
<BreadcrumbItem>
<Dropdown>
<DropdownMenu>
<DropdownMenuTrigger>
Components
<Icon name="chevron-down" :size="16" />
</DropdownMenuTrigger>
<DropdownMenuContent align="start">
<DropdownMenuItem>Documentation</DropdownMenuItem>
<DropdownMenuItem>Themes</DropdownMenuItem>
<DropdownMenuItem>GitHub</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</Dropdown>
</BreadcrumbItem>
<BreadcrumbSeparator> / </BreadcrumbSeparator>
<BreadcrumbItem>
<Dropdown>
<DropdownMenu>
<DropdownMenuTrigger>
Navigation
<Icon name="chevron-down" :size="16" />
</DropdownMenuTrigger>
<DropdownMenuContent align="start">
<DropdownMenuItem>Menu</DropdownMenuItem>
<DropdownMenuItem>Sidebar</DropdownMenuItem>
<DropdownMenuItem>Breadcrumb</DropdownMenuItem>
<DropdownMenuItem>Dropdown</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</Dropdown>
</BreadcrumbItem>
<BreadcrumbSeparator> / </BreadcrumbSeparator>
<BreadcrumbItem>
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
</div>
<h3>多级导航示例</h3>
<div class="breadcrumb-multi-level">
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink as-child>
<a href="/">首页</a>
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator> / </BreadcrumbSeparator>
<BreadcrumbItem>
<BreadcrumbLink as-child>
<a href="/admin">管理后台</a>
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator> / </BreadcrumbSeparator>
<BreadcrumbItem>
<Dropdown>
<DropdownMenu>
<DropdownMenuTrigger>
用户管理
<Icon name="chevron-down" :size="16" />
</DropdownMenuTrigger>
<DropdownMenuContent align="start">
<DropdownMenuItem>用户列表</DropdownMenuItem>
<DropdownMenuItem>角色管理</DropdownMenuItem>
<DropdownMenuItem>权限设置</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</Dropdown>
</BreadcrumbItem>
<BreadcrumbSeparator> / </BreadcrumbSeparator>
<BreadcrumbItem>
<BreadcrumbLink as-child>
<a href="/admin/users/profile">个人资料</a>
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator> / </BreadcrumbSeparator>
<BreadcrumbItem>
<BreadcrumbPage>编辑资料</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
</div>
</div>
</template>
<script setup>
import {
Breadcrumb,
BreadcrumbList,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbSeparator,
BreadcrumbPage,
} from '@/components/Breadcrumb';
import {
Dropdown,
DropdownMenu,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuItem,
} from '@/components/Dropdown';
import { Icon } from '@/components/Icon';
</script>
<style scoped>
.breadcrumb-demo {
/* padding: 20px; */
}
h3 {
margin-top: 20px;
margin-bottom: 10px;
font-size: 16px;
font-weight: 500;
}
.breadcrumb-dropdown-group,
.breadcrumb-multi-level {
/* margin-bottom: 20px; */
/* padding: 15px; */
/* border-radius: 8px; */
}
</style>属性
Breadcrumb
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| class | 自定义类名 | string | - | - |
BreadcrumbList
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| class | 自定义类名 | string | - | - |
BreadcrumbItem
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| class | 自定义类名 | string | - | - |
BreadcrumbLink
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| as-child | 是否使用子元素作为链接 | boolean | true/false | false |
| disabled | 是否禁用 | boolean | true/false | false |
| class | 自定义类名 | string | - | - |
BreadcrumbSeparator
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| class | 自定义类名 | string | - | - |
BreadcrumbPage
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| class | 自定义类名 | string | - | - |
插槽
BreadcrumbSeparator
| 插槽名称 | 说明 |
|---|---|
| default | 自定义分隔符内容 |
BreadcrumbPage
| 插槽名称 | 说明 |
|---|---|
| default | 当前页面名称 |