Steps 步骤条

一步两步，一步两步

import { DuSteps } from 'dangoui'

示例

<template>
  <PreviewBlock title="基础">
    <DuSteps
      :steps="basicSteps"
      status="success"
      :active-index="0"
      type="default"
    />
  </PreviewBlock>
  <PreviewBlock title="进行中">
    <DuSteps
      :steps="basicSteps"
      status="process"
      :active-index="1"
      type="default"
    />
  </PreviewBlock>
  <PreviewBlock title="深色">
    <div class="bg-black w-full py-16px rounded-8px">
      <DuSteps
        :steps="basicSteps"
        status="success"
        :active-index="2"
        type="ghost"
      />
    </div>
  </PreviewBlock>
  <PreviewBlock title="深色进行中">
    <div class="bg-black w-full py-16px rounded-8px">
      <DuSteps
        :steps="basicSteps"
        status="process"
        :active-index="3"
        type="ghost"
      />
    </div>
  </PreviewBlock>
</template>

<script setup lang="ts">
import { DuSteps } from 'dangoui'

const basicSteps = [
  { title: '等待支付' },
  { title: '等待卖家发货' },
  { title: '已发货' },
  { title: '送货中' },
  { title: '已到货' },
]
</script>

不同颜色

<template>
  <PreviewBlock title="primary">
    <DuSteps
      color="primary"
      :steps="basicSteps"
      status="process"
      :active-index="1"
      type="default"
    />
  </PreviewBlock>
  <PreviewBlock title="secondary">
    <DuSteps
      color="secondary"
      :steps="basicSteps"
      status="process"
      :active-index="1"
      type="default"
    />
  </PreviewBlock>
  <PreviewBlock title="success">
    <DuSteps
      color="success"
      :steps="basicSteps"
      status="process"
      :active-index="1"
      type="default"
    />
  </PreviewBlock>
  <PreviewBlock title="warning">
    <DuSteps
      color="warning"
      :steps="basicSteps"
      status="process"
      :active-index="1"
      type="default"
    />
  </PreviewBlock>
  <PreviewBlock title="error">
    <DuSteps
      color="error"
      :steps="basicSteps"
      status="process"
      :active-index="1"
      type="default"
    />
  </PreviewBlock>
  <PreviewBlock title="trade">
    <DuSteps
      color="trade"
      :steps="basicSteps"
      status="process"
      :active-index="1"
      type="default"
    />
  </PreviewBlock>
  <PreviewBlock title="primary/ghost">
    <div class="bg-black w-full py-16px rounded-8px">
      <DuSteps
        :steps="basicSteps"
        status="process"
        :active-index="3"
        type="ghost"
      />
    </div>
  </PreviewBlock>
  <PreviewBlock title="success/ghost">
    <div class="bg-black w-full py-16px rounded-8px">
      <DuSteps
        color="success"
        :steps="basicSteps"
        status="process"
        :active-index="3"
        type="ghost"
      />
    </div>
  </PreviewBlock>
  <PreviewBlock title="warning/ghost">
    <div class="bg-black w-full py-16px rounded-8px">
      <DuSteps
        color="warning"
        :steps="basicSteps"
        status="process"
        :active-index="3"
        type="ghost"
      />
    </div>
  </PreviewBlock>
  <PreviewBlock title="error/ghost">
    <div class="bg-black w-full py-16px rounded-8px">
      <DuSteps
        color="error"
        :steps="basicSteps"
        status="process"
        :active-index="3"
        type="ghost"
      />
    </div>
  </PreviewBlock>
</template>

<script setup lang="ts">
import { DuSteps } from 'dangoui'

const basicSteps = [
  { title: '等待支付' },
  { title: '等待卖家发货' },
  { title: '已发货' },
  { title: '送货中' },
  { title: '已到货' },
]
</script>

API

属性

属性名	类型	默认值	说明
type	`"default" \| "ghost"`	`"default"`
ext-class	`string \| string[] \| Record<string, boolean>`	`""`
ext-style	`string \| { [x: string]: string \| number; }`	`""`
color	`string`	`"primary"`	色彩，可以使用色板中的颜色名
active-index	`number`	`0`
status	`"success" \| "process"`	`"process"`	当前进度的状态：进行中、已完成
steps	`{ title: string; }[]`	`[]`