onborda下载 - onborda源代码下载

onborda

Ai源码

v.1.2.5

下载

Onborda -Next.js入职

Onborda是一种轻巧的入职流，它利用框架动画进行动画和尾翼进行样式。完全可自定义的指针（工具提示）可以与ShadCN/UI轻松用于现代Web应用程序。

演示 - onborda.vercel.app
演示存储库

入门

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

全局`layout.tsx`

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

组件和`page.tsx`

使用元素id属性对您的应用中的任何内容进行定位。

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

尾风配置

尾风CSS需要扫描节点模块，以包括所使用的类。有关此主题的更多信息，请参见配置源路径。

注意_只有在您不使用自定义组件时才需要此。

 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`	选修的。如果使用默认卡，则确定是否应显示控制按钮（下一个，上一PEP）。
`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道具

财产	类型	描述
`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 >