VEUI

VEUI on GitHub
中文

Steps

Demos

Size and direction variants

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

Edit this demo on GitHubEdit
<template>
<article>
  <section class="settings">
    <veui-label>
      Current step    <veui-number-input
        v-model="current"
        ui="s"
        :min="1"
        :max="steps.length"
        :step="1"
      />
    </veui-label>
    <veui-radio-button-group
      v-model="style"
      ui="s"
      :items="styles"
    />
    <veui-radio-button-group
      v-model="size"
      ui="s"
      :items="sizes"
    />
    <veui-radio-button-group
      v-model="direction"
      ui="s"
      :items="directions"
    />
    <veui-checkbox
      v-model="stateless"
      ui="s"
    >
      Stateless
    </veui-checkbox>
  </section>
  <section>
    <veui-steps
      :ui="ui"
      :steps="steps"
      :current="current - 1"
      :stateless="stateless"
    />
  </section>
</article>
</template>

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

export default {
  components: {
    'veui-steps': Steps,
    'veui-label': Label,
    'veui-number-input': NumberInput,
    'veui-radio-button-group': RadioButtonGroup,
    'veui-checkbox': Checkbox
  },
  data () {
    return {
      current: 1,
      size: 'm',
      direction: '',
      style: 'normal',
      sizes: [
        {
          label: 's',
          value: 's'
        },
        {
          label: 'm',
          value: 'm'
        }
      ],
      stateless: false,
      directions: [
        {
          label: 'vertical',
          value: 'vertical'
        },
        {
          label: 'label-vertical',
          value: 'label-vertical'
        },
        {
          label: 'default',
          value: ''
        }
      ],
      styles: [
        {
          label: 'normal',
          value: 'normal'
        },
        {
          label: 'dot',
          value: 'dot'
        }
      ],
      steps: [
        { label: 'Step 1', desc: '填写信息' },
        { label: 'Step 2', desc: '验证身份' },
        { label: 'Step 3', desc: '注册成功' }
      ]
    }
  },
  computed: {
    ui () {
      return [
        this.style,
        this.size,
        this.style === 'dot' && this.direction === ''
          ? 'label-vertical'
          : this.direction
      ].join(' ')
    }
  }
}
</script>

<style lang="less" scoped>
.settings {
  display: flex;
  margin-bottom: 32px;
  gap: 16px;
  align-items: center;
}
</style>

Step status

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

Current step

Edit this demo 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

NameTypeDefaultDescription
uistring=-

Style variants.

ValueDescription
sSmall style.
mMedium.
verticalVertical style.
label-verticalLabel vertical style.
stepsArray-

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

NameType
labelstringThe label of the step.
descstringThe description of the step.
tostring | ObjectThe target link of the step. The type is the same as the to prop of Link component.
statusstringThe statue of the step. Available variants are default normal and error.
currentnumber-The index of current step.

Slots

NameDescription
default

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

NameTypeDescription
labelstringThe label of the step. Same as the label property from items of the steps prop.
descstringThe description of the step. Same as the desc property from items of the steps prop.
tostring | ObjectThe target link of the step. Same as the to property from items of the steps prop.
statusstringThe status of the step. Same as the status property from items of the steps prop.
indexnumberThe index of the step. (Starts from 0.)

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

indexThe 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 slot props.
labelThe step label. Displays the label property by default. Resides inside the default slot and share the same slot props.
descThe step description. Displays the desc property by default. Resides inside the default slot and share the same slot props.

Events

NameDescription
clickTriggered 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

NameDescription
successSteps finished successfully.
errorSteps with error.
Edit this page on GitHubEdit
© Baidu, Inc. 2023