2021-07 新茗 / 沈建斌

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

何时使用

  • 当需要向上导航的功能时，比如：下钻功能。
展示形态 预览 进度
基础形态 image.png 进行中
自定义分隔符 image.png
其他 未开始

类型定义

  1. type BreadCrumbItem = {
  2.   id: string;
  3.   name: string;
  4. };
  6. type BreadCrumbAttrs = {
  7.   /** 起点 x坐标位置 */
  8.   readonly x: number;
  9.   /** 起点 y 坐标位置 */
  10.   readonly y: number;
  11.   /** 容器宽度 */
  12.   readonly width: number;
  13.   /** 容器高度 */
  14.   readonly height: number;
  15.   /** 容器内边距。容器实际可用大小 = 容器宽高度 - 内边距 */
  16.   readonly padding?: number | number[];
  17.   /** 面包屑 items */
  18.   readonly items: BreadCrumbItem[];
  19.   /** 面包屑分隔符 */
  20.   readonly separator?: {
  21.     /** 分隔符内容, 默认: '/'. 支持传入一个 group, 外部自行控制大小 */
  22.     text: string | Group;
  23.     /** 分隔符左右间距, 默认为：4 */
  24.     spacing?: number;
  25.     /** 分隔符样式（不需要激活样式） */
  26.     style?: ShapeAttrs;
  27.   }
  29.   /** 样式 */
  30.   /** 字体样式 */
  31.   readonly textStyle: {
  32.     /** 默认字体样式 */
  33.     default?: ShapeAttrs;
  34.     /** 激活字体样式 */
  35.     active?: ShapeAttrs;
  36.   }
  38.   /** 如果作为通用组件，给其它用户使用 */
  39.   readonly onclick?: (evt: any/** 这个我来定义把 */) =>  void;
  42.   // 草稿，just for G2
  43.   /**
  44.    * 事件（需要在文档中说明，事件的使用）
  45.    *
  46.    * 不需要面包屑事件，但是需要规定下面包屑 shape 以及面包屑 item 的名称（ shape name），以便于让 G2 层可以通过这样的方式监听面包屑事件
  47.    *
  48.    * xxx.on('breadcrumb-item:click', (evt) => {
  49.    *     // 这里介绍下 evt 的结构，突出重点 如果获取当前 面包屑 item 信息(关键信息：BreadCrumbItem)就行
  50.    * });
  51.    * xxx.on('breadcrumb-item:click', (evt) => {
  52.    *     // 这里介绍下 evt 的结构，突出重点 如果获取当前 面包屑 item 信息(关键信息：BreadCrumbItem)就行
  53.    * });
  54.    * */
  55. };