Easy UI

Breadcrumb 面包屑 ​

显示当前页面的路径，快速返回之前的任意页面。

引入 ​

html
<script type="module">
  import "./node_modules/easy-component-ui/components/ea-breadcrumb/index.js";
</script>

css

TIP

需要注意的是, 如果需要使用到带有图标的 属性/组件, 需要提前使用 link 标签引入图标文件

html
<link
  rel="stylesheet"
  href="./node_modules/easy-component-ui/components/ea-icon/index.css"
/>

自定义样式 ​

移步到 CSS Part。

基础用法 ​

在 ea-breadcrumb 中使用 ea-breadcrumb-item 标签表示从首页开始的每一级。ea-breadcrumb 提供了一个 separator 属性，在 ea-breadcrumb 标签中设置它来决定分隔符，它只能是字符串，默认为斜杠 /。

homepage promotion management promotion listpromotion detail
html
<div class="demo">
  <ea-breadcrumb separator="/">
    <ea-breadcrumb-item href="javascript:;">homepage</ea-breadcrumb-item>
    <ea-breadcrumb-item href="javascript:;">
      promotion management
    </ea-breadcrumb-item>
    <ea-breadcrumb-item>promotion list</ea-breadcrumb-item>
    <ea-breadcrumb-item>promotion detail</ea-breadcrumb-item>
  </ea-breadcrumb>
</div>

图标分隔符 ​

通过设置 separator-class 可使用相应的 iconfont 作为分隔符，注意这将使 separator 设置失效. 可设置 separator-color 来设置分隔符颜色.

homepage→ promotion management promotion listpromotion detail
html
<div class="demo">
  <ea-breadcrumb>
    <ea-icon icon="icon-angle-right" slot="separator"></ea-icon>
    <ea-breadcrumb-item href="javascript:;">homepage</ea-breadcrumb-item>
    <ea-breadcrumb-item href="javascript:;">
      <span slot="separator">→</span>
      promotion management
    </ea-breadcrumb-item>
    <ea-breadcrumb-item>promotion list</ea-breadcrumb-item>
    <ea-breadcrumb-item>promotion detail</ea-breadcrumb-item>
  </ea-breadcrumb>
</div>
参数说明类型可选值默认值
separator分隔符string-/
名称说明
-默认插槽
separator分隔符

用法可参考 MDN ::part()伪类

名称说明
container容器
参数说明类型可选值默认值
href链接string--
名称说明
-默认插槽
separator分隔符

用法可参考 MDN ::part()伪类

名称说明
container容器
separator分隔符