바닥 시트 (Bottom sheet)
바닥시트(bottom sheet)는 스크린 바닥으로 부터의 슬라이드를 추가한 v-dialog 의 변형이며 v-bottom-nav와 유사합니다. 바닥 네비게이션 (bottom navigation)이 버튼이나 어플리케이션 레벨 동작을 위한 컴포넌트라면, 바닥시트는 무엇이든 포함할 수 있습니다.
API
이름
disabled
디폴트
false
타입
boolean
대화창(dialog)이 열릴 수 없도록 설정
이름
full-width
디폴트
false
타입
boolean
100% 너비(width)를 가지도록 강제
이름
hide-overlay
디폴트
false
타입
boolean
오버레이 표시 숨기기
이름
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 를 사용하여 수동으로 너비를 추가 조정할 수 있습니다. 우리는 또한 Vuetify breakpoint 객체를 사용하여 동적 클래스 바인딩을 보여줍니다.