onborda

Onborda - Next.js Integração de fluxo

Onborda é um fluxo leve de integração que utiliza o movimento do Framer para animações e TailWindcss para estilo. Ponteiros totalmente personalizáveis (dicas de ferramentas) que podem ser facilmente usados com Shadcn/UI para aplicativos da Web modernos.

• Demo - onborda.vercel.app
• Repositório de demonstração

Começando

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

Global layout.tsx

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

Componentes & page.tsx

Alvo qualquer coisa em seu aplicativo usando o atributo id elementos.

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

Config do Tailwind

CSS do Tailwind precisará digitalizar o módulo do nó para incluir as classes usadas. Consulte Configurando os caminhos da fonte para obter mais informações sobre este tópico.

NOTA _ Você exige apenas isso se não estiver usando um componente personalizado.

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

Cartão personalizado

Se você precisar de maior controle sobre o design do cartão ou simplesmente desejar criar um componente totalmente personalizado, poderá fazê -lo com facilidade.

Prop	Tipo	Descrição
step	Object	O objeto Step atual da sua matriz de etapas, incluindo conteúdo, título, etc.
currentStep	number	O índice da etapa atual na matriz de etapas.
totalSteps	number	O número total de etapas no processo de integração.
nextStep		Uma função para avançar para a próxima etapa no processo de integração.
prevStep		Uma função para voltar à etapa anterior no processo de integração.
arrow		Retorna um objeto SVG, a orientação é controlada pelo suporte do lado de etapas

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

Etapas objeto

As etapas mudaram desde o Onborda v1.2.3 e agora suporta vários "passeios", para que você tenha a opção de criar passeios de produtos para vários produtos, caso precisar! O formato de etapa original permanece, mas com algum conteúdo adicional, conforme mostrado no exemplo abaixo!

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

Objeto de passo

Prop	Tipo	Descrição
icon	React.ReactNode , string , null	Opcional. Um ícone ou elemento a ser exibido ao lado do título da etapa.
title	string	O título de sua etapa
content	React.ReactNode	O conteúdo principal ou o corpo da etapa.
selector	string	Uma string usada para direcionar um id ao qual esta etapa se refere.
side	"top" , "bottom" , "left" , "right"	Opcional. Determina onde a dica de ferramenta deve aparecer em relação ao seletor.
showControls	boolean	Opcional. Determina se os botões de controle (a seguir, prev) devem ser mostrados se estiver usando a placa padrão.
pointerPadding	number	Opcional. O preenchimento ao redor do ponteiro (buraco da fechadura) destacando o elemento de destino.
pointerRadius	number	Opcional. O Radio de Fronteira do Ponteiro (buraco da fechadura) destacando o elemento de destino.
nextRoute	string	Opcional. A rota para navegar para usar next/navigation ao passar para a próxima etapa.
prevRoute	string	Opcional. A rota para navegar para usar next/navigation ao passar para a etapa anterior.

Nota Tanto nextRoute quanto prevRoute têm um atraso 500 ms antes de definir a próxima etapa, uma função será adicionada em breve para controlar o atraso, caso seu aplicativo seja mais lento que isso.

steps de exemplo

 {
  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 adereços

Propriedade	Tipo	Descrição
children	React.ReactNode	Seu site ou conteúdo do aplicativo.
interact	boolean	Opcional. Controla se a sobreposição de integração deve ser interativa. Padrões para false .
steps	Array[]	Uma variedade de objetos Step que define cada etapa do processo de integração.
showOnborda	boolean	Opcional. Controla a visibilidade da sobreposição de integração, por exemplo. Se o usuário for um visitante pela primeira vez. Padrões para false .
shadowRgb	string	Opcional. Os valores de RGB para a cor das sombras ao redor da área de destino. Padrão para preto "0,0,0" .
shadowOpacity	string	Opcional. O valor da opacidade para a sombra em torno da área alvo. Padrões para "0.2"
customCard	React.ReactNode	Opcional. Uma placa personalizada (ou dica de ferramenta) que pode ser usada para substituir a placa padrão do TailWindCSS.
cardTransition	Transition	As transições entre as etapas são do tipo transição do Framer-Motion, consulte os documentos de transição para obter mais informações. Exemplo: {{ type: "spring" }} .

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