stepperize

مكتبة لإنشاء مهام سير العمل خطوة بخطوة في تطبيقاتك

• سريع وفعال

• قوية ومرنة

• خفيف الوزن (<1 كيلو بايت مضغوط)

• آمنة تمامًا على الكتابة

• العمارة المركبة

• غير مصمم لتحقيق أقصى قدر من التخصيص

تثبيت

 تثبيت npm @stepperize/react

بداية سريعة

1. استيراد المنشئ:

 استيراد {defineStepper} من "@stepperize/react"؛

2. حدد خطواتك:

 const { Scoped، useStepper،خطوات } = DefineStepper(
  { المعرف: "الخطوة 1"، العنوان: "الخطوة 1"، الوصف: "وصف الخطوة 1" }،
  { المعرف: "الخطوة 2"، العنوان: "الخطوة 2"، الوصف: "وصف الخطوة 2" }،
  { المعرف: "الخطوة 3"، العنوان: "الخطوة 3"، الوصف: "وصف الخطوة 3" }،
  {المعرف: "الخطوة 4"، العنوان: "الخطوة 4"، الوصف: "وصف الخطوة 4" });

3. استخدم الخطاف في مكوناتك:

 وظيفة ستيبيركومبونينت () {
  const {currentStep, nextStep, prevStep } = useStepper();

  return (<div> <h2>{currentStep.title}</h2> <p>{currentStep.description}</p> <button onClick={prevStep}>السابق</button> <button onClick={nextStep}> التالي</button></div>
  );}

كيف يعمل

يتيح لك Stepperize تحديد سلسلة من الخطوات بمعرفات فريدة. عندما تقوم بإنشاء خطواتك باستخدام defineStepper ، تحصل على:

• مكون Scoped لإدارة السياق

• خطاف useStepper للتحكم في الخطوة

• مجموعة من steps للتقديم

الحقل الوحيد المطلوب لكل خطوة هو id . يمكنك إضافة أي خصائص إضافية تحتاجها، وستكون آمنة تمامًا للكتابة عند استخدام الخطاف.

التوثيق

للحصول على معلومات أكثر تفصيلاً حول الاستخدام والتكوين والميزات المتقدمة، تفضل بزيارة الوثائق الكاملة الخاصة بنا.

المساهمة

نحن نرحب بالمساهمات! يرجى الاطلاع على دليل المساهمة لدينا لمزيد من التفاصيل.

رخصة

Stepperize مرخص من معهد ماساتشوستس للتكنولوجيا.