onborda 다운로드 - onborda 소스 코드 다운로드

onborda

AI 소스 코드

v.1.2.5

다운로드

Onborda -Next.js 온 보딩 흐름

Onborda는 가벼운 온 보딩 흐름으로 애니메이션에 프레이머 모션을 사용하고 스타일링을위한 테일 윈드가 있습니다. 최신 웹 애플리케이션에 Shadcn/UI와 쉽게 사용할 수있는 완전히 사용자 정의 가능한 포인터 (툴팁).

데모 -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 >

테일 윈드 구성

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 객체를 반환하면 방향은 STEPS Side Prop에 의해 제어됩니다.

 "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`	선택 과목. 기본 카드를 사용하는 경우 제어 버튼 (Next, Prev)이 표시되어야하는지 결정합니다.
`pointerPadding`	`number`	선택 과목. 대상 요소를 강조하는 포인터 (키홀) 주위의 패딩.
`pointerRadius`	`number`	선택 과목. 대상 요소를 강조하는 포인터 (Keyhole)의 테두리-라디우스.
`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 >