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 >