Breadcrumb 面包屑

基本用法

```schema: scope=”body” { “type”: “breadcrumb”, “items”: [ { “label”: “首页”, “href”: “https://baidu.gitee.com/“, “icon”: “fa fa-home” },

  1. {
  2.   "label": "上级页面"
  3. },
  5. {
  6.   "label": "当前页面"
  7. }

] }

  2. ## 动态数据
  4. 可以配置 source 来获取上下文中的动态数据，结合 [service](service) 来实现动态生成。
  6. ```schema
  7. {
  8.   "type": "page",
  9.   "data": {
  10.     "breadcrumb": [
  11.       {
  12.         "label": "首页",
  13.         "href": "https://baidu.gitee.com/"
  14.       },
  16.       {
  17.         "label": "上级页面"
  18.       },
  20.       {
  21.         "label": "当前页面"
  22.       }
  23.     ]
  24.   },
  25.   "body": {
  26.     "type": "breadcrumb",
  27.     "source": "${breadcrumb}"
  28.   }
  29. }

分隔符

```schema: scope=”body” { “type”: “breadcrumb”, “separator”: “>”, “separatorClassName”: “text-black”, “items”: [ { “href”: “https://baidu.gitee.com/“, “icon”: “fa fa-home” },

  1. {
  2.   "label": "上级页面"
  3. },
  5. {
  6.   "label": "当前页面"
  7. }

] }

  2. ## 下拉菜单
  4. ```schema: scope="body"
  5. {
  6.   "type": "breadcrumb",
  7.   "separator": ">",
  8.   "separatorClassName": "text-black",
  9.   "items": [
  10.     {
  11.       "label": "首页",
  12.       "href": "https://baidu.gitee.com/",
  13.       "icon": "fa fa-home"
  14.     },
  16.     {
  17.       "label": "上级页面",
  18.       "dropdown": [
  19.         {
  20.           "label": "选项一",
  21.           "href": "https://baidu.gitee.com/",
  22.         },
  23.         {
  24.           "label": "选项二"
  25.         }
  26.       ]
  27.     },
  28.     {
  29.       "label": "当前页面"
  30.     }
  31.   ]
  32. }

最大展示长度

```schema: scope=”body” { “type”: “breadcrumb”, “separator”: “>”, “separatorClassName”: “text-black”, “labelMaxLength”: 16, “tooltipPosition”: “top”, “items”: [ { “href”: “https://baidu.gitee.com/“, “icon”: “fa fa-home” },

  1. {
  2.   "label": "上级页面上级页面上级页面上级页面上级页面"
  3. },
  5. {
  6.   "label": "当前页面"
  7. }

] } ```

属性表

属性名 类型 默认值 说明
className string 外层类名
itemClassName string 导航项类名
separatorClassName string 分割符类名
dropdownClassName string 下拉菜单类名
dropdownItemClassName string 下拉菜单项类名
separator string 分隔符
labelMaxLength number 16 最大展示长度
tooltipPosition `top \ bottom \ left \ right` top 浮窗提示位置
source string 动态数据
items[].label string 文本
items[].href string 链接
items[].icon string 图标
items[].dropdown dropdown[] 下拉菜单，dropdown[]的每个对象都包含label、href、icon属性