onborda

Onborda - Next.js Onboarding Flow

Onborda هو تدفق خفيف الوزن على متن الطائرة يستخدم حركة الإطار للرسوم المتحركة و tailwindcss للتصميم. مؤشرات قابلة للتخصيص بالكامل (تلميحات الأدوات) التي يمكن استخدامها بسهولة مع ShadCN/UI لتطبيقات الويب الحديثة.

• Demo - Onborda.vercel.app
• المستودع التجريبي

ابدء

 # npm
npm i onborda
# pnpm
pnpm add onborda
# yarn
yarn add onborda

layout.tsx عالمي

 < OnbordaProvider >
  < Onborda steps = { steps } >
    { children }
  </ Onborda >
 </ OnbordaProvider >

مكونات و page.tsx

استهدف أي شيء في تطبيقك باستخدام سمة id العناصر.

 < div id = "onborda-step1" > Onboard Step </ div >

تكوين Tailwind

ستحتاج CSS Tailwind إلى مسح وحدة العقدة من أجل تضمين الفئات المستخدمة. راجع تكوين مسارات المصدر لمزيد من المعلومات حول هذا الموضوع.

ملاحظة _ أنت تتطلب هذا فقط إذا كنت لا تستخدم مكونًا مخصصًا.

 const config : Config = {
  content : [
    './node_modules/onborda/dist/**/*.{js,ts,jsx,tsx}' // Add this
  ]
}

بطاقة مخصصة

إذا كنت تحتاج إلى تحكم أكبر في تصميم البطاقة أو ترغب ببساطة في إنشاء مكون مخصص تمامًا ، فيمكنك القيام بذلك بسهولة.

دعم	يكتب	وصف
step	Object	كائن Step الحالي من مجموعة الخطوات الخاصة بك ، بما في ذلك المحتوى ، والعنوان ، إلخ.
currentStep	number	فهرس الخطوة الحالية في مجموعة الخطوات.
totalSteps	number	إجمالي عدد الخطوات في عملية التنقل.
nextStep		وظيفة للتقدم إلى الخطوة التالية في عملية التنقل.
prevStep		وظيفة للعودة إلى الخطوة السابقة في عملية التنقل.
arrow		إرجاع كائن SVG ، يتم التحكم في الاتجاه بواسطة خطوات الجانب الدعامة

 "use client"
import type { CardComponentProps } from "onborda" ;

export const CustomCard = ( {
  step ,
  currentStep ,
  totalSteps ,
  nextStep ,
  prevStep ,
  arrow ,
} : CardComponentProps ) => {
  return (
    < div >
      < h1 > { step . icon } { step . title } </ h1 >
      < h2 > { currentStep } of { totalSteps } </ h2 >
      < p > { step . content } </ p >
      < button onClick = { prevStep } > Previous </ button >
      < button onClick = { nextStep } > Next </ button >
      { arrow }
    </ div >
  )
}

كائن الخطوات

لقد تغيرت الخطوات منذ Onborda v1.2.3 ، وهي الآن تدعم "جولات" متعددة ، لذا لديك خيار إنشاء جولات منتجات متعددة في حالة حاجة! يبقى تنسيق الخطوة الأصلي ولكن مع بعض المحتوى الإضافي كما هو موضح في المثال أدناه!

 {
  tour : "firstyour" ,
  steps : [
    Step
  ] ,
  tour : "secondtour" ,
  steps : [
    Step
  ]
}

كائن الخطوة

دعم	يكتب	وصف
icon	React.ReactNode ، string ، null	خياري. أيقونة أو عنصر لعرضه جنبًا إلى جنب مع عنوان الخطوة.
title	string	عنوان خطوتك
content	React.ReactNode	المحتوى الرئيسي أو الجسم للخطوة.
selector	string	سلسلة تستخدم لاستهداف id تشير إلى هذه الخطوة.
side	"top" ، "bottom" ، "left" ، "right"	خياري. يحدد المكان الذي يجب أن تظهر فيه تلميح الأدوات بالنسبة إلى المحدد.
showControls	boolean	خياري. يحدد ما إذا كان يجب عرض أزرار التحكم (التالي ، السابق) إذا كنت تستخدم البطاقة الافتراضية.
pointerPadding	number	خياري. الحشو حول المؤشر (ثقب المفتاح) يسلط الضوء على العنصر الهدف.
pointerRadius	number	خياري. يبرز حدود المؤشر (ثقب المفتاح) العنصر المستهدف.
nextRoute	string	خياري. الطريق للتنقل إلى استخدام next/navigation عند الانتقال إلى الخطوة التالية.
prevRoute	string	خياري. الطريق للتنقل إلى استخدام next/navigation عند الانتقال إلى الخطوة السابقة.

لاحظ أن كل من nextRoute و prevRoute لديهما تأخير 500 مللي ثانية قبل تحديد الخطوة التالية ، وسيتم إضافة وظيفة قريبًا للتحكم في التأخير في حالة تحميل التطبيق الخاص بك أبطأ من هذا.

مثال steps

 {
  tour : "firsttour" ,
  steps : [
    {
      icon : < > </ > ,
      title : "Tour 1, Step 1" ,
      content : < > First tour, first step </ > ,
      selector : "#tour1-step1" ,
      side : "top" ,
      showControls : true ,
      pointerPadding : 10 ,
      pointerRadius : 10 ,
      nextRoute : "/foo" ,
      prevRoute : "/bar"
    }
    . . .
  ] ,
  tour : "secondtour" ,
  steps : [
    icon : < > </ > ,
      title : "Second tour, Step 1" ,
      content : < > Second tour, first step! </ > ,
      selector : "#onborda-step1" ,
      side : "top" ,
      showControls : true ,
      pointerPadding : 10 ,
      pointerRadius : 10 ,
      nextRoute : "/foo" ,
      prevRoute : "/bar"
  ]
}

الدعائم Onborda

ملكية	يكتب	وصف
children	React.ReactNode	موقع الويب الخاص بك أو محتوى التطبيق.
interact	boolean	خياري. يتحكم في ما إذا كان يجب أن يكون التراكب على متن الطائرة تفاعلية. الإعدادات الافتراضية إلى false .
steps	Array[]	مجموعة من كائنات Step التي تحدد كل خطوة من عملية التشغيل.
showOnborda	boolean	خياري. يتحكم في رؤية تراكب على متن الطائرة ، على سبيل المثال. إذا كان المستخدم هو زائر لأول مرة. الإعدادات الافتراضية إلى false .
shadowRgb	string	خياري. قيم RGB للون الظل المحيط بالمنطقة المستهدفة. الإعدادات الافتراضية إلى الأسود "0,0,0" .
shadowOpacity	string	خياري. قيمة العتامة للظل المحيط بالمنطقة المستهدفة. الإعدادات الافتراضية إلى "0.2"
customCard	React.ReactNode	خياري. بطاقة مخصصة (أو تلميح الأدوات) يمكن استخدامها لاستبدال بطاقة TailwindCSS الافتراضية.
cardTransition	Transition	التحولات بين الخطوات من النوع الانتقالي من حركة الإطار ، راجع مستندات الانتقال لمزيد من المعلومات. مثال: {{ type: "spring" }} .

 < Onborda
  steps = { steps }
  showOnborda = { true }
  shadowRgb = "55,48,163"
  shadowOpacity = "0.8"
  cardComponent = { CustomCard }
  cardTransition = { { duration : 2 , type : "tween" } }
>
  { children }
</ Onborda >