onborda

Onborda - Next.js Flujo de incorporación

Onborda es un flujo de incorporación liviano que utiliza Framer-Motion para animaciones y tallas para el estilo. Punteros totalmente personalizables (información sobre herramientas) que se pueden usar fácilmente con ShadCN/UI para aplicaciones web modernas.

• Demostración - onborda.vercel.app
• Repositorio de demostración

Empezando

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

Global layout.tsx

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

Componentes y page.tsx

Dirigir cualquier cosa en su aplicación utilizando el atributo id de elementos.

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

Configuración de viento de cola

Tailwind CSS necesitará escanear el módulo de nodo para incluir las clases utilizadas. Consulte Configuración de rutas de origen para obtener más información sobre este tema.

Tenga en cuenta que solo requiere esto si no está utilizando un componente personalizado.

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

Tarjeta personalizada

Si necesita un mayor control sobre el diseño de la tarjeta o simplemente desea crear un componente totalmente personalizado, entonces puede hacerlo fácilmente.

Apuntalar	Tipo	Descripción
step	Object	El objeto Step actual de su matriz de pasos, incluido contenido, título, etc.
currentStep	number	El índice del paso actual en la matriz de pasos.
totalSteps	number	El número total de pasos en el proceso de incorporación.
nextStep		Una función para avanzar al siguiente paso en el proceso de incorporación.
prevStep		Una función para volver al paso anterior en el proceso de incorporación.
arrow		Devuelve un objeto SVG, la orientación está controlada por el accesorio lateral de los pasos

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

PASA ENVÍO OBJETO

Los pasos han cambiado desde Onborda V1.2.3 y ahora admite completamente múltiples "tours" para que tenga la opción de crear tours de productos Multple si lo necesita. ¡El formato de paso original permanece pero con un contenido adicional como se muestra en el ejemplo a continuación!

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

Objeto de paso

Apuntalar	Tipo	Descripción
icon	React.ReactNode , string , null	Opcional. Un icono o elemento para mostrar junto con el título de paso.
title	string	El título de tu paso
content	React.ReactNode	El contenido principal o el cuerpo del paso.
selector	string	Una cadena utilizada para apuntar a una id a la que se refiere este paso.
side	"top" , "bottom" , "left" , "right"	Opcional. Determina dónde debe aparecer la información sobre herramientas en relación con el selector.
showControls	boolean	Opcional. Determina si los botones de control (Siguiente, PRE) deben mostrarse si usa la tarjeta predeterminada.
pointerPadding	number	Opcional. El relleno alrededor del puntero (ojo de teclado) resalta el elemento objetivo.
pointerRadius	number	Opcional. El radio fronterizo del puntero (ojo de teclado) resalta el elemento objetivo.
nextRoute	string	Opcional. La ruta para navegar a usar next/navigation al pasar al siguiente paso.
prevRoute	string	Opcional. La ruta para navegar al uso de next/navigation cuando se mueve al paso anterior.

Tenga en cuenta que tanto nextRoute como prevRoute tienen un retraso 500 ms antes de configurar el siguiente paso, pronto se agregará una función para controlar el retraso en caso de que su aplicación se cargue más lentamente que esta.

steps de ejemplo

 {
  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 de Onborda

Propiedad	Tipo	Descripción
children	React.ReactNode	Su sitio web o contenido de la aplicación.
interact	boolean	Opcional. Controla si la superposición de incorporación debe ser interactiva. El valor predeterminado es false .
steps	Array[]	Una variedad de objetos Step que definen cada paso del proceso de incorporación.
showOnborda	boolean	Opcional. Controla la visibilidad de la superposición de incorporación, por ejemplo. Si el usuario es un visitante por primera vez. El valor predeterminado es false .
shadowRgb	string	Opcional. Los valores de RGB para el color de la sombra que rodea el área objetivo. El valor predeterminado es negro "0,0,0" .
shadowOpacity	string	Opcional. El valor de opacidad para la sombra que rodea el área objetivo. El valor predeterminado es "0.2"
customCard	React.ReactNode	Opcional. Una tarjeta personalizada (o información sobre herramientas) que se puede usar para reemplazar la tarjeta TailWindcSS predeterminada.
cardTransition	Transition	Las transiciones entre los pasos son del tipo Transición de Framer-Motion, consulte los documentos de transición para obtener más información. Ejemplo: {{ type: "spring" }} .

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