test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-29 18:48:45 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity
5f077fc31c
amis2/docs/zh-CN/components/breadcrumb.md
LTtwinkle fe1a0f0c6c
feat: 新增Breadcrumb组件 (#3580) 
* feat: 新增Breadcrumb组件

* feat: Breadcrumb CR问题修复

* feat: Breadcrumb href 链接支持变量

Co-authored-by: LTtwinkle <zhouqiqi01@baidu.com>
2022-02-23 15:39:53 +08:00

4.1 KiB
Raw Blame History

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": "当前页面"
    }
  ]
}

动态数据

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

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

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

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

分隔符

{
  "type": "breadcrumb",
  "separator": ">",
  "separatorClassName": "text-black",
  "items": [
    {
      "href": "https://baidu.gitee.com/",
      "icon": "fa fa-home"
    },

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

    {
      "label": "当前页面"
    }
  ]
}

下拉菜单

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

    {
      "label": "上级页面",
      "dropdown": [
        {
          "label": "选项一",
          "href": "https://baidu.gitee.com/",
        },
        {
          "label": "选项二"
        }
      ]
    },
    {
      "label": "当前页面"
    }
  ]
}

最大展示长度

{
  "type": "breadcrumb",
  "separator": ">",
  "separatorClassName": "text-black",
  "labelMaxLength": 16,
  "tooltipPosition": "top",
  "items": [
    {
      "href": "https://baidu.gitee.com/",
      "icon": "fa fa-home"
    },

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

    {
      "label": "当前页面"
    }
  ]
}

属性表

属性名 类型 默认值 说明
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属性