팝오버
버튼 아래에 붙어 뜨는 창이에요. 바깥을 누르거나 Esc를 누르면 닫혀요.
고르기#
이 부품을 언제 쓰고, 언제 다른 것을 쓰는지예요.
언제 쓰나#
- 눌러서 여는 작은 메뉴·설명.
사용 예제#
할 일마다 실물과 코드예요. 편집을 누르면 코드를 고쳐 바로 볼 수 있어요.
해부도#
- 1
기준 버튼
창은 이 버튼 바로 아래 6px에 떠요.
- 2
창
페이지 맨 끝에 붙어 그려져 잘리지 않아요.
- 3
메뉴 줄
MenuItem이에요. 고른 줄은 브랜드 면이에요.
속성#
인터페이스#
타입에서 자동으로 뽑은 표예요.
Popover#
| 속성 | 기본값 | 타입 | 설명 |
|---|---|---|---|
| open* | - | boolean | 열렸는지예요. |
| onClose* | - | () => void | 닫아야 할 때 불러요. |
| anchorRef* | - | RefObject<HTMLElement | null> | 창을 붙일 기준 요소예요. |
| align | 'start' | 'center' | 'start' | 'end' | 가로 맞춤 - 트리거 왼쪽(start)·오른쪽(end)·가운데(center) |
| placement | 'below' | 'below' | 'auto' | below(기본) · auto = 아래 자리가 모자라고 위가 넉넉하면 트리거 위로 연다(화면 아래쪽 레인의 메뉴 - AI 캔버스) |
| gap | 6 | number | |
| w | - | number | 창의 폭(px)이에요. |
| role | 'menu' | string | 창의 역할이에요. |
| autoFocus | true | boolean | 열리면 초점을 창 안으로(메뉴는 첫 줄, 그 밖은 첫 초점 가능 요소). 기본 true |
| className | - | string | 배치용 클래스예요. 모양(색·크기)은 덮어쓰지 않아요. |
| children* | - | ReactNode | 안에 그릴 내용이에요. |
MenuItem#
| 속성 | 기본값 | 타입 | 설명 |
|---|---|---|---|
| active | - | boolean | 골랐는지예요. 주면 aria-pressed로 알려요. |
| onClick | - | () => void | 누르면 불러요. |
| className | - | string | 배치용 클래스예요. 모양(색·크기)은 덮어쓰지 않아요. |
| children* | - | ReactNode | 안에 그릴 내용이에요. |
* 필수예요. 표는 타입에서 자동으로 뽑았어요.
스펙#
상태 · 슬롯마다 실제로 그려지는 값이에요.
MenuItem#
값은 컴포넌트 코드에서 뽑았고, 토큰 이름을 누르면 파운데이션으로 가요. 토큰이 없는 값만 숫자로 적었어요.
접근성#
가이드라인#
이렇게 써요#
쓰는 규칙#
이렇게 써요
- 열림 상태와 기준 버튼(anchorRef)만 부모가 쥐어요.
- 메뉴 한 줄은 MenuItem을 써요.
문구#
- 메뉴 줄은 결과의 이름으로 적어요("가격 높은 순").
플랫폼별 차이#
| 플랫폼 | 차이 |
|---|---|
| 모바일 | PC와 같은 모양이에요. 글자 역할만 폰 크기로 바뀌어요. |
| PC | 마우스가 있는 기기에서만 hover가 켜지고, 키보드 초점 링이 보여요. |