Easy UI

Appearance

Steps 步骤条 ​

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

引入 ​

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

自定义样式 ​

移步到 CSS Part 和 CSS Custom Properties。

基础用法 ​

设置 active 属性，接受一个 Number，表明步骤的 index，从 0 开始。需要定宽的步骤条时，设置 space 属性即可，它接受 String，单位为 px，如果不设置，则为自适应。设置 finish-status 属性可以改变已经完成的步骤的状态。

上一步下一步

查看代码
html
<div class="demo">
  <p>
    <ea-button id="basicStepsPrevBtn">上一步</ea-button>
    <ea-button id="basicStepsNextBtn">下一步</ea-button>
  </p>
  <ea-steps id="basicSteps" active="0" finish-status="success">
    <ea-step heading="Step 1"></ea-step>
    <ea-step heading="Step 2"></ea-step>
    <ea-step heading="Step 3"></ea-step>
    <ea-step heading="Step 4"></ea-step>
  </ea-steps>
</div>
js
const basicExample = {
  steps: document.querySelector("#basicSteps"),

  prevBtn: document.querySelector("#basicStepsPrevBtn"),
  nextBtn: document.querySelector("#basicStepsNextBtn"),

  stepChildren: [...document.querySelectorAll("#basicSteps > ea-step")],

  init() {
    let active = new Proxy(
      { value: parseInt(this.steps.getAttribute("active")) },
      {
        get: (target, prop) => {
          return target[prop];
        },
        set: (target, prop, value) => {
          if (value < 0) value = this.stepChildren.length;
          if (value > this.stepChildren.length) value = 0;

          target[prop] = value;
          this.steps.setAttribute("active", value);
          return true;
        },
      }
    );

    this.prevBtn.addEventListener("click", () => {
      active.value--;
    });

    this.nextBtn.addEventListener("click", () => {
      active.value++;
    });
  },
};

basicExample.init();

含状态步骤条 ​

每一步骤显示出该步骤的状态。也可以使用 heading 具名插槽，可以用 slot 的方式来取代属性的设置。

查看代码
html
<ea-steps
  style="max-width: 600px"
  active="1"
  finish-status="success"
  space="200px"
>
  <ea-step heading="Done"></ea-step>
  <ea-step heading="Processing"></ea-step>
  <ea-step heading="Step 3"></ea-step>
</ea-steps>

居中的步骤条 ​

设置 align-center 属性可以使步骤内容居中对齐。

查看代码
html
<ea-steps style="max-width: 600px" active="2" align-center>
  <ea-step heading="Step 1" description="Some description"></ea-step>
  <ea-step heading="Step 2" description="Some description"></ea-step>
  <ea-step heading="Step 3" description="Some description"></ea-step>
</ea-steps>

有描述的步骤条 ​

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

查看代码
html
<ea-steps style="max-width: 600px" active="2">
  <ea-step heading="Step 1" description="Some description"></ea-step>
  <ea-step heading="Step 2" description="Some description"></ea-step>
  <ea-step heading="Step 3" description="Some description"></ea-step>
</ea-steps>

带图标的步骤条 ​

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

查看代码
html
<ea-steps style="max-width: 600px" active="1">
  <ea-step heading="Step 1" icon="music"></ea-step>
  <ea-step heading="Step 2" icon="video"></ea-step>
  <ea-step heading="Step 3" icon="camera"></ea-step>
</ea-steps>

简洁风格的步骤条 ​

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

查看代码
html
<ea-steps style="max-width: 600px" active="1" simple>
  <ea-step heading="Step 1" icon="music"></ea-step>
  <ea-step heading="Step 2" icon="video"></ea-step>
  <ea-step heading="Step 3" icon="camera"></ea-step>
</ea-steps>

Steps API ​

Steps Attributes ​

参数说明类型可选值默认值
space每个 step 的间距（影响连接线长度），支持 CSS 值string—50%
active当前激活步骤的 index，从 0 开始记数number—0
process-status正在进行中的步骤状态展示stringwait | process | finish | error | successprocess
finish-status已完成步骤的状态展示stringwait | process | finish | error | successfinish
align-center是否居中对齐步骤内容boolean—false
simple简洁模式（启用后会为每个 step 注入简洁箭头 slot）boolean—false
direction步骤方向stringvertical | horizontalhorizontal

Steps CSS Part ​

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

名称说明
container外层容器

Steps Slots ​

名称说明子元素
default默认插槽，放置 ea-stepea-step

Steps CSS Custom Properties ​

属性名说明默认值
--ea-step-tail-spacing每个 step 的间距50%
--ea-steps-simple-padding简洁模式内边距13px 8%
--ea-steps-simple-bg-color简洁模式背景颜色var(--grey-100)

Step API ​

Step Attributes ​

参数说明类型可选值默认值
heading标题string—""
description步骤的详细描述string—""
icon图标（会传给内部的 ea-icon）string—""
status步骤的状态（可由父组件根据 active 自动设置）stringwait | process | finish | error | success""
index当前步骤的索引（只读，组件内部计算）number—自动计算
simple是否为简洁模式（继承自父级 ea-steps 的属性）boolean—与父组件同步
align-center是否居中（继承自父级 ea-steps 的属性）boolean—与父组件同步
direction步骤方向（继承自父级 ea-steps）stringvertical | horizontalhorizontal（来自父组件或默认）

Step CSS Part ​

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

名称说明
container外层容器
head头部容器（包含图标与连接线）
icon-wrapper图标包裹容器
icon图标元素
tail步骤之间的连接线
main主体容器
heading标题容器
description描述容器
simple-arrow简洁模式下的箭头容器

Step Slots ​

名称说明
default步骤内容（默认插槽，通常为空）
heading步骤标题（具名插槽，优先于 heading 属性）
description步骤描述（具名插槽，优先于 description 属性）
icon步骤图标（具名插槽，优先于 icon 属性，内部为 <ea-icon>）
simple-arrow简洁模式下的箭头插槽（由父组件在 simple 模式下自动注入）

Step CSS Custom Properties ​

属性名说明默认值
--ea-step-icon-border-radius图标圆角var(--border-radius-circle)
--ea-step-icon-wrapper-size图标容器尺寸24px
--ea-step-icon-size图标字体大小var(--font-size-md)
--ea-step-arrow-icon-size箭头图标大小24px
--ea-step-tail-size连接线粗细2px
--ea-step-process-color进行中状态颜色var(--grey-900)
--ea-step-wait-color等待状态颜色var(--grey-500)
--ea-step-finish-color已完成状态颜色var(--blue-500)
--ea-step-success-color成功状态颜色var(--green-500)
--ea-step-error-color错误状态颜色var(--red-500)
--ea-step-tail-color连接线颜色var(--grey-500)
--ea-step-icon-bg-color图标背景颜色var(--color-white)
--ea-step-icon-font-weight图标字体粗细var(--font-weight-bold)