onborda

Onborda - Next.js Onboarding Flow

Onborda ist ein leichter Aufrass, der Framer-Motion für Animationen und Rückenwindcss für das Styling verwendet. Vollständig anpassbare Zeiger (Tooltips), die problemlos mit Shadcn/UI für moderne Webanwendungen verwendet werden können.

• Demo - Onborda.vercel.App
• Demo -Repository

Erste Schritte

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

Global layout.tsx

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

Komponenten & page.tsx

Zielen Sie in Ihrer App mithilfe des Elements id -Attributs etwas an.

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

Rückenwindkonfiguration

Rückenwind -CSS muss das Knotenmodul scannen, um die verwendeten Klassen einzuschließen. Weitere Informationen zu diesem Thema finden Sie unter Konfigurieren von Quellpfaden.

HINWEIS _SYOU IST NUR, wenn Sie keine benutzerdefinierte Komponente verwenden .

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

Benutzerdefinierte Karte

Wenn Sie eine größere Kontrolle über das Kartendesign benötigen oder einfach eine vollständig benutzerdefinierte Komponente erstellen möchten, können Sie dies einfach tun.

Stütze	Typ	Beschreibung
step	Object	Das aktuelle Step aus Ihrem Schritte -Array, einschließlich Inhalt, Titel usw.
currentStep	number	Der Index des aktuellen Schritts im Schritte -Array.
totalSteps	number	Die Gesamtzahl der Schritte im Onboarding -Prozess.
nextStep		Eine Funktion zum nächsten Schritt im Onboarding -Prozess.
prevStep		Eine Funktion, um zum vorherigen Schritt im Onboarding -Prozess zurückzukehren.
arrow		Gibt ein 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 >
  )
}

Schritte Objekt

Die Schritte haben sich seit Onborda v1.2.3 geändert und unterstützt nun mehrere "Touren" voll und ganz, sodass Sie die Möglichkeit haben, mehr Produkttouren zu erstellen, falls Sie es benötigen sollten! Das ursprüngliche Schrittformat bleibt jedoch mit einigen zusätzlichen Inhalten, wie im folgenden Beispiel gezeigt!

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

Stiefungsobjekt

Stütze	Typ	Beschreibung
icon	React.ReactNode , string , null	Optional. Ein Symbol oder ein Element, das neben dem Schritttitel angezeigt werden soll.
title	string	Der Titel Ihres Schritts
content	React.ReactNode	Der Hauptgehalt oder der Körper des Schrittes.
selector	string	Eine id , mit der sich dieser Schritt bezieht.
side	"top" , "bottom" , "left" , "right"	Optional. Bestimmt, wo der Tooltip relativ zum Selektor erscheinen soll.
showControls	boolean	Optional. Ermittelt, ob Steuertasten (als nächstes, vorab) angezeigt werden sollten, wenn die Standardkarte verwendet wird.
pointerPadding	number	Optional. Die Polsterung um den Zeiger (Schlüsselloch) hebt das Zielelement hervor.
pointerRadius	number	Optional. Der Grenzradius des Zeigers (Schlüsselloch), das das Zielelement hervorhebt.
nextRoute	string	Optional. Die Route zur Navigation zur Verwendung von next/navigation wenn Sie zum nächsten Schritt wechseln.
prevRoute	string	Optional. Die Route zur Navigation zur Verwendung von next/navigation wenn Sie zum vorherigen Schritt wechseln.

Beachten Sie , dass sowohl nextRoute als auch prevRoute eine Verzögerung 500 ms haben

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 -Requisiten

Eigentum	Typ	Beschreibung
children	React.ReactNode	Ihre Website oder Ihre Anwendungsinhalte.
interact	boolean	Optional. Steuert, ob das Onboarding -Overlay interaktiv sein sollte. Standardmäßig false .
steps	Array[]	Ein Array von Step , die jeden Schritt des Onboarding -Vorgangs definieren.
showOnborda	boolean	Optional. Steuert die Sichtbarkeit des Onboarding -Overlays, z. Wenn der Benutzer ein erstmaliger Besucher ist. Standardmäßig false .
shadowRgb	string	Optional. Die RGB -Werte für die Schattenfarbe, die den Zielbereich umgibt. Standardeinstellungen zu schwarz "0,0,0" .
shadowOpacity	string	Optional. Der Deckkraftwert für den Schatten, der den Zielbereich umgibt. Standardeinstellung zu "0.2"
customCard	React.ReactNode	Optional. Eine benutzerdefinierte Karte (oder Tooltip), mit der die Standard -Tailwindcss -Karte ersetzt werden kann.
cardTransition	Transition	Übergänge zwischen Schritten sind vom Typ Übergang von Framer-Motion. Weitere Informationen finden Sie in den Übergangsdokumenten. Beispiel: {{ type: "spring" }} .

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