Bottom sheet
Bottom sheet はスクリーンの下部からスライドするように修飾された v-dialog で v-bottom-nav と似ています。 ボトムナビゲーションコンポーネントは、ボタンと特定のアプリケーションレベルのアクション用ですが、 Bottom sheet にはなんでも含めることができます。
API
Name
disabled
Default
false
Type
boolean
ダイアログを開けなくします。
Name
full-width
Default
false
Type
boolean
Components.BottomSheets.
Name
hide-overlay
Default
false
Type
boolean
Components.BottomSheets.
Name
inset
Default
false
Type
boolean
ダイアログの最大の横幅を 70% に縮小します。
Name
lazy
Default
false
Type
boolean
Conditionally renders content on mounted. Will only render content if activated
Name
max-width
Default
auto
Type
string | number
シートのコンテナの最大の横幅を指定します。
Name
persistent
Default
false
Type
boolean
Components.BottomSheets.
Name
value
Default
undefined
Type
any
Components.BottomSheets.
Examples
差し込み Bottom sheet
Bottom sheet はデスクトップの最大の横幅の70%に縮小して、差し込むことができます。これは width prop を使用することで手動で更に縮小することができます。また、Vuetify のブレークポイントオブジェクトを使用した動的なクラスバインディングの方法を合わせて紹介します。