ea-ui

Steps 步骤条 ​

引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于 2 步。

引入 ​

js

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

css

TIP

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

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

自定义样式 ​

移步到 CSS Part。

基础用法 ​

简单的步骤条。 设置 active 属性，接受一个 Number，表明步骤的 index，从 0 开始。

TIP

步骤条可能会出现页面抖动的情况，建议设置最小高度

html
<style>
  ea-steps::part(container) {
    min-height: 90px;
  }
</style>

上一步下一步

示例代码-html
html
<div class="demo">
  <p>
    <ea-button id="basicObj_pre-btn">上一步</ea-button>
    <ea-button id="basicObj_next-btn">下一步</ea-button>
  </p>
  <ea-steps id="basicObj" active="0">
    <ea-step title="步骤一" description="这是步骤一的描述"></ea-step>
    <ea-step title="步骤二" description="这是步骤二的描述"></ea-step>
    <ea-step title="步骤三" description="这是步骤三的描述"></ea-step>
    <ea-step title="步骤四" description="这是步骤四的描述"></ea-step>
  </ea-steps>
</div>
示例代码-js
js
const basicObj = {
  wrap: document.querySelector("#basicObj"),

  nextBtn: document.querySelector("#basicObj_next-btn"),
  prevBtn: document.querySelector("#basicObj_pre-btn"),

  stepChildren: document.querySelectorAll("#basicObj ea-step"),

  handleActiveChange(flag) {
    let cur = this.wrap.active;

    if (flag === "prev") {
      if (--cur < 0) return (this.wrap.active = 3);

      this.wrap.active = cur;
    } else {
      if (++cur > this.stepChildren.length) return (this.wrap.active = 0);

      this.wrap.active = cur;
    }
  },

  init() {
    const { length } = this.stepChildren;

    this.prevBtn.addEventListener("click", () => {
      this.handleActiveChange("prev");
    });

    this.nextBtn.addEventListener("click", () => {
      this.handleActiveChange("next");
    });
  },
};
basicObj.init();

含状态步骤条 ​

每一步骤显示出该步骤的状态。

也可以使用 title 具名分发，可以用 slot 的方式来取代属性的设置，在本文档最后的列表中有所有的 slot name 可供参考。

示例代码-html
html
<div class="demo">
  <ea-steps active="1">
    <ea-step title="已完成"></ea-step>
    <ea-step title="进行中"></ea-step>
    <ea-step title="步骤 3"></ea-step>
  </ea-steps>
</div>

有描述的步骤条 ​

每个步骤有其对应的步骤状态描述。

示例代码-html
html
<div class="demo">
  <ea-steps active="1">
    <ea-step
      title="步骤 1"
      description="这是一段很长很长很长的描述性文字"
    ></ea-step>
    <ea-step
      title="步骤 2"
      description="这是一段很长很长很长的描述性文字"
    ></ea-step>
    <ea-step title="步骤 3" description="这段就没那么长了"></ea-step>
  </ea-steps>
</div>

带图标的步骤条 ​

步骤条内可以启用各种自定义的图标。

示例代码-html
html
<div class="demo">
  <ea-steps active="1">
    <ea-step title="步骤 1" icon="icon-music"></ea-step>
    <ea-step title="步骤 2" icon="icon-videocam"></ea-step>
    <ea-step title="步骤 3" icon="icon-camera"></ea-step>
  </ea-steps>
</div>

自定义每个 step 的间距 ​

每个步骤有其对应的步骤状态描述。

示例代码-html
html
<div class="demo">
  <ea-steps active="1" space="300px">
    <ea-step title="步骤 1" icon="icon-music"></ea-step>
    <ea-step title="步骤 2" icon="icon-videocam"></ea-step>
    <ea-step title="步骤 3" icon="icon-camera"></ea-step>
  </ea-steps>
</div>

简洁风格的步骤条 ​

设置 simple 可应用简洁风格，该条件下 description / space 都将失效。

示例代码-html
html
<div class="demo">
  <ea-steps active="1" space="300px">
    <ea-step title="步骤 1" icon="icon-music"></ea-step>
    <ea-step title="步骤 2" icon="icon-videocam"></ea-step>
    <ea-step title="步骤 3" icon="icon-camera"></ea-step>
  </ea-steps>
</div>

Steps Attributes ​

参数说明类型可选值默认值
active当前激活步骤的 index，从 0 开始记数number—0
space每个 step 的间距，不设置则自动计算string——
simple简洁模式boolean—false

Step Attributes ​

参数说明类型可选值默认值
title标题string——
description步骤的详细描述string——
icon图标string——
status步骤的状态stringwait / process / finishprocess

Steps CSS Part ​

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

名称说明
container外层容器

Step CSS Part ​

名称说明
container外层容器
head-wrap头部容器
step-bar步骤条
head-icon图标
main-wrap主体容器
title-wrap标题容器
description-wrap描述容器

Step Slot ​

名称说明
—步骤内容
title步骤标题
description步骤描述
icon步骤图标