ant-design-vue/components/steps/demo/progress-dot.vue

<docs>
---
order: 7
title:
  zh-CN: 点状步骤条
  en-US: Dot Style
---

## zh-CN

包含步骤点的进度条。

## en-US

Steps with progress dot style.
</docs>

<template>
  <div>
    <a-steps
      progress-dot
      :current="1"
      :items="[
        {
          title: 'Finished',
          description: 'This is a description.',
        },
        {
          title: 'In Progress',
          description: 'This is a description.',
        },
        {
          title: 'Waiting',
          description: 'This is a description.',
        },
      ]"
    ></a-steps>
    <a-divider />
    <a-steps
      progress-dot
      :current="1"
      direction="vertical"
      :items="[
        {
          title: 'Finished',
          description: 'This is a description. This is a description.',
        },
        {
          title: 'Finished',
          description: 'This is a description. This is a description.',
        },
        {
          title: 'In Progress',
          description: 'This is a description. This is a description.',
        },
        {
          title: 'Waiting',
          description: 'This is a description.',
        },
        {
          title: 'Waiting',
          description: 'This is a description.',
        },
      ]"
    ></a-steps>
  </div>
</template>