바닥 시트 (Bottom sheet)

바닥시트(bottom sheet)는 스크린 바닥으로 부터의 슬라이드를 추가한 v-dialog 의 변형이며 v-bottom-nav와 유사합니다. 바닥 네비게이션 (bottom navigation)이 버튼이나 어플리케이션 레벨 동작을 위한 컴포넌트라면, 바닥시트는 무엇이든 포함할 수 있습니다.

사용법

어플리케이션에서 사용할 수 있는 동작(action)의 목록 예제입니다.


API

v-bottom-sheet
이름
disabled
디폴트
false
타입
boolean

대화창(dialog)이 열릴 수 없도록 설정

이름
full-width
디폴트
false
타입
boolean

100% 너비(width)를 가지도록 강제

이름
hide-overlay
디폴트
false
타입
boolean

Hide the display of the overlay

이름
inset
디폴트
false
타입
boolean

대화창(dialog) 컨텐츠의 최대 너비를 70%로 줄임

이름
lazy
디폴트
false
타입
boolean

mounted에서 컨텐츠를 조건부로 렌더링. 컨첸츠가 활성화 되었을 경우에만 렌더링합니다.

이름
max-width
디폴트
auto
타입
string | number

시트의 컨테이너의 최대 너비를 설정

이름
persistent
디폴트
false
타입
boolean

대화창(dialog)의 외부를 클릭해도 대화창이 사라지지 않음

이름
value
디폴트
undefined
타입
any

표시여부를 조절 (Controls visibility)

예제

삽입형 바닥시트 (Inset bottom sheets)

바닥시트는 최대넓이를 전체 화면의 70%로 줄여서 삽입될 수 있습니다. width prop 를 사용하여 수동으로 너비를 추가 조정할 수 있습니다. We also showcase dynamic class binding using the Vuetify breakpoint object.