KRDS React

패널 Panel ​

패널은 본문 콘텐츠의 섹션이나 일부 요소에 대한 개념/용어 설명, 옵션의 구성, 이용 방법 등과 관련된 정보나 도움말, 따라하기 콘텐츠를 제공하는 사이드 패널이다.

KRDS 도움 패널KRDS 따라하기 패널

도움 패널 ​

새 창에서 보기
tsx
import { HelpPanel } from '@krds.ui/react'

export default function HelpPanelDemo() {
  return <HelpPanel defaultOpen>신청서 작성 도움말</HelpPanel>
}

따라하기 패널 ​

새 창에서 보기
tsx
import { TutorialPanel } from '@krds.ui/react'

export default function TutorialPanelDemo() {
  return (
    <TutorialPanel isOpen>
      <TutorialPanel.Container>
        <TutorialPanel.HelpContent>신청서 작성 도움말</TutorialPanel.HelpContent>
      </TutorialPanel.Container>
    </TutorialPanel>
  )
}

HelpPanel ​

Props

이름타입기본값설명
isOpenboolean-도움말 패널 열림 상태
defaultOpenbooleanfalse비제어 상태에서 사용할 초기 열림 상태
onOpenChange((isOpen: boolean) => void)-도움말 패널 열림/닫힘 상태 변경 핸들러
childrenReactNode접어두기도움말 패널 내용

TutorialPanel ​

Props

이름타입기본값설명
isOpenboolean-
onOpenChange((isOpen: boolean) => void)-
activeTab"help" | "tutorial"-
defaultActiveTab"help" | "tutorial"-
onTabChange((tab: "help" | "tutorial") => void)-