はじめに
プログラミング未経験のわたしが初めて UI framework を利用するにあたって、「もっと早く知っておけば！」と思った情報をまとめておきます。
大前提
v-app の中で使用してください。
公式：Application service
See the Pen vuetify needs v-app by msickpaler (@msickpaler) on CodePen.
Grid System
Vuetify.js 2.2 の GridSystem について
この記事見ればだいたい分かります。特に v-container, v-row, v-col についてはこちらを参照してください。
v-navigation-drawer(サイドバー)
メインコンテンツと被ったとき
その時は、メインコンテンツを v-main で囲ってください(Vuetify 使うと決まったらすぐにやっておくべき)。
ちなみにv-snackbarやv-dialogなどが何かと被ったときはcssのv-indexを使って前に出してもokです。
See the Pen navigation without <v-main> by msickpaler (@msickpaler) on CodePen.
なんか表示崩れたとき
サイドバーが原因なら、app プロップス使えば直ります。
See the Pen navbar without app props by msickpaler (@msickpaler) on CodePen.
ユーザーアイコンを一番上に置きたいとき
上ならprepend、下ならappendを指定すればok
See the Pen navbar prepend by msickpaler (@msickpaler) on CodePen.
breakpoint
めちゃくちゃ便利。
公式：Display Breakpoints
以下はサイドバーの例で
- md 以上の大きさで常時表示
- sm 以下でトグル式
- xs 以下でトグル式かつ下から表示
が切り替えられます。
See the Pen toggle by display size by msickpaler (@msickpaler) on CodePen.