onbordaダウンロードonbordaソースコードのダウンロード

onborda

AI ソースコード

v.1.2.5

ダウンロード

onborda -next.jsオンボーディングフロー

Onbordaは、アニメーションにFramer-MotionとスタイリングにTailwindcssを利用する軽量のオンボーディングフローです。最新のWebアプリケーション用に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`

Elements id属性を使用してアプリ内のすべてをターゲットにします。

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

Tailwind Config

Tailwind 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`	オプション。デフォルトのカードを使用している場合、コントロールボタン（次、以前）を表示するかどうかを判断します。
`pointerPadding`	`number`	オプション。ターゲット要素を強調表示するポインター（キーホール）の周りのパディング。
`pointerRadius`	`number`	オプション。ターゲット要素を強調するポインター（キーホール）の境界線（キーホール）。
`nextRoute`	`string`	オプション。次のステップに移動するときに`next/navigation`を使用するためのナビゲートするルート。
`prevRoute`	`string`	オプション。前のステップに移動するときに`next/navigation`を使用するためのナビゲートするルート。

NextrouteとPreprouteの両方に500ミリ秒の遅延があり、次のステップを設定する前に、アプリケーションがこれより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`	ステップ間の遷移は、Framer-Motionからのタイプの移行です。詳細については、遷移ドキュメントを参照してください。例： `{{ type: "spring" }}` 。

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