Vueを使うならとVuetifyをつかうことになった。BootStrap4を当初想定していて戸惑うことなどもありつつ、
便利なコンポーネントに溢れる便利さもあり。
色々とご紹介。
導入
こちらは非常に簡単。下記を参考に。
https://vuetifyjs.com/ja/getting-started/quick-start
レイアウト
GridレイアウトなのでBootStrapをご使用の方なら戸惑うことなく取り込めるかと。
marginやpaddingなども属性として用意されているコンポーネントがあってこちらもBootStrapと同等。
ただ、classで使用しないといけないコンポーネントもあるので、注意が必要。
使用したコンポーネント
※徐々に書き足していく予定。
button
よく使用した属性はsmall。ボタンでもなんでも大きめなので基本的に小さくして、
disabledでボタン制御。枠内いっぱいに広げる場合はblockを使用。
dialog
spinnerや確認画面を出す際に便利。persistentで枠外をクリックしても閉じないようにできる。
panel
アコーディオンパネル。expandを使用してほかのパネルが開いたら閉じることができる。
table
ページネーションが組み込まれたテーブルを簡単に作成できる。ページの表示件数もプルダウンで指定可能。
headersの幅は%表示にしないと効かない。
hide-actionsで件数表示とページネーションを無効にできる。
リストの件数だけを消したい場合は、rows-per-page-itemsとrows-per-page-textを空に設定する。
ただし、警告が出る。
select-allで全件チェックのチェックボックスがヘッダー項目に設定できる。
ただし、チェックする処理は自前で用意する必要あり。
modelにバインドとしたリストにチェックした値が設定される。
tr単位でクラスを設定したい場合、vueのbindを使用できるが、1番最初のレコードだけクラスが適用されない場合があったら、trの属性に:key="index"などとやると解決するかも。
stepper
決済処理のような画面を構築できるコンポーネント。
tab
タブを構成するのに使用するコンポーネント。
toolbar
ヘッダーのメニューを構成するようなコンポーネント。
レスポンシブでメニューを変えたい場合はクラスhidden-sm-and-downなどの設定に合わせて表示の制御を行う。