따라하기 패널

따라하기 패널은 본문 콘텐츠와 관련된 이용 방법을 실제 이용 절차에 따라 단계적으로 수행할 수 있도록 도와주며 코치마크를 실행하는 데 사용되는 사이드 패널이다.

따라하기 패널은 본문 콘텐츠와 관련된 이용 방법을 실제 이용 절차에 따라 단계적으로 수행할 수 있도록 도와주며 코치마크를 실행하는 데 사용되는 사이드 패널이다.

사용 지침

처음 서비스를 이용하는 사용자나 신규 기능 출시 시 활용하고, 다단계 진행과 "건너뛰기" 옵션을 함께 제공해 강제감 없이 학습을 유도합니다.

예제

Default

examples/tutorial-panel/TutorialPanelDefault.tsx
"use client"

import { TutorialPanel } from "@/components/ui/dynamic/tutorial-panel"

Controlled

examples/tutorial-panel/TutorialPanelControlled.tsx
"use client"

import * as React from "react"

속성

이름타입기본값설명
activeTabenum
classNamestring
defaultActiveTabenum
isOpenboolean
onOpenChange((open: boolean) => void)
onTabChange((tab: TutorialPanelTab) => void)