디스클로저

디스클로저는 특정한 정보/컨트롤/섹션에 관련된 부가적인 정보를 표시하거나 숨기는 데 사용되는 요소이다.

사용 지침

FAQ·약관 본문처럼 보조 정보를 필요한 사람만 볼 수 있게 숨겨 둘 때 사용하고, aria-expanded 속성을 갱신해 스크린 리더 사용자에게도 펼침 상태를 전달합니다.

예제

Default

examples/disclosure/DisclosureDefault.tsx

import { Disclosure, DisclosureTrigger, DisclosureContent } from "@/components/ui/dynamic/disclosure"

export default function DisclosureDefault() {

Default Expanded

서비스 이용 안내

본 서비스는 정부24를 통해 제공되는 전자정부 서비스입니다.

이용 시간: 24시간 연중무휴
문의 전화: 1588-2188
홈페이지: www.gov.kr

examples/disclosure/DisclosureDefaultExpanded.tsx

import { Disclosure, DisclosureTrigger, DisclosureContent } from "@/components/ui/dynamic/disclosure"

export default function DisclosureDefaultExpanded() {

Multiple Disclosures

두 번째 콘텐츠

이 디스클로저는 기본적으로 확장된 상태입니다.

examples/disclosure/DisclosureMultipleDisclosures.tsx

import { Disclosure, DisclosureTrigger, DisclosureContent } from "@/components/ui/dynamic/disclosure"

export default function DisclosureMultipleDisclosures() {

Controlled Example

현재 상태: 닫힘

examples/disclosure/DisclosureControlledExample.tsx

"use client"

import * as React from "react"

With Rich Content

서비스 이용 절차

회원가입 및 로그인
서비스 선택
필요 정보 입력
신청 완료

필요 서류

신분증 사본
증명사진 1매
기타 관련 서류

주의사항: 모든 서류는 최근 3개월 이내 발급된 것이어야 합니다.

examples/disclosure/DisclosureWithRichContent.tsx

import { Disclosure, DisclosureTrigger, DisclosureContent } from "@/components/ui/dynamic/disclosure"

export default function DisclosureWithRichContent() {

속성

이름	타입	기본값	설명
aria-label	string	—	Defines a string value that labels the current element. @see aria-labelledby.
className	string	—	—
defaultOpen	boolean	false	—
id	string	—	—
onClick	MouseEventHandler<HTMLDivElement>	—	—
onOpenChange	((open: boolean) => void)	—	—
open	boolean	—	—
style	CSSProperties	—	—
tabIndex	number	—	—

달력 모달