Popover
트리거 옆에 붙는 작은 패널.
- 출시 화면에서 사용
개요
미리보기
기간
예시
상태
닫힘
기간
열림
기간
설명
“Scanned” means this sentence was found in the original. It does not mean a person reviewed it.
가장 긴 문구 (es)
기간
쓰임 예
위로
기간
이렇게 · 이렇게 하지 않기
- 이렇게 선택지나 짧은 설명처럼 작은 내용에만 쓴다. 열면 안으로 초점이 들어가고, Esc나 바깥을 누르면 닫히며 트리거로 돌아간다.
- 이렇게 값을 고르는 목록은 radio로 만든다. role=menu를 쓰지 않는다(선택은 메뉴가 아니다).
- 이렇게 하지 않기 꼭 필요한 정보를 Popover에만 두지 않는다. 확대(zoom) 등장을 쓰지 않는다.
토큰과 속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
label | ReactNode | 모든 출처 · 지난 30일 | 트리거 버튼 라벨. 지금 상태를 그대로 말한다(ScopeCapsule). |
title? | ReactNode | 기간 | 패널 제목. content=controls면 패널 이름(aria-labelledby)이 된다. |
children? | ReactNode | — | 패널 내용. 꼭 필요한 정보를 여기에만 두지 않는다. |
content? | 'text' | 'controls' | controls | controls는 대화형 요소가 여러 개 → role="dialog"(비모달). text는 짧은 설명이라 role 없음. |
placement? | 'bottom' | 'top' | 'auto' | auto | 원하는 쪽. 공간이 없으면 뒤집힌다. 320에서는 거의 전체 폭. |
open? | boolean | false | 카탈로그 프리셋용: 흐름 안에 열린 채로 그린다. 보통은 트리거가 연다. |
onOpenChange(open) | — | — | 네이티브 toggle 이벤트에서 부른다. Esc·바깥 클릭·다른 팝오버로 닫혀도 맞다. |
접근성
키보드: Enter·Space 열기 · Esc 닫기 + 트리거 복귀 · Tab은 패널 안을 돌고, 마지막 다음으로 나가면 닫힌다.
- 트리거 <button popovertarget aria-expanded aria-controls> + <div popover="auto">. 대화형 요소가 여러 개면 role="dialog".
- 열면 첫 대화형 요소(없으면 패널)로 초점. 알리지 않는다(초점 이동이 전달한다).