Honeycomb Design

# 步骤条 Steps

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

# 基础用法

第一步
上一步 下一步
基本用法

从第一步骤走到最后一步，告知用户进展

<title>基本用法</title>
<describe>从第一步骤走到最后一步，告知用户进展</describe>
<template>
    <hc-steps v-model="active" >
      <hc-step title="查询机会"></hc-step>
      <hc-step title="填写客户信息"></hc-step>
      <hc-step title="填写认购信息"></hc-step>
    </hc-steps>
    <div v-if="active===0" style="height: 40px">第一步</div>
    <div v-if="active===1" style="height: 40px">第二步</div>
    <div v-if="active===2" style="height: 40px">第三步</div>
    <hc-button @click="active--">上一步</hc-button>
    <hc-button @click="active++">下一步</hc-button>
</template>
<script>
export default {
    data: function () {
        return {
            active: 0
        }
    }
}
</script>

# 简洁模式

第一步
上一步 下一步
简洁模式

样式更简洁，通过type属性来切换

<title>简洁模式</title>
<describe>样式更简洁，通过type属性来切换</describe>
<template>
    <hc-steps type="simple" v-model="active" >
      <hc-step title="查询机会"></hc-step>
      <hc-step title="填写客户信息"></hc-step>
      <hc-step title="填写认购信息"></hc-step>
    </hc-steps>
    <div v-if="active===0" style="height: 40px">第一步</div>
    <div v-if="active===1" style="height: 40px">第二步</div>
    <div v-if="active===2" style="height: 40px">第三步</div>
    <hc-button @click="active--">上一步</hc-button>
    <hc-button @click="active++">下一步</hc-button>
</template>
<script>
export default {
    data: function () {
        return {
            active: 0
        }
    }
}
</script>

# 自定义图标

第一步
上一步 下一步
自定义图标

可以通过具名插槽来自定义步骤通过之后的图标显示样式

<title>自定义图标</title>
<describe>可以通过具名插槽来自定义步骤通过之后的图标显示样式</describe>
<template>
    <hc-steps v-model="active" >
      <hc-step title="查询机会">
         <template v-slot:icon>
           <hc-icon :style="styleBase3" type="home"></hc-icon>
         </template>
      </hc-step>
      <hc-step title="填写客户信息"></hc-step>
      <hc-step title="填写认购信息"></hc-step>
    </hc-steps>
    <div v-if="active===0" style="height: 40px">第一步</div>
    <div v-if="active===1" style="height: 40px">第二步</div>
    <div v-if="active===2" style="height: 40px">第三步</div>
    <hc-button @click="active--">上一步</hc-button>
    <hc-button @click="active++">下一步</hc-button>
</template>
<script>
export default {
    data: function () {
        return {
           active: 0,
           styleBase3: {
               fontSize: '24px',
               color: '#ffaa19'
           }
        }
    }
}
</script>

# 属性及事件

# HcSteps 属性

属性 说明 类型 可选值 默认值
value 激活步骤值，支持v-model方式使用 number -- --
type 显示样式(默认模式default和简洁模式simple) string default/simple default

# HcStep 属性

属性 说明 类型 可选值 默认值
title 步骤标题 string -- --
block 宽度百分比布局 boolean -- true

# HcStep 插槽

名称 说明
icon 支持自定义当前步骤通过之后展示的图标

← 分页 Pagination →