About me

おしながき

Vuetify2.xを初めて使う人が

レイアウトに関連する内容にインデックスを貼れる

話すこと

• アプリケーション全体のレイアウト
• Grid systemとESLint Plugin
• Breakpoints

• アプリケーション全体のレイアウト == エントリファイル(e.g. App.vue)で書く内容
• 参考: Application service — Vuetify.js

<v-app>

• 他のVuetifyのコンポーネントの親になるもので、アプリケーション内で1つ用意する

Application components

• app propを持つコンポーネント
• 該当するコンポーネント
  • v-system-bar
  • v-app-bar
  • v-navigation-drawer
  • v-footer
  • v-bottom-navigation
• 配置する場所が決められている (e.g. v-system-barはアプリの最上部)

<v-content>

• Application componentsに応じて動的にサイズが決まるコンポーネント
• <main>の中に入る要素をこの中に入れるとよい (e.g. Vue Routerの<router-view>)

こんなレイアウトが作れる

出典: https://vuetifyjs.com/en/components/application/#application-components

• Flexboxを使った、12分割のGrid system (inspired by Bootstrap)
• 参考: Material Component Framework — Vuetify.js

関連するコンポーネント

1.xからの変更点

• コンポーネントの刷新(e.g. <v-layout> → <v-row>)など
  • 詳細: Releases and migrations - Gridの部分
• vuetifyjs/eslint-plugin-vuetifyを使って、チェックやAutoFixができる

• 5つの定義済みBreakpointsや、Breakpoint service objectを使って制御する
• 参考: Breakpoints — Vuetify.js

5つの定義済みBreakpoints

出典: https://vuetifyjs.com/en/customization/breakpoints

Breakpoint service object

• Breakpointsに関するインスタンスプロパティ ($vuetify.breakpoint)
• 次のようなことができる
  • Breakpointの閾値を変更する
  • 現在のBreakpointが、特定のBreakpointの範囲内に一致しているか判定する

• Application componentsなどを使って、大まかなレイアウトを作れる
• BootstrapライクなGrid systemを使って、細かいレイアウトを作れる
  • 1.xから変更があるが、Lintなどで対応するとよい
• Breakpointの制御には、定義済みBreakpointsや、インスタンスプロパティを使える