ActionBar

상태 한 줄과 행동 몇 개를 담은 떠 있는 캡슐. 누르면 위로 작은 패널이 열림.

개요

미리보기

예시 언어동작 줄이기

10월 3일까지 읽음

label

status

open

placement

이름	타입	기본값	설명
`label`	`string`	`빠른 행동`	막대의 접근 이름(section aria-label).
`items`	`readonly { id, label, icon?, panel?, onSelect? }[]`	—	행동 2–4개. panel이 있으면 패널을 열고, 없으면 onSelect만 실행. 미리보기는 검색 · 기록 추가 · 가져오기.
`status?`	`ReactNode`	`10월 3일까지 읽음`	캡슐 안 사실 한 줄. 점수·처리량을 쓰지 않는다.
`open?`	`string`		열린 패널의 항목 id(search · import). 비우면 닫힘. 사용자 조작은 onOpenChange로 알린다.
`placement?`	`'bottom' \| 'top'`	`bottom`	bottom은 탭 막대 위에 떠 있고 패널이 위로 열린다. top은 상단 가운데 섬이고 패널이 아래로 열린다.
`onOpenChange?: (id \| null) => void`	—	—	패널을 열거나 닫을 때 호출(행동 버튼, Esc, 바깥 클릭).
`ref`	—	—	ref는 <section>으로 전달된다.
그 밖의 속성	—	—	id, data-* 등 네이티브 section 속성은 그대로 전달된다. className·style·children은 받지 않는다.

예시

이렇게 · 이렇게 하지 않기

이렇게 행동은 2–4개, 상태는 사실 한 줄(“10월 3일까지 읽음”)만 둔다.

이렇게 하지 않기 폭·높이·반경을 보간하거나 스프링·scale로 “변신”시키지 않는다. 패널은 clip-path로 캡슐에서 열린다.

이렇게 하지 않기 알림을 부르려고 펄스·흔들기를 쓰지 않는다. 같은 화면의 TabBar·TopBar 행동과 겹치지 않게 한다.

토큰과 속성

이름	타입	기본값	설명
`label`	`string`	`빠른 행동`	막대의 접근 이름(section aria-label).
`items`	`readonly { id, label, icon?, panel?, onSelect? }[]`	—	행동 2–4개. panel이 있으면 패널을 열고, 없으면 onSelect만 실행. 미리보기는 검색 · 기록 추가 · 가져오기.
`status?`	`ReactNode`	`10월 3일까지 읽음`	캡슐 안 사실 한 줄. 점수·처리량을 쓰지 않는다.
`open?`	`string`		열린 패널의 항목 id(search · import). 비우면 닫힘. 사용자 조작은 onOpenChange로 알린다.
`placement?`	`'bottom' \| 'top'`	`bottom`	bottom은 탭 막대 위에 떠 있고 패널이 위로 열린다. top은 상단 가운데 섬이고 패널이 아래로 열린다.
`onOpenChange?: (id \| null) => void`	—	—	패널을 열거나 닫을 때 호출(행동 버튼, Esc, 바깥 클릭).
`ref`	—	—	ref는 <section>으로 전달된다.
그 밖의 속성	—	—	id, data-* 등 네이티브 section 속성은 그대로 전달된다. className·style·children은 받지 않는다.