Steps 스텝퍼

사용자가 단계를 따라 작업을 완료하도록 안내해요.

출처: 문서

본문

언제 사용하나요?

정해진 단계를 거쳐 작업을 완료해야 할 때 사용해요.

기본 사용법

:::demo

<template>
  <d-steps v-model="activeStep" class="mb-2">
    <d-step title="基本信息"></d-step>
    <d-step title="选择代码源"></d-step>
    <d-step title="选择构建模板"></d-step>
  </d-steps>
  <d-button @click="nextStep">下一步</d-button>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const activeStep = ref(0);

    const nextStep = () => {
      if (activeStep.value > 2) {
        activeStep.value = 0;
      } else {
        activeStep.value++;
      }
    };

    return {
      activeStep,
      nextStep,
    };
  },
});
</script>

<style lang="scss">
.demo-steps-basic-next-step {
  margin-top: 24px;
}
</style>

:::

가운데 정렬

:::demo

<template>
  <d-steps v-model="activeStepAlignCenter" align-center>
    <d-step title="基本信息"></d-step>
    <d-step title="选择代码源"></d-step>
    <d-step title="选择构建模板"></d-step>
  </d-steps>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const activeStepAlignCenter = ref(1);

    return {
      activeStepAlignCenter,
    };
  },
});
</script>

:::

설명이 있는 스텝퍼

:::demo

<template>
  <d-steps v-model="activeStepDescription">
    <d-step title="基本信息" description="填写名称、选择归属项目等基本信息"></d-step>
    <d-step title="选择代码源" description="选择代码仓库、分支等信息"></d-step>
    <d-step title="选择构建模板" description="根据项目类型选择合适的构建模板"></d-step>
  </d-steps>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const activeStepDescription = ref(1);

    return {
      activeStepDescription,
    };
  },
});
</script>

:::

커스텀 아이콘

:::demo

<template>
  <d-steps v-model="activeStepCustomIcon">
    <d-step title="基本信息" icon="classroom-post-answers-large"></d-step>
    <d-step title="选择代码源" icon="code"></d-step>
    <d-step title="选择构建模板" icon="icon-build-with-tool"></d-step>
  </d-steps>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const activeStepCustomIcon = ref(1);

    return {
      activeStepCustomIcon,
    };
  },
});
</script>

:::

세로 스텝퍼

:::demo

<template>
  <div style="height: 260px;">
    <d-steps v-model="activeStepDirection" direction="vertical">
      <d-step title="基本信息"></d-step>
      <d-step title="选择代码源"></d-step>
      <d-step title="选择构建模板" description="根据项目类型选择合适的构建模板"></d-step>
    </d-steps>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const activeStepDirection = ref(1);

    return {
      activeStepDirection,
    };
  },
});
</script>

:::

커스텀 상태

:::demo

<template>
  <d-steps v-model="activeStepStatus">
    <d-step title="基本信息"></d-step>
    <d-step title="选择代码源" status="error"></d-step>
    <d-step title="选择构建模板"></d-step>
  </d-steps>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const activeStepStatus = ref(1);

    return {
      activeStepStatus,
    };
  },
});
</script>

:::

심플 모드

:::demo

<template>
  <d-steps v-model="activeStepSimple" simple class="mb-2" >
    <d-step title="基本信息"></d-step>
    <d-step title="选择代码源"></d-step>
    <d-step title="选择构建模板"></d-step>
  </d-steps>
  <d-button @click="nextStepSimple">下一步</d-button>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const activeStepSimple = ref(1);

    const nextStepSimple = () => {
      if (activeStepSimple.value > 2) {
        activeStepSimple.value = 0;
      } else {
        activeStepSimple.value++;
      }
    };

    return {
      activeStepSimple,
      nextStepSimple,
    };
  },
});
</script>

:::

Steps 파라미터

Step 파라미터

Step 슬롯

Steps 타입 정의

IStepsDirection

export type IStepsDirection = 'horizontal' | 'vertical';

IStepStatus

export type IStepStatus = 'wait' | 'process' | 'finish' | 'success' | 'error';

더 알아보기 (Learn more)

Steps로 작업 진행 단계를 한눈에 보여 줄 수 있어요. 더 자세한 내용은 공식 문서를 참고하세요.