Steps

Demos

Size and direction variants

Available style variants for the ui prop: s / m / vertical / label-vertical.

<template>
<article>
  <section>
    <h4>Current step</h4>
    <veui-number-input
      v-model="current"
      :min="1"
      :max="steps.length"
      :step="1"
    />
  </section>
  <section>
    <h4>Size</h4>
    <veui-radio
      v-for="({ value, label }) in sizeList"
      :key="value"
      v-model="size"
      :value="value"
    >
      {{ label }}
    </veui-radio>
  </section>
  <section>
    <h4>Direction</h4>
    <veui-radio
      v-for="({ value, label }) in directionList"
      :key="value"
      v-model="direction"
      :value="value"
    >
      {{ label }}
    </veui-radio>
  </section>
  <section>
    <veui-steps
      :ui="ui"
      :steps="steps"
      :current="current - 1"
    />
  </section>
</article>
</template>

<script>
import { Steps, NumberInput, Radio } from 'veui'

export default {
  components: {
    'veui-steps': Steps,
    'veui-number-input': NumberInput,
    'veui-radio': Radio
  },
  data () {
    return {
      current: 1,
      size: 'm',
      direction: '',
      vertical: false,
      sizeList: [
        {
          label: 's',
          value: 's'
        },
        {
          label: 'm',
          value: 'm'
        }
      ],
      directionList: [
        {
          label: 'vertical',
          value: 'vertical'
        },
        {
          label: 'label-vertical',
          value: 'label-vertical'
        },
        {
          label: 'default',
          value: ''
        }
      ],
      steps: [
        { label: 'Step 1', desc: '填写信息' },
        { label: 'Step 2', desc: '验证身份' },
        { label: 'Step 3', desc: '注册成功' }
      ]
    }
  },
  computed: {
    ui () {
      return [
        this.size,
        this.direction
      ].join(' ')
    }
  }
}
</script>

<style lang="less" scoped>
h4 {
  margin: 0 0 10px;
}

section {
  margin-bottom: 10px;
}

section + section {
  margin-top: 20px;
}

.veui-radio {
  margin-right: 20px;
}
</style>

Step status

Set status property of the step to error, if the step fails.

Current step

Step 1

填写信息

Step 2

验证身份

Step 3

注册成功

Edit this page on GitHubEdit

<template>
<article>
  <section>
    <h4>Current step</h4>
    <veui-number-input
      v-model="current"
      :min="1"
      :max="steps.length"
      :step="1"
    />
  </section>
  <section>
    <veui-steps
      :steps="steps"
      :current="current - 1"
    />
  </section>
</article>
</template>

<script>
import { Steps, NumberInput } from 'veui'

export default {
  components: {
    'veui-steps': Steps,
    'veui-number-input': NumberInput
  },
  data () {
    return {
      current: 2,
      steps: [
        { label: 'Step 1', desc: '填写信息' },
        { label: 'Step 2', desc: '验证身份', status: 'error' },
        { label: 'Step 3', desc: '注册成功' }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
h4 {
  margin: 0 0 10px;
}

section {
  margin-bottom: 10px;
}

section + section {
  margin-top: 20px;
}
</style>

API

Props

Name Type Default Description

ui

string=

Style variants.

Value	Description
`s`	Small style.
`m`	Medium.
`vertical`	Vertical style.
`label-vertical`	Label vertical style.

steps

Array

The datasource of steps with item type being { label, desc, to, status }.

Name	Type
`label`	`string`	The label of the step.
`desc`	`string`	The description of the step.
`to`	`string \| Object`	The target link of the step. The type is the same as the `to` prop of `Link` component.
`status`	`string`	The statue of the step. Available variants are default normal and `error`.

current number - The index of current step.

Slots

Name Description

default

The content of each step. Displays the step index/completed icon, label and description by default.

Name	Type	Description
`label`	`string`	The label of the step. Same as the `label` property from items of the `steps` prop.
`desc`	`string`	The description of the step. Same as the `desc` property from items of the `steps` prop.
`to`	`string \| Object`	The target link of the step. Same as the `to` property from items of the `steps` prop.
`status`	`string`	The status of the step. Same as the `status` property from items of the `steps` prop.
`index`	`number`	The index of the step. (Starts from `0`.)

Additionally, custom properties in current step, apart from the listed ones, will also be passes into the scope object via v-bind.

index The step index. Displays an index value starts from 1, a success icon for finished steps by default and an error icon for error steps. Resides inside the default slot and share the same scope properties.

label The step label. Displays the label property by default. Resides inside the default slot and share the same scope properties.

desc The step description. Displays the desc property by default. Resides inside the default slot and share the same scope properties.

Events

Name	Description
`click`	Triggered when any step is clicked. The callback parameter type is `(index: number, event: Event)`, where `index` is the index of the clicked step and `event` is the corresponding native event object.

Icons

Name	Description
`success`	Steps finished successfully.
`error`	Steps with error.

Edit this page on GitHubEdit