Breadcrumb 面包屑

显示当前页面在系统层级结构中的位置，并能向上返回。

基础用法

1. Home
2. /
3. Button
4. /
5. Handler
6. /
7. Self

组件调用通过数组数据配置

vue

<script setup lang="ts">
import { ABreadcrumb } from '@lite-code/aui-vue'
</script>

<template>
  <ABreadcrumb
    :items="[
      { label: 'Home', onClick: () => {} },
      { label: 'Button', onClick: () => {} },
      { label: 'Handler', onClick: () => {} },
      { label: 'Self' },
    ]"
  />
</template>

尺寸

1. Home
2. /
3. Button
4. /
5. Handler
6. /
7. Self

1. Home
2. /
3. Button
4. /
5. Handler
6. /
7. Self

1. Home
2. /
3. Button
4. /
5. Handler
6. /
7. Self

通过设置 fontSize 调整尺寸

vue

<script setup lang="ts">
import { ABreadcrumb } from "@lite-code/aui-vue";

const items = [
  { label: "Home", onClick: () => {} },
  { label: "Button", onClick: () => {} },
  { label: "Handler", onClick: () => {} },
  { label: "Self" },
];
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 20px">
    <ABreadcrumb :items="items" :fontSize="12" />
    <ABreadcrumb :items="items" />
    <ABreadcrumb :items="items" :fontSize="16" />
  </div>
</template>

自定义分隔符

1. Home
2. /
3. Self

1. Home
2. >
3. Self

通过 separator 自定义分隔符，支持字符串

vue

<script setup lang="ts">
import { ABreadcrumb } from '@lite-code/aui-vue'

const items = [
  { label: 'Home', onClick: () => {} },
  { label: 'Self' },
]
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 16px">
    <ABreadcrumb :items="items" />
    <ABreadcrumb :items="items" separator=">" />
  </div>
</template>

带有下拉

1. Home
2. /
3. Button
4. /
5. Dropdown
6. /
7. Self

为面包屑项设置 menu 属性，点击时展示下拉菜单

vue

<script setup lang="ts">
import { ABreadcrumb } from '@lite-code/aui-vue'
</script>

<template>
  <ABreadcrumb
    :items="[
      { label: 'Home', onClick: () => {} },
      { label: 'Button', onClick: () => {} },
      {
        label: 'Dropdown',
        menu: [
          { key: 'menu', label: 'Menu' },
          { key: 'pagination', label: 'Pagination' },
          { key: 'table', label: 'Table' },
        ],
      },
      { label: 'Self' },
    ]"
  />
</template>

显示省略

1. Home
2. /
3. …
4. /
5. Level 3
6. /
7. Self

通过 max 指定最多渲染的面包屑数量，超出的部分折叠为省略号

vue

<script setup lang="ts">
import { ABreadcrumb } from '@lite-code/aui-vue'
</script>

<template>
  <ABreadcrumb
    :items="[
      { label: 'Home', onClick: () => {} },
      { label: 'Level 1', onClick: () => {} },
      { label: '我是超宽的面包层🍞', onClick: () => {} },
      { label: 'Level 3', onClick: () => {} },
      { label: 'Self' },
    ]"
    :max="3"
  />
</template>

API

Props

属性	类型	默认值	说明
items	BreadcrumbItem[]	—	面包屑数据（必填）
separator	string	'/'	分隔符
fontSize	number | string	—	字体大小，数字时单位为 px
max	number	—	最多显示的条目数，超出后中间项折叠为省略号
class	string	—	自定义类名
style	object	—	自定义样式

BreadcrumbItem

属性	类型	说明
label	string	显示文字
href	string	链接地址，设置后渲染为 <a> 标签
onClick	(e: MouseEvent) => void	点击回调
menu	DropdownItem[]	下拉菜单项，设置后显示下拉箭头