Mobile Bottom Sheet

MobileBottomSheet는 /mobile-bottom-sheet 데모에 사용되는 전체 높이 오버레이 바텀시트입니다. 내비게이션 스택을 표현하는 MobileNavigationSheet와 달리, 본문과 헤더를 호출자가 구성합니다.

인터랙티브 데모

시트를 열고 표현 방식, 확장, 뒤로가기 동작을 확인하세요. 시트는 문서 전체 위에 표시됩니다.

Props

Prop	타입	기본값	설명
open	boolean	필수	표시 여부
title	string	필수	제목
sheetId	string	'mobile-bottom-sheet'	시트 DOM ID
ariaLabel	string	'Mobile bottom sheet'	다이얼로그 접근성 이름
backLabel	string	'Back'	뒤로가기 버튼 라벨
closeLabel	string	'Close'	닫기 버튼 라벨
canGoBack	boolean	false	뒤로가기 버튼 표시 여부
closeable	boolean	true	닫기 버튼 표시 여부
dismissOnScrim	boolean	true	바깥 영역을 눌러 닫기 허용
dismissOnDrag	boolean	미지정	아래로 끌어 닫기 허용
dragFromContent	boolean	false	본문에서도 드래그 시작 허용
dragZoneHeight	number	0	상단에서 드래그할 영역의 높이(px)
expandable	boolean	false	확장 동작 사용 여부
expanded	boolean	false	확장 상태 (v-model:expanded)
presentation	'standard' | 'floating'	'standard'	시트 표현 방식
class	string	—	루트 요소에 적용할 클래스

이벤트와 슬롯

emit('back')
emit('close')
emit('update:expanded', value: boolean)

슬롯	용도
header-title	기본 제목 대신 표시할 제목 콘텐츠
header-actions	헤더 오른쪽의 보조 동작
default	시트 본문

사용 예

<MobileBottomSheet
    :open="sheetOpen"
    title="필터"
    :can-go-back="false"
    :dismiss-on-scrim="true"
    @close="sheetOpen = false"
>
    <FilterForm />
</MobileBottomSheet>

컴포넌트는 Teleport로 body에 렌더되고 다이얼로그 역할, 포커스 이동·복원, Escape 닫기, 배경 스크롤 잠금을 관리합니다. closeable은 닫기 버튼만 제어하며, 바깥 영역 클릭을 막으려면 dismissOnScrim도 false로 설정하세요.