# 面包屑

显示当前页面的路径,快速返回之前的页面。

# 概念说明

# 属性

组件通用属性请参见组件通用说明

# 面包屑

  • 自动生成:支持控制面包屑生成方式。

    • 开启:根据子页面面包屑属性自动生成。
    • 关闭:手动配置面包屑跳转路径。
  • 面包屑样式:支持控制面包屑样式,包含基础样式和分隔符样式。

    image-20230301175759878

  • 面包屑图标:支持控制面包屑选项图标显隐,开启后显示面包屑选项图标。

    image-20230301175843382

# 面包屑选项

  • 图标:支持从图标库选择或上传自定义图标。
  • 文本:显示的文本内容。
  • 链接类型:支持页面跳转、下载链接。
  • 链接地址:设置链接路径。
  • 链接打开方式:可选新窗口、当前窗口、父级窗口或顶级窗口,父级窗口和顶级窗口仅适用于iframe组件嵌套的情况,若不存在嵌套,则打开方式同当前窗口。
  • 禁用:置灰显示,且禁止任何交互(焦点、点击、选择、输入等)。

# 事件

  • 面包屑组件不支持事件。
  • 面包屑选项支持鼠标事件和组件事件。
    • 鼠标事件

      事件名 触发条件
      点击 鼠标左键单击对应组件
      双击 鼠标左键双击对应组件
      右键点击 鼠标右键单击对应组件
      鼠标按下 鼠标任意键在组件区域内按下
      鼠标释放 鼠标任意键在组件区域内释放
      鼠标移入 鼠标指针移入组件区域
      鼠标移出 鼠标指针移出组件区域
    • 组件事件

      事件名 触发条件
      导航前 切换导航还未跳转前
      导航 切换导航时

# 样式

样式说明请参见组件通用说明

# 主题样式

  • color-link:可跳转链接的默认文字颜色,如:#223325。
  • color-disabled:禁用链接的默认文字颜色,如:#223325。
  • space-x:链接与箭头符号之间的间距,如:1px。

# 示例

面包屑组件用法分为手动面包屑、自动面包屑、图标面包屑三种。

  • 自动面包屑:自动生成选项默认开启,系统会根据页面或子页面的面包屑以及页面的层级关系自动生成面包屑。
  • 手动面包屑:自动生成选项默认关闭,需要手动配置面包屑选项的跳转路径。
  • 图标面包屑:自动生成选项默认关闭,需要手动配置面包屑选项的跳转路径;面包屑图标选项默认开启。

# 设置自动面包屑:首页>客户列表>客户详情

  1. dashboard页面下创建子页面CustomerList,标题为客户列表;CustomerList页面下创建子页面CustomerDetail,标题为客户详情。完成创建后在dashboard页面拖入自动面包屑组件。

    image-20221104153802126

  2. 单击页面,查看页面属性,分别给dashboard、CustomerList和CustomerDetail三个页面定义面包屑名称。

    image-20221104170520646

  3. 应用发布后,客户详情页预览效果如下。当前页面自动禁用,无法点击,总览页可客户列表均可点击跳转。

    image-20221104173832689

# 设置手动面包屑:首页>客户列表>客户详情

  1. dashboard页面下创建子页面CustomerList,标题为客户列表;CustomerList页面下创建子页面CustomerDetail,标题为客户详情。完成创建在dashboard页面拖入手动面包屑组件。

    image-20221107160732938

  2. 单击各个面包屑选项,分别配置面包屑选项名称为“总览页”、“客户列表”和“客户详情”。

    image-20221107162732189

  3. 如下图红框所示,设置各个选项对应的页面跳转链接。

    image-20221107165444450

  4. 应用发布后,客户详情页预览效果如下。如需禁用某链接,需要手动进行链接禁用。

    image-20221104173832689

# 设置图标面包屑:首页>客户列表>客户详情

整体操作流程同手动面包屑,默认开启了面包屑图标选项。图标设置位置如下图红框所示,支持从图标库选择或上传自定义图标。

image-20221107165953868

上次更新: 2023年06月15日