Bottom Sheet
Bottom Sheet는 화면 하단에서 위로 올라오는 UI로, 현재 화면을 유지한 채 추가 정보나 액션을 빠르게 제공하는 컴포넌트입니다.
주로 옵션 선택, 상세 정보 확인, 보조 작업 수행 등에 사용됩니다.
컴포넌트 명세 (Component Specification)
Anatomy
bottomSheet
기본 기능
추가 정보를 전달하기 위한 보조 컴포넌트
시각 옵션
medium
large
상태
해당 없음
내부 구성
header
contents
사이즈 가이드 (Size Guide )
Bottom Sheet의 너비는 화면에 맞춰 Fill로 설정되며, 높이는 Medium은 256px, Large는 744px입니다.
분류 (Variant)
Body Contents 안에 정보에 따라 Medium과 Large로 나뉩니다.
Use Case (사용 예시)
실제 서비스 화면에서 Bottom Sheet가 배치되고 활용되는 패턴입니다. 뒤에 dimmed가 깔리고 bottom sheet가 올라갑니다.
