Accordion
도움말·FAQ처럼 여러 설명을 골라 펼쳐 보기.
- 라이브러리 전용
개요
미리보기
What do you scan?
Inbox, Sent, calendar events and document titles from the sources you connect.
Can I use it with a keyboard?
Move with Tab and open or close with Enter or Space.
What happens when I disconnect?
New scanning stops. You choose separately whether to delete what was already scanned.
예시
상태
모두 닫힘
What do you scan?
Inbox, Sent, calendar events and document titles from the sources you connect.
Can I use it with a keyboard?
Move with Tab and open or close with Enter or Space.
What happens when I disconnect?
New scanning stops. You choose separately whether to delete what was already scanned.
첫 항목 열림
What do you scan?
Inbox, Sent, calendar events and document titles from the sources you connect.
Can I use it with a keyboard?
Move with Tab and open or close with Enter or Space.
What happens when I disconnect?
New scanning stops. You choose separately whether to delete what was already scanned.
하나만 열림
What do you scan?
Inbox, Sent, calendar events and document titles from the sources you connect.
Can I use it with a keyboard?
Move with Tab and open or close with Enter or Space.
What happens when I disconnect?
New scanning stops. You choose separately whether to delete what was already scanned.
이렇게 · 이렇게 하지 않기
- 이렇게 읽지 않아도 되는 부가 설명에만 쓴다.
- 이렇게 하지 않기 동의 범위나 삭제 결과처럼 꼭 읽어야 할 내용은 접지 않는다.
- 이렇게 머리글은 질문이나 주제 이름으로 쓴다.
- 이렇게 하지 않기 높이 애니메이션·스프링·바운스 없음. chevron만 돈다.
토큰과 속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
items | readonly { id, title, content }[] | — | 항목들. 미리보기는 질문 3개. |
mode? | 'single' | 'multiple' | multiple | single은 하나를 열면 나머지가 닫힘(네이티브 name), multiple은 각각. |
defaultOpen? | 'none' | 'first' | none | 처음 열려 있는 항목. |
headingLevel? | 'h2' | 'h3' | 'h4' | h3 | 각 summary 안의 제목 수준. |
<Disclosure> | — | — | 구현은 Disclosure 묶음이다. 한 항목만 필요하면 Disclosure를 쓴다. |
ref | — | — | ref는 바깥 <div>로 전달된다. |
| 그 밖의 속성 | — | — | id, aria-* 등 네이티브 div 속성은 바깥 래퍼로 간다. className·style·children은 받지 않는다. |
접근성
키보드: summary에서 Enter·Space. 화살표 이동은 없다(네이티브를 따른다).
- 각 summary 안에 h3이 있어 제목 탐색으로 질문 사이를 건너뛸 수 있다.
- 네이티브 펼침 상태가 읽힌다. 접을 수 없는 항목(disabled)은 만들지 않는다.