onborda

Onborda - Next.js Onboarding Flow

Onborda adalah aliran onboarding yang ringan yang memanfaatkan gerak-gerak untuk animasi dan tailwindcss untuk gaya. Pointer (tooltips) yang sepenuhnya dapat disesuaikan yang dapat dengan mudah digunakan dengan Shadcn/UI untuk aplikasi web modern.

• Demo - Onborda.vercel.app
• Repositori demo

Memulai

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

Global layout.tsx

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

Komponen & page.tsx

Targetkan apa pun di aplikasi Anda menggunakan atribut id Elements.

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

Konfigurasi Tailwind

Tailwind CSS perlu memindai modul node untuk memasukkan kelas yang digunakan. Lihat Mengkonfigurasi jalur sumber untuk informasi lebih lanjut tentang topik ini.

Catatan _Anda hanya memerlukan ini jika Anda tidak menggunakan komponen khusus.

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

Kartu khusus

Jika Anda memerlukan kontrol yang lebih besar atas desain kartu atau hanya ingin membuat komponen yang sepenuhnya khusus maka Anda dapat melakukannya dengan mudah.

Menopang	Jenis	Keterangan
step	Object	Objek Step saat ini dari array langkah Anda, termasuk konten, judul, dll.
currentStep	number	Indeks langkah saat ini dalam array langkah.
totalSteps	number	Jumlah total langkah dalam proses onboarding.
nextStep		Fungsi untuk maju ke langkah berikutnya dalam proses onboarding.
prevStep		Fungsi untuk kembali ke langkah sebelumnya dalam proses onboarding.
arrow		Mengembalikan objek SVG, orientasi dikendalikan oleh langkah -langkah prop sisi

 "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 >
  )
}

Objek Langkah

Langkah -langkah telah berubah sejak Onborda v1.2.3 dan sekarang sepenuhnya mendukung beberapa "tur" sehingga Anda memiliki opsi untuk membuat tur produk multple jika Anda perlu! Format langkah asli tetap ada tetapi dengan beberapa konten tambahan seperti yang ditunjukkan pada contoh di bawah ini!

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

Objek Langkah

Menopang	Jenis	Keterangan
icon	React.ReactNode , string , null	Opsional. Ikon atau elemen untuk ditampilkan di samping judul langkah.
title	string	Judul Langkah Anda
content	React.ReactNode	Konten utama atau tubuh langkah.
selector	string	String yang digunakan untuk menargetkan id yang dirujuk oleh langkah ini.
side	"top" , "bottom" , "left" , "right"	Opsional. Menentukan di mana tooltip akan muncul relatif terhadap pemilih.
showControls	boolean	Opsional. Menentukan apakah tombol kontrol (selanjutnya, sebelumnya) harus ditampilkan jika menggunakan kartu default.
pointerPadding	number	Opsional. Bantalan di sekitar pointer (lubang kunci) yang menyoroti elemen target.
pointerRadius	number	Opsional. Radius perbatasan pointer (lubang kunci) yang menyoroti elemen target.
nextRoute	string	Opsional. Rute untuk menavigasi menggunakan next/navigation saat pindah ke langkah berikutnya.
prevRoute	string	Opsional. Rute untuk menavigasi menggunakan next/navigation saat pindah ke langkah sebelumnya.

Perhatikan baik nextRoute dan prevRoute memiliki penundaan 500 ms sebelum mengatur langkah berikutnya, suatu fungsi akan segera ditambahkan untuk mengontrol keterlambatan jika aplikasi Anda memuat lebih lambat dari ini.

Contoh 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"
  ]
}

Props Onborda

Milik	Jenis	Keterangan
children	React.ReactNode	Situs web atau konten aplikasi Anda.
interact	boolean	Opsional. Mengontrol apakah overlay orientasi harus interaktif. Default ke false .
steps	Array[]	Array objek Step yang mendefinisikan setiap langkah dari proses onboarding.
showOnborda	boolean	Opsional. Mengontrol visibilitas overlay onboarding, misalnya. Jika pengguna adalah pengunjung pertama kali. Default ke false .
shadowRgb	string	Opsional. Nilai RGB untuk warna bayangan yang mengelilingi area target. Default menjadi hitam "0,0,0" .
shadowOpacity	string	Opsional. Nilai opacity untuk bayangan di sekitar area target. Default ke "0.2"
customCard	React.ReactNode	Opsional. Kartu khusus (atau tooltip) yang dapat digunakan untuk mengganti kartu TailWindCSS default.
cardTransition	Transition	Transisi antara langkah-langkah adalah jenis transisi dari gerak-kusut, lihat dokumen transisi untuk info lebih lanjut. Contoh: {{ type: "spring" }} .

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