Disclosure

하나의 내용을 접고 펴는 <details>.

라이브러리 전용

개요

미리보기

예시 언어동작 줄이기

읽지 않는 항목 보기

Gmail은 받은편지함과 보낸편지함만 읽어요. 스팸, 휴지통, 임시보관함은 읽지 않아요. 첨부파일은 이름만 읽고 내용은 열지 않아요. 연결을 해제하면 새로 읽는 것은 멈추고, 이미 읽은 기록을 지울지는 따로 고를 수 있어요.

오버레이는 무대 안에 비모달 정적 상태로 그립니다. 실제 동작은 트리거 버튼으로 확인하세요.

summary

headingLevel

open

name

children

예시

상태

닫힘
읽지 않는 항목 보기
Gmail은 받은편지함과 보낸편지함만 읽어요. 스팸, 휴지통, 임시보관함은 읽지 않아요. 첨부파일은 이름만 읽고 내용은 열지 않아요. 연결을 해제하면 새로 읽는 것은 멈추고, 이미 읽은 기록을 지울지는 따로 고를 수 있어요.
열림
읽지 않는 항목 보기
Gmail은 받은편지함과 보낸편지함만 읽어요. 스팸, 휴지통, 임시보관함은 읽지 않아요. 첨부파일은 이름만 읽고 내용은 열지 않아요. 연결을 해제하면 새로 읽는 것은 멈추고, 이미 읽은 기록을 지울지는 따로 고를 수 있어요.
제목(h3)
읽지 않는 항목 보기
Gmail은 받은편지함과 보낸편지함만 읽어요. 스팸, 휴지통, 임시보관함은 읽지 않아요. 첨부파일은 이름만 읽고 내용은 열지 않아요. 연결을 해제하면 새로 읽는 것은 멈추고, 이미 읽은 기록을 지울지는 따로 고를 수 있어요.

이렇게 · 이렇게 하지 않기

이렇게 추가 정보 하나를 접어 둘 때 쓴다.
이렇게 요약 줄은 펼치면 무엇이 나오는지 말한다(“읽지 않는 항목 보기”).
이렇게 하지 않기 동의에 필요한 정보는 숨기지 않는다.
이렇게 하지 않기 높이를 애니메이션하지 않는다. 내용은 즉시 나타나고 chevron만 돈다.

토큰과 속성

이름	타입	기본값	설명
`summary`	`ReactNode`	`읽지 않는 항목 보기`	요약 줄. 펼치면 무엇이 나오는지 말한다.
`headingLevel?`	`'none' \| 'h2' \| 'h3' \| 'h4'`	`none`	요약 글자를 제목으로 감싼다(Accordion은 h3).
`open?`	`boolean`	`false`	처음 열린 상태.
`name?`	`string`		같은 name인 Disclosure끼리는 하나만 열린다(네이티브 배타 열림).
`children?`	`ReactNode`	`Gmail은 받은편지함과 보낸편지함만 읽어요. 스팸, 휴지통, 임시보관함은 읽지 않아요. 첨부파일은 이름만 읽고 내용은 열지 않아요. 연결을 해제하면 새로 읽는 것은 멈추고, 이미 읽은 기록을 지울지는 따로 고를 수 있어요.`	펼쳐지는 내용.
`ref`	—	—	ref는 <details>로 전달된다.
그 밖의 속성	—	—	id, onToggle 등 네이티브 details 속성은 그대로 전달된다. className·style은 받지 않는다.

개요

미리보기

예시 언어동작 줄이기

읽지 않는 항목 보기

오버레이는 무대 안에 비모달 정적 상태로 그립니다. 실제 동작은 트리거 버튼으로 확인하세요.

summary

headingLevel

open

name

children

예시

상태

닫힘
읽지 않는 항목 보기
Gmail은 받은편지함과 보낸편지함만 읽어요. 스팸, 휴지통, 임시보관함은 읽지 않아요. 첨부파일은 이름만 읽고 내용은 열지 않아요. 연결을 해제하면 새로 읽는 것은 멈추고, 이미 읽은 기록을 지울지는 따로 고를 수 있어요.
열림
읽지 않는 항목 보기
Gmail은 받은편지함과 보낸편지함만 읽어요. 스팸, 휴지통, 임시보관함은 읽지 않아요. 첨부파일은 이름만 읽고 내용은 열지 않아요. 연결을 해제하면 새로 읽는 것은 멈추고, 이미 읽은 기록을 지울지는 따로 고를 수 있어요.
제목(h3)
읽지 않는 항목 보기
Gmail은 받은편지함과 보낸편지함만 읽어요. 스팸, 휴지통, 임시보관함은 읽지 않아요. 첨부파일은 이름만 읽고 내용은 열지 않아요. 연결을 해제하면 새로 읽는 것은 멈추고, 이미 읽은 기록을 지울지는 따로 고를 수 있어요.

이렇게 · 이렇게 하지 않기

이렇게 추가 정보 하나를 접어 둘 때 쓴다.

이렇게 요약 줄은 펼치면 무엇이 나오는지 말한다(“읽지 않는 항목 보기”).

이렇게 하지 않기 동의에 필요한 정보는 숨기지 않는다.

이렇게 하지 않기 높이를 애니메이션하지 않는다. 내용은 즉시 나타나고 chevron만 돈다.

토큰과 속성

이름	타입	기본값	설명
`summary`	`ReactNode`	`읽지 않는 항목 보기`	요약 줄. 펼치면 무엇이 나오는지 말한다.
`headingLevel?`	`'none' \| 'h2' \| 'h3' \| 'h4'`	`none`	요약 글자를 제목으로 감싼다(Accordion은 h3).
`open?`	`boolean`	`false`	처음 열린 상태.
`name?`	`string`		같은 name인 Disclosure끼리는 하나만 열린다(네이티브 배타 열림).
`children?`	`ReactNode`	`Gmail은 받은편지함과 보낸편지함만 읽어요. 스팸, 휴지통, 임시보관함은 읽지 않아요. 첨부파일은 이름만 읽고 내용은 열지 않아요. 연결을 해제하면 새로 읽는 것은 멈추고, 이미 읽은 기록을 지울지는 따로 고를 수 있어요.`	펼쳐지는 내용.
`ref`	—	—	ref는 <details>로 전달된다.
그 밖의 속성	—	—	id, onToggle 등 네이티브 details 속성은 그대로 전달된다. className·style은 받지 않는다.

개요

예시

상태

읽지 않는 항목 보기

이렇게 · 이렇게 하지 않기

토큰과 속성

접근성

함께 보기

개요

예시

상태

읽지 않는 항목 보기

이렇게 · 이렇게 하지 않기

토큰과 속성

접근성

함께 보기