amis2/docs/zh-CN/components/breadcrumb.md

title	description	type	group	menuName	icon	order
Breadcrumb 面包屑		0	⚙ 组件	Breadcrumb		30

基本用法

{
  "type": "breadcrumb",
  "items": [
    {
      "label": "首页",
      "href": "https://baidu.gitee.com/",
      "icon": "fa fa-home"
    },

    {
      "label": "上级页面"
    },

    {
      "label": "<b>当前页面</b>"
    }
  ]
}

动态数据

可以配置 source 来获取上下文中的动态数据，结合 service 来实现动态生成。

{
  "type": "page",
  "data": {
    "breadcrumb": [
      {
        "label": "首页",
        "href": "https://baidu.gitee.com/"
      },

      {
        "label": "上级页面"
      },

      {
        "label": "<b>当前页面</b>"
      }
    ]
  },
  "body": {
    "type": "breadcrumb",
    "source": "${breadcrumb}"
  }
}

分隔符

{
  "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		图标