Bottom sheet

Bottom sheet はスクリーンの下部からスライドするように修飾された v-dialogv-bottom-nav と似ています。 ボトムナビゲーションコンポーネントは、ボタンと特定のアプリケーションレベルのアクション用ですが、 Bottom sheet にはなんでも含めることができます。

Usage

Here we display an example list of actions that could be present in an application.

API

v-bottom-sheet
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 のブレークポイントオブジェクトを使用した動的なクラスバインディングの方法を合わせて紹介します。

Edit this page | language on Github