Steps 步骤条

import { Steps,Step } from 'feui';
components: {
  [Steps.name]: Steps,
  [Step.name]: Step
}

代码演示

基础用法

<fe-steps :active="active">
  <fe-step>买家下单</fe-step>
  <fe-step>商家接单</fe-step>
  <fe-step>买家提货</fe-step>
  <fe-step>交易完成</fe-step>
</fe-steps>

添加图标、标题和描述

<fe-steps
  :active="active"
  icon="download"
  icon-class="steps-success"
  title="大象放冰箱"
  description="要把大象放冰箱,总共分几步" >
  <fe-step>第一步，把冰箱门打开</fe-step>
  <fe-step>第二步，把大象放冰箱</fe-step>
  <fe-step>第三步，把冰箱门关上</fe-step>
</fe-steps>

横向模式

<fe-steps direction="vertical" :active="0" active-color="#f60">
  <fe-step>
    <h3>派件中</h3>
    <p>2018-01-12 12:40</p>
  </fe-step>
  <fe-step>
    <h3>已到达杭州</h3>
    <p>2018-01-11 10:05</p>
  </fe-step>
  <fe-step>
    <h3>已到达浙江</h3>
    <p>2018-01-10 09:30</p>
  </fe-step>
  <fe-step>
    <h3>已收件</h3>
    <p>2018-01-09 18:30</p>
  </fe-step>
</fe-steps>

API

Slots