컴포넌트FOX · BottomSheet

바텀시트

화면 아래에서 올라오는 판이에요. 위쪽 모서리는 각지고, 작은 손잡이 네모가 달려 있어요. 여러 항목 중 고르거나 짧은 입력을 받을 때 써요.

기본 모양

손잡이, 제목, 내용, 맨 아래 고정 버튼 순서예요. 내용이 길면 내용 부분만 스크롤되고 버튼은 그대로 있어요.

BOTTOM SHEET

<BottomSheet
  open={open}
  onClose={() => setOpen(false)}
  title="은행을 골라 주세요"
  action={<Button size="lg" block>확인했어요</Button>}
>
  ...
</BottomSheet>

키보드와 접근성

팝업과 같아요. role은 dialog이고 aria-modal이 켜져 있어요. 열면 초점이 안으로 들어가고 Tab이 밖으로 나가지 않아요. Escape나 바깥 어두운 영역을 누르면 닫히고, 닫히면 초점이 연 버튼으로 돌아가요.

이렇게 써요

고르기, 입력처럼 화면 흐름을 잠깐 벗어나는 일

이렇게선택지가 여럿이거나 짧은 입력이 필요할 때 써요.

「저장했어요」 같은 한 줄 알림

이렇게 말고알리기만 하는 내용은 스낵바를, 예와 아니오는 팝업을 써요.

속성

속성	값	기본값	설명
`open`	boolean	없음	열림 여부
`onClose`	() => void	없음	Escape, 바깥 영역에서 불린다
`title`	string	없음	제목이자 화면 읽기 도구가 읽는 이름
`action`	ReactNode	없음	맨 아래 고정 영역. 보통 꽉 찬 주 버튼 하나
`closeOnScrim`	boolean	`true`	바깥 영역을 눌러 닫을지
`container`	HTMLElement \| null	`document.body`	요소를 주면 그 안에서만 뜬다. 문서 예시용