Vuetifyのボトムシート(v-bottom-sheet)のサンプル
Tribute to Vuetify
Good UI framework 'Vuetify'.
Vuetifyのボトムシート(v-bottom-sheet)のサンプル_基本形
Vuetify のボトムシートのサンプル。このように、基本的には何のタグでもラップすることができます。
Vuetifyのボトムシート(v-bottom-sheet)のサンプル_すこし幅を小さくする
Vuetify のボトムシートのサンプル。inset という prop を使用する事で、すこし幅を小さくする事ができます。 また、 width という prop もあり、これは単純に横幅を直接数値指定して調節できるものです。
Vuetifyのボトムシート(v-bottom-sheet)のサンプル_背景の半透明グレーのオーバーレイを消す
hide-overlay という prop を true にすると、背景の半透明グレーのオーバーレイが付かない状態にする事ができます。
この状態は、たとえば Google map の「ピンをクリックした時に、情報が載っているシートが下からスライドインする様なUI」を作る時に、役立つ状態かと思います。
どういうことか詳しく知りたい方は、Material Design 公式の ボトムナビゲーションについての解説を参照してください。
また、この hide-overlay の使用時は、 presistent という prop を併用して、ボトムシートの外側をクリックしても閉じない様にしておくと、より機能として明確なUIになると思います。
Vuetifyのボトムシート(v-bottom-sheet)のサンプル_メニューや選択肢としての利用
この様に、リストを入れることで、簡単なメニューとして機能させることもできます。