onborda

onborda - next.js onboarding flow

Onborda เป็นกระแสการทำงานที่มีน้ำหนักเบาซึ่งใช้ Framer-Motion สำหรับแอนิเมชั่นและ tailwindcss สำหรับการจัดแต่งทรงผม พอยน์เตอร์ที่ปรับแต่งได้อย่างสมบูรณ์ (คำแนะนำเครื่องมือ) ที่สามารถใช้กับ ShadCN/UI ได้อย่างง่ายดายสำหรับเว็บแอปพลิเคชันที่ทันสมัย

• ตัวอย่าง - onborda.vercel.app
• พื้นที่เก็บข้อมูลสาธิต

เริ่มต้น

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

global layout.tsx

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

ส่วนประกอบ & page.tsx

กำหนดเป้าหมายอะไรก็ได้ในแอพของคุณโดยใช้แอตทริบิวต์ Elements id

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

config tailwind

Tailwind CSS จะต้องสแกนโมดูลโหนดเพื่อรวมคลาสที่ใช้ ดูการกำหนดค่าพา ธ ต้นทางสำหรับข้อมูลเพิ่มเติมเกี่ยวกับหัวข้อนี้

หมายเหตุ _ คุณต้องการสิ่งนี้เฉพาะในกรณีที่คุณ ไม่ได้ใช้ ส่วนประกอบที่กำหนดเอง

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

การ์ดที่กำหนดเอง

หากคุณต้องการการควบคุมการออกแบบการ์ดมากขึ้นหรือต้องการสร้างส่วนประกอบที่กำหนดเองโดยสิ้นเชิงคุณสามารถทำได้อย่างง่ายดาย

ข้อต่อ	พิมพ์	คำอธิบาย
step	Object	วัตถุ Step ปัจจุบันจากอาร์เรย์ขั้นตอนของคุณรวมถึงเนื้อหาชื่อ ฯลฯ
currentStep	number	ดัชนีของขั้นตอนปัจจุบันในอาร์เรย์ขั้นตอน
totalSteps	number	จำนวนขั้นตอนทั้งหมดในกระบวนการ onboarding
nextStep		ฟังก์ชั่นเพื่อก้าวไปสู่ขั้นตอนต่อไปในกระบวนการ onboarding
prevStep		ฟังก์ชั่นเพื่อกลับไปที่ขั้นตอนก่อนหน้าในกระบวนการ onboarding
arrow		ส่งคืนวัตถุ SVG การปฐมนิเทศจะถูกควบคุมโดย Prop ขั้นตอนด้าน

 "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 ms ก่อนที่จะตั้งค่าขั้นตอนต่อไปจะมีการเพิ่มฟังก์ชั่นในไม่ช้าเพื่อควบคุมการหน่วงเวลาในกรณีที่แอปพลิเคชันของคุณโหลดช้ากว่านี้

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	ไม่จำเป็น. ควบคุมว่าการซ้อนทับ onboarding ควรมีการโต้ตอบหรือไม่ ค่าเริ่มต้นเป็น false
steps	Array[]	อาร์เรย์ของวัตถุ Step ที่กำหนดแต่ละขั้นตอนของกระบวนการ onboarding
showOnborda	boolean	ไม่จำเป็น. ควบคุมการมองเห็นการซ้อนทับ onboarding เช่น หากผู้ใช้เป็นผู้เยี่ยมชมครั้งแรก ค่าเริ่มต้นเป็น false
shadowRgb	string	ไม่จำเป็น. ค่า RGB สำหรับสีเงารอบพื้นที่เป้าหมาย ค่าเริ่มต้นเป็นสีดำ "0,0,0"
shadowOpacity	string	ไม่จำเป็น. ค่าความทึบสำหรับเงารอบ ๆ พื้นที่เป้าหมาย ค่าเริ่มต้นเป็น "0.2"
customCard	React.ReactNode	ไม่จำเป็น. การ์ดที่กำหนดเอง (หรือคำแนะนำเครื่องมือ) ที่สามารถใช้เพื่อแทนที่การ์ด tailwindcss เริ่มต้น
cardTransition	Transition	การเปลี่ยนแปลงระหว่างขั้นตอนนั้นเป็นของการเปลี่ยนประเภทจาก Framer-Motion ดูเอกสารการเปลี่ยนแปลงสำหรับข้อมูลเพิ่มเติม ตัวอย่าง: {{ type: "spring" }}

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