ทำให้เป็นขั้นเป็นตอน

ไลบรารีสำหรับสร้างเวิร์กโฟลว์ทีละขั้นตอนในแอปของคุณ

• รวดเร็วและมีประสิทธิภาพ

• ทรงพลังและยืดหยุ่น

• น้ำหนักเบา (< 1kB gzipped)

• พิมพ์ได้อย่างปลอดภัย

• สถาปัตยกรรมที่ประกอบได้

• Unstyled เพื่อการปรับแต่งสูงสุด

การติดตั้ง

 ติดตั้ง npm @stepperize/react

เริ่มต้นอย่างรวดเร็ว

1. นำเข้าตัวสร้าง:

 นำเข้า { DefineStepper } จาก "@stepperize/react";

2. กำหนดขั้นตอนของคุณ:

 const { ขอบเขต, useStepper, ขั้นตอน } = DefinStepper(
  { id: "step-1", ชื่อ: "ขั้นตอนที่ 1", คำอธิบาย: "คำอธิบายสำหรับขั้นตอนที่ 1" },
  { id: "step-2", ชื่อ: "ขั้นตอนที่ 2", คำอธิบาย: "คำอธิบายสำหรับขั้นตอนที่ 2" },
  { id: "step-3", ชื่อ: "ขั้นตอนที่ 3", คำอธิบาย: "คำอธิบายสำหรับขั้นตอนที่ 3" },
  { id: "step-4", ชื่อ: "ขั้นตอนที่ 4", คำอธิบาย: "คำอธิบายสำหรับขั้นตอนที่ 4" });

3. ใช้ตะขอในส่วนประกอบของคุณ:

 ฟังก์ชั่น StepperComponent () {
  const { currentStep, nextStep, prevStep } = useStepper();

  กลับ (
 
{currentStep.title}
 
{currentStep.description}
 ก่อนหน้า  ถัดไป
  -

มันทำงานอย่างไร

Stepperize ช่วยให้คุณสามารถกำหนดชุดของขั้นตอนด้วย ID ที่ไม่ซ้ำกัน เมื่อคุณสร้างขั้นตอนของคุณโดยใช้ defineStepper คุณจะได้รับ:

• องค์ประกอบ Scoped สำหรับการจัดการบริบท

• ตะขอ useStepper สำหรับควบคุมขั้นบันได

• อาร์เรย์ของ steps ในการเรนเดอร์

ช่องที่ต้องกรอกเพียงช่องเดียวสำหรับแต่ละขั้นตอนคือ id คุณสามารถเพิ่มคุณสมบัติเพิ่มเติมใดๆ ที่คุณต้องการได้ และคุณสมบัติเหล่านั้นจะปลอดภัยอย่างสมบูรณ์เมื่อใช้ hook

เอกสารประกอบ

สำหรับข้อมูลโดยละเอียดเพิ่มเติมเกี่ยวกับการใช้งาน การกำหนดค่า และคุณสมบัติขั้นสูง โปรดไปที่เอกสารฉบับเต็มของเรา

มีส่วนร่วม

เรายินดีต้อนรับการมีส่วนร่วม! โปรดดูคู่มือการสนับสนุนของเราสำหรับรายละเอียดเพิ่มเติม

ใบอนุญาต

Stepperize ได้รับอนุญาตจาก MIT