คอมโพเนนต์ทั้งหมด

Stepper

ขั้นตอนของงานที่มีลำดับตายตัว

ui/navigation.tsxServer safe

ใช้งาน

บนจอแคบจะเรียงเป็นแนวตั้งอัตโนมัติ

เลือกเวลา (เสร็จแล้ว)พฤ. 30 ต.ค. 19:00
2รายละเอียดหัวข้อที่อยากคุย
3ชำระเงิน
4ยืนยัน

tsx

<Stepper current={1} steps={[
  { label: "เลือกเวลา", description: "พฤ. 30 ต.ค. 19:00" },
  { label: "รายละเอียด" },
  { label: "ชำระเงิน" },
  { label: "ยืนยัน" },
]} />

Props

Prop	Type	Default	คำอธิบาย
`steps`	`{ label, description? }[]`	`-`	สามถึงหกขั้น
`current`	`number`	`-`	ขั้นปัจจุบัน เริ่มที่ 0
`label`	`string`	`"ขั้นตอน"`	ชื่อรายการ

ใช้เมื่อไร

ควรทำ

ใช้กับงานที่มีลำดับตายตัว เช่น จองเวลาและชำระเงิน
ให้ย้อนกลับไปแก้ขั้นก่อนหน้าได้

ไม่ควรทำ

ใช้กับขั้นตอนเกินหกขั้น แบ่งเป็นหลายหน้าแทน