onborda

Onborda - flux d'intégration next.js

Onborda est un flux d'intégration léger qui utilise le mouvement de crampons pour les animations et les windcss de tailwindcss. Des pointeurs entièrement personnalisables (info-bulleurs) qui peuvent facilement être utilisés avec ShadCN / UI pour les applications Web modernes.

• Démo - onborda.vercel.app
• Référentiel de démonstration

Commencer

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

Global layout.tsx

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

Composants et page.tsx

Target n'importe quoi dans votre application à l'aide de l'attribut id Elements.

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

Configuration de vent arrière

Tailwind CSS devra scanner le module de nœud afin d'inclure les classes utilisées. Voir Configuration des chemins source pour plus d'informations sur ce sujet.

Remarque _ Vous ne nécessitez cela que si vous n'utilisez pas de composant personnalisé.

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

Carte personnalisée

Si vous avez besoin d'un plus grand contrôle sur la conception de la carte ou si vous souhaitez simplement créer un composant totalement personnalisé, vous pouvez le faire facilement.

Soutenir	Taper	Description
step	Object	L'objet Step actuel de votre tableau de pas, y compris le contenu, le titre, etc.
currentStep	number	L'indice de l'étape actuelle dans le tableau des étapes.
totalSteps	number	Le nombre total d'étapes dans le processus d'intégration.
nextStep		Une fonction pour passer à l'étape suivante du processus d'intégration.
prevStep		Une fonction pour revenir à l'étape précédente du processus d'intégration.
arrow		Renvoie un objet SVG, l'orientation est contrôlée par l'hélice latérale des étapes

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

Étapes

Les étapes ont changé depuis Onborda v1.2.3 et prend désormais en charge plusieurs "visites", vous avez donc la possibilité de créer des visites de produits multiples si vous en avez besoin! Le format d'étape d'origine reste mais avec un contenu supplémentaire comme indiqué dans l'exemple ci-dessous!

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

Objet étape

Soutenir	Taper	Description
icon	React.ReactNode , string , null	Facultatif. Une icône ou un élément à afficher à côté du titre de pas.
title	string	Le titre de votre étape
content	React.ReactNode	Le contenu ou le corps principal de l'étape.
selector	string	Une chaîne utilisée pour cibler un id auquel cette étape fait référence.
side	"top" , "bottom" , "left" , "right"	Facultatif. Détermine où l'info-bulle doit apparaître par rapport au sélecteur.
showControls	boolean	Facultatif. Détermine si les boutons de contrôle (Suivant, PREV) doivent être affichés si vous utilisez la carte par défaut.
pointerPadding	number	Facultatif. Le rembourrage autour du pointeur (trou de serrure) met en évidence l'élément cible.
pointerRadius	number	Facultatif. Le rayon frontalier du pointeur (trou de serrure) mettant en évidence l'élément cible.
nextRoute	string	Facultatif. L'itinéraire pour accéder à l'utilisation next/navigation lors du passage à l'étape suivante.
prevRoute	string	Facultatif. L'itinéraire pour accéder à l'utilisation de next/navigation lors du passage à l'étape précédente.

Remarque nextRoute et prevRoute ont un délai 500 ms avant de définir l'étape suivante, une fonction sera ajoutée bientôt pour contrôler le retard au cas où votre application se charge plus lentement que celle-ci.

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

Accessoires Onborda

Propriété	Taper	Description
children	React.ReactNode	Votre site Web ou votre contenu d'application.
interact	boolean	Facultatif. Contrôle si la superposition intégrée doit être interactive. Par défaut est false .
steps	Array[]	Un tableau d'objets Step définissant chaque étape du processus d'intégration.
showOnborda	boolean	Facultatif. Contrôle la visibilité de la superposition d'intégration, par exemple. Si l'utilisateur est un premier visiteur. Par défaut est false .
shadowRgb	string	Facultatif. Les valeurs RVB pour la couleur de l'ombre entourant la zone cible. Par défaut est noir "0,0,0" .
shadowOpacity	string	Facultatif. La valeur d'opacité pour l'ombre entourant la zone cible. Par défaut "0.2"
customCard	React.ReactNode	Facultatif. Une carte personnalisée (ou une info-bulle) qui peut être utilisée pour remplacer la carte TailwindCSS par défaut.
cardTransition	Transition	Les transitions entre les étapes sont de la transition de type de Framer-Motion, voir les documents de transition pour plus d'informations. Exemple: {{ type: "spring" }} .

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