맥락적 도움말 Contextual help

컴포넌트 주변에 배치되어 해당 컴포넌트의 상태나 관련된 상세 정보를 제공하는 컴포넌트이다. 맥락적 도움말은 정보 아이콘이나 도움 아이콘 버튼을 통해 사용자가 요청하는 경우에만 화면에 표시된다.

기본

tsx

import { ContextualHelp } from '@krds.ui/react'

export default function ContextualHelpDemo() {
  return <ContextualHelp title="발급 용도">제출할 기관을 선택하세요.</ContextualHelp>
}

ContextualHelp

Props

이름	타입	기본값	설명
`label`	`string`	-	도움말 라벨 텍스트
`title` (필수)	`string`	-	팝오버 제목
`children` (필수)	`ReactNode`	-	팝오버 내용
`position`	`ContextualHelpPosition`	`top`	팝오버 위치 ('top' \| 'bottom')
`alignment`	`ContextualHelpAlignment`	`left`	팝오버 정렬 ('left' \| 'center' \| 'right')
`open`	`boolean`	-	팝오버 열림/닫힘 상태 (제어모드)
`defaultOpen`	`boolean`	`false`	기본 팝오버 열림/닫힘 상태 (비제어모드)
`onOpenChange`	`((open: boolean) => void)`	-	팝오버 상태 변경 핸들러
`className`	`string`	-	사용자 정의 클래스명

맥락적 도움말 Contextual help ​

기본 ​

ContextualHelp ​

Props

맥락적 도움말 Contextual help

기본

ContextualHelp