onborda

Onborda - next.js поток адаптации

Onborda-это легкий поток адаптации, который использует фреймер-двигатель для анимации и Tailwindcss для стиля. Полностью настраиваемые указатели (подсказки), которые можно легко использовать с Shadcn/UI для современных веб -приложений.

• Демо - onborda.vercel.app
• Демонстрационная репозитория

Начиная

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

Global layout.tsx

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

Компоненты и page.tsx

Нацелитесь на все в вашем приложении, используя атрибут id Elements.

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

Конфигурация с ветром

CSS Tail Wind должен будет сканировать модуль узла, чтобы включить используемые классы. См. Настройка пути источника для получения дополнительной информации по этой теме.

Примечание _ Вы требуете этого, только если вы не используете пользовательский компонент.

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

Пользовательская карта

Если вам требуется больший контроль над дизайном карты или просто хотите создать совершенно пользовательский компонент, вы можете сделать это легко.

Проп	Тип	Описание
step	Object	Объект текущего Step из вашего массива шагов, включая контент, заголовок и т. Д.
currentStep	number	Индекс текущего шага в массиве шагов.
totalSteps	number	Общее количество шагов в процессе адаптации.
nextStep		Функция для продвижения к следующему шагу в процессе адаптации.
prevStep		Функция вернуться к предыдущему шагу в процессе адаптации.
arrow		Возвращает объект 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 >
  )
}

Шаги объект

Шаги изменились с тех пор, как Onborda V1.2.3 и теперь полностью поддерживает несколько «туров», поэтому у вас есть возможность создать многократные туры по продукту, если вам понадобится! Оригинальный формат шага остается, но с некоторым дополнительным контентом, как показано в примере ниже!

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

Шаг объект

Проп	Тип	Описание
icon	React.ReactNode , string , null	Необязательный. Значок или элемент для отображения вместе с заголовком шага.
title	string	Название вашего шага
content	React.ReactNode	Основное содержание или тело шага.
selector	string	Строка, используемая для нацеливания на id , на который ссылается этот шаг.
side	"top" , "bottom" , "left" , "right"	Необязательный. Определяет, где должна появляться всплывающая подсказка относительно селектора.
showControls	boolean	Необязательный. Определяет, следует ли отображаться кнопки управления (далее, PREV), если использование карты по умолчанию.
pointerPadding	number	Необязательный. Заполнение вокруг указателя (замочная скважина), выделяющая целевой элемент.
pointerRadius	number	Необязательный. Граница-радис указателя (замочная скважина), выделяющий целевой элемент.
nextRoute	string	Необязательный. Маршрут для перемещения к использованию next/navigation при переходе на следующий шаг.
prevRoute	string	Необязательный. Маршрут для перемещения к использованию next/navigation при переходе на предыдущий шаг.

Примечание. Как nextRoute , так и prevRoute имеют задержку 500 мс перед установкой следующего шага, скоро будет добавлена функция для управления задержкой в случае, если ваше приложение загружается медленнее, чем эта.

Пример 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 Reps

Свойство	Тип	Описание
children	React.ReactNode	Ваш сайт или контент приложения.
interact	boolean	Необязательный. Управляют, должен ли наложение на адаптацию быть интерактивным. По умолчанию false .
steps	Array[]	Массив Step объектов, определяющих каждый шаг процесса адаптации.
showOnborda	boolean	Необязательный. Управляет видимостью наложения адаптации, например. Если пользователь впервые посетитель. По умолчанию false .
shadowRgb	string	Необязательный. Значения RGB для цвета тени, окружающего целевую область. По умолчанию черный "0,0,0" .
shadowOpacity	string	Необязательный. Значение непрозрачности для тени, окружающей целевую область. По умолчанию "0.2"
customCard	React.ReactNode	Необязательный. Пользовательская карта (или подсказка), которую можно использовать для замены карты Tailwindcss по умолчанию.
cardTransition	Transition	Переходы между шагами являются типовым переходом от фреймерного движения, см. Документы о переходе для получения дополнительной информации. Пример: {{ type: "spring" }} .

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