mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-15 09:21:13 +08:00
101 lines
1.9 KiB
Markdown
101 lines
1.9 KiB
Markdown
---
|
|
title: Breadcrumb 面包屑
|
|
description:
|
|
type: 0
|
|
group: ⚙ 组件
|
|
menuName: Breadcrumb
|
|
icon:
|
|
order: 30
|
|
---
|
|
|
|
## 基本用法
|
|
|
|
```schema: scope="body"
|
|
{
|
|
"type": "breadcrumb",
|
|
"items": [
|
|
{
|
|
"label": "首页",
|
|
"href": "https://baidu.gitee.com/",
|
|
"icon": "fa fa-home"
|
|
},
|
|
|
|
{
|
|
"label": "上级页面"
|
|
},
|
|
|
|
{
|
|
"label": "<b>当前页面</b>"
|
|
}
|
|
]
|
|
}
|
|
```
|
|
|
|
## 动态数据
|
|
|
|
可以配置 source 来获取上下文中的动态数据，结合 [service](service) 来实现动态生成。
|
|
|
|
```schema
|
|
{
|
|
"type": "page",
|
|
"data": {
|
|
"breadcrumb": [
|
|
{
|
|
"label": "首页",
|
|
"href": "https://baidu.gitee.com/"
|
|
},
|
|
|
|
{
|
|
"label": "上级页面"
|
|
},
|
|
|
|
{
|
|
"label": "<b>当前页面</b>"
|
|
}
|
|
]
|
|
},
|
|
"body": {
|
|
"type": "breadcrumb",
|
|
"source": "${breadcrumb}"
|
|
}
|
|
}
|
|
```
|
|
|
|
## 分隔符
|
|
|
|
```schema: scope="body"
|
|
{
|
|
"type": "breadcrumb",
|
|
"separator": ">",
|
|
"separatorClassName": "text-black",
|
|
"items": [
|
|
{
|
|
"label": "首页",
|
|
"href": "https://baidu.gitee.com/",
|
|
"icon": "fa fa-home"
|
|
},
|
|
|
|
{
|
|
"label": "上级页面"
|
|
},
|
|
|
|
{
|
|
"label": "<b>当前页面</b>"
|
|
}
|
|
]
|
|
}
|
|
```
|
|
|
|
## 属性表
|
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
| ------------------ | -------- | ------ | ---------------- |
|
|
| className | `string` | | 外层类名 |
|
|
| itemClassName | `string` | | 每个面包屑的类名 |
|
|
| separatorClassName | `string` | | 分割符的类名 |
|
|
| separator | `string` | | 分隔符 |
|
|
| source | `string` | | 动态数据 |
|
|
| items[].label | `string` | | 显示文本 |
|
|
| items[].href | `string` | | 链接地址 |
|
|
| items[].icon | `string` | | [图标](icon) |
|