팝오버

단추를 누르면 그 아래에 패널이 펼쳐진다. 네이티브 details·summary 라 JS 없이도 열리고 닫힌다. JS 가 있으면 바깥을 누를 때, Esc 를 누를 때(포커스는 단추로 돌아온다), 패널 안의 링크나 단추를 누를 때 닫힌다. 패널은 fixed 로 놓여 카드나 가로 스크롤 표처럼 overflow 를 자르는 상자 안에서도 잘리지 않고, 아래 공간이 모자라면 단추 위로 열린다. 행 메뉴와 알림 목록이 이 위에 선다.

활용 방법

아이콘 단추와 목록

아이콘만 있는 단추는 summaryLabel 로 이름을 준다. align 은 패널을 단추의 어느 가장자리에 맞출지, panelClassName 은 폭과 여백을 정한다.

Preview

입고 #1024 검수 완료 주문 #88 결제 대기

tsx

<Popover
  summary={<Bell size={16} aria-hidden />}
  summaryLabel="알림"
  summaryClassName="flex size-8 items-center justify-center rounded-md border border-border"
  align="end"
                panelClassName="w-56 py-1"
>
  {notifications.map((n) => <a key={n.id} href={n.href}>{n.text}</a>)}
</Popover>

속성

이름	타입	기본값	설명
summary	ReactNode	-	여는 단추의 내용. summary 요소 안에 놓인다
summaryLabel	string	-	summary 의 aria-label. 아이콘만 있을 때 준다
summaryClassName	string	-	summary 의 모양. 기본 삼각형 숨김은 늘 적용된다
align	"start" \| "end"	"start"	패널을 단추의 왼쪽(start) 또는 오른쪽(end) 가장자리에 맞춘다
panelClassName	string	-	패널의 폭과 여백
children	ReactNode	-	패널 내용
className	string	-	root details 클래스
ref	Ref<HTMLDetailsElement>	-	root details. onToggle 등 native props 도 여기에 적용된다