สเต็ปเปอร์

คอมโพเนนต์ Status จัดเตรียมวิธีการมาตรฐานในการแสดงรายการขั้นตอนในกระบวนการ มันใช้เพื่อระบุขั้นตอนปัจจุบันในกระบวนการหลายขั้นตอน เช่น แบบฟอร์มหรือขั้นตอนการชำระเงิน คอมโพเนนต์สามารถใช้เพื่อแสดงสถานะของแต่ละขั้นตอน เช่น เสร็จสิ้น กำลังดำเนินการ หรือยังไม่ได้เริ่ม

WARNING

ไม่มีระบบจัดการสถานะที่เกี่ยวข้องในคอมโพเนนต์นี้ สถานะของแต่ละขั้นตอนถูกกำหนดโดยข้อมูลที่ส่งไปยังคอมโพเนนต์ คุณสามารถใช้ prop status เพื่อกำหนดสถานะของแต่ละขั้นตอน ค่าที่ยอมรับสำหรับ prop status คือ completed, active, และ pending คอมโพเนนต์จะอัปเดตลักษณะของแต่ละขั้นตอนโดยอัตโนมัติตามสถานะที่ส่งไป

การใช้งานพื้นฐาน

1

Step 1Description

2

Step 2

3

Step 3

4

Step 4

<template>
  <spr-stepper :steps="steps" />
</template>
<script setup lang="ts">
import { ref } from 'vue';

const steps = ref([
  {
    number: 1,
    label: 'Step 1',
    status: 'completed',
    description: 'Description',
  },
  {
    number: 2,
    label: 'Step 2',
    status: 'active',
  },
  {
    number: 3,
    label: 'Step 3',
    status: 'pending',
  },
  {
    number: 4,
    label: 'Step 4',
    status: 'pending',
  },
]);
</script>

ประเภท

สเต็ปเปอร์มีประเภทที่จำแนกเป็น compact (ค่าเริ่มต้น) และ solid สเต็ปเปอร์ด้านล่างเป็นตัวอย่างของประเภท solid

Step 1Description

2

Step 2

3

Step 3

4

Step 4

<template>
  <div style="width:200px;">
    <spr-stepper :steps="steps" type="solid" />
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';

const steps = ref([
  {
    number: 1,
    label: 'Step 1',
    status: 'completed',
    description: 'Description',
  },
  {
    number: 2,
    label: 'Step 2',
    status: 'active',
  },
  {
    number: 3,
    label: 'Step 3',
    status: 'pending',
  },
  {
    number: 4,
    label: 'Step 4',
    status: 'pending',
  },
]);
</script>

สเต็ปเปอร์แนวนอน

1

Step 1Description

2

Step 2

3

Step 3

4

Step 4

<template>
  <spr-stepper :steps="steps" variant="horizontal" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
const steps = ref([
  {
    number: 1,
    label: 'Step 1',
    status: 'completed',
    description: 'Description',
  },
  {
    number: 2,
    label: 'Step 2',
    status: 'active',
  },
  {
    number: 3,
    label: 'Step 3',
    status: 'pending',
  },
  {
    number: 4,
    label: 'Step 4',
    status: 'pending',
  },
]);
</script>

ขั้นตอนที่มีคำอธิบาย

1

Step 1Description 1

2

Step 2Description 2

3

Step 3Description 3

4

Step 4Description 4

<template>
  <spr-stepper :steps="stepsWithDescription" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
const stepsWithDescription = ref([
  {
    number: 1,
    label: 'Step 1',
    status: 'completed',
    description: 'Description 1',
  },
  {
    number: 2,
    label: 'Step 2',
    status: 'active',
    description: 'Description 2',
  },
  {
    number: 3,
    label: 'Step 3',
    status: 'pending',
    description: 'Description 3',
  },
  {
    number: 4,
    label: 'Step 4',
    status: 'pending',
    description: 'Description 4',
  },
]);
</script>

มีเส้น

1

Step 1Description

2

Step 2

3

Step 3

4

Step 4

1

Step 1Description

2

Step 2

3

Step 3

4

Step 4

TIP

เส้นจะยืดออกไปตราบเท่าที่มีพื้นที่ว่าง คุณสามารถจัดการความกว้างของสเต็ปเปอร์นี้ผ่าน attribute "class" เพื่อย่อหรือยืดเส้น

<template>
  <spr-stepper :steps="steps" has-lines />

  <spr-stepper :steps="steps" has-lines variant="horizontal" />
</template>

สนามเด็กเล่นสถานะ

1

Playground Step 1

2

Playground Step 2

3

Playground Step 3

4

Playground Step 4

1

Playground Step 1

2

Playground Step 2

3

Playground Step 3

4

Playground Step 4

<template>
  <spr-stepper :steps="playgroundSteps" has-lines variant="vertical" />

  <spr-stepper :steps="playgroundSteps" has-lines variant="horizontal" class="w-1/2" />

  <spr-button tone="success" @click="updateSteps">Next State</spr-button>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const playgroundSteps = ref([
  {
    number: 1,
    label: 'Playground Step 1',
    status: 'active',
  },
  {
    number: 2,
    label: 'Playground Step 2',
    status: 'pending',
  },
  {
    number: 3,
    label: 'Playground Step 3',
    status: 'pending',
  },
  {
    number: 4,
    label: 'Playground Step 4',
    status: 'pending',
  },
]);
const updateSteps = () => {
  // find the current active then set the next step to active
  const currentStep = playgroundSteps.value.find((step) => step.status === 'active');
  const currentIndex = playgroundSteps.value.indexOf(currentStep);
  if (currentIndex !== -1 && currentIndex < playgroundSteps.value.length - 1) {
    playgroundSteps.value[currentIndex].status = 'completed';
    playgroundSteps.value[currentIndex + 1].status = 'active';
  }
};
</script>

API Reference

Props

ชื่อ	คำอธิบาย	ประเภท	ค่าเริ่มต้น
variant	กำหนดว่าเลย์เอาต์ของสเต็ปเปอร์เป็นแนวนอนหรือแนวตั้ง ส่งผลต่อการจัดเรียงและการจัดรูปแบบของขั้นตอน	'horizontal' | 'vertical'	'vertical'
hasLines	สลับการมองเห็นของเส้นเชื่อมต่อระหว่างขั้นตอน เมื่อเป็น true จะแสดงเส้นที่เชื่อมต่อแต่ละขั้นตอนเพื่อระบุความคืบหน้าทางภาพ	boolean	false
steps	อาร์เรย์ของออบเจ็กต์การกำหนดค่าขั้นตอนที่กำหนดเนื้อหาและสถานะของแต่ละขั้นตอนในสเต็ปเปอร์ แต่ละขั้นตอนสามารถมีคุณสมบัติต่อไปนี้: number: หมายเลขขั้นตอน (จำเป็น) label: ข้อความป้ายกำกับที่แสดงสำหรับขั้นตอน status: สถานะปัจจุบันของขั้นตอน ('completed', 'active', หรือ 'pending') description: ข้อความคำอธิบายเพิ่มเติมสำหรับขั้นตอน	StepPropTypes[]	[]
type	ควบคุมรูปแบบภาพของสเต็ปเปอร์ 'compact' ใช้การจัดรูปแบบน้อยที่สุดด้วยตัวบ่งชี้โครงร่าง ในขณะที่ 'solid' ใช้สีพื้นหลังที่เต็มสำหรับขั้นตอนที่ใช้งานอยู่และเสร็จสิ้น	'compact' | 'solid'	'compact'

Events

ชื่อ	คำอธิบาย	พารามิเตอร์
click	ถูกปล่อยออกมาเมื่อมีการคลิกขั้นตอน เหตุการณ์นี้ถูกปล่อยออกมาโดยคอมโพเนนต์ Step แต่ละตัว	(evt: MouseEvent) - เหตุการณ์เมาส์ที่ทริกเกอร์การคลิก

Step Props

ชื่อ	คำอธิบาย	ประเภท	จำเป็น
number	หมายเลขขั้นตอนที่แสดงในตัวบ่งชี้ขั้นตอน	number	ใช่
label	ข้อความป้ายกำกับที่แสดงสำหรับขั้นตอน	string	ไม่
status	สถานะปัจจุบันของขั้นตอน: completed: ขั้นตอนเสร็จสิ้นแล้ว active: ขั้นตอนปัจจุบันที่กำลังดำเนินการ pending: ขั้นตอนที่ยังไม่ถึง	'completed' | 'active' | 'pending'	ไม่ (ค่าเริ่มต้นเป็น 'pending')
description	ข้อความคำอธิบายเพิ่มเติมที่แสดงใต้ป้ายกำกับขั้นตอน	string	ไม่

Product Uses