Vuetifyでもっと早く知りたかったこと

## はじめに

プログラミング未経験のわたしが初めて UI framework を利用するにあたって、「もっと早く知っておけば！」と思った情報をまとめておきます。

## 大前提

v-app の中で使用してください。
公式：[Application service](https://vuetifyjs.com/en/components/application/)

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="html,result" data-user="msickpaler" data-slug-hash="ZEpExKa" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="vuetify needs v-app">
  <span>See the Pen <a href="https://codepen.io/msickpaler/pen/ZEpExKa">
  vuetify needs v-app</a> by msickpaler (<a href="https://codepen.io/msickpaler">@msickpaler</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## Grid System

[Vuetify.js 2.2 の GridSystem について](https://qiita.com/rubytomato@github/items/07fe07e64482f8f03ef3#align-self-v-col)
この記事見ればだいたい分かります。特に v-container, v-row, v-col についてはこちらを参照してください。

## v-navigation-drawer(サイドバー)

### メインコンテンツと被ったとき

その時は、メインコンテンツを v-main で囲ってください(Vuetify 使うと決まったらすぐにやっておくべき)。
ちなみにv-snackbarやv-dialogなどが何かと被ったときはcssのv-indexを使って前に出してもokです。

<p class="codepen" data-height="459" data-theme-id="dark" data-default-tab="html,result" data-user="msickpaler" data-slug-hash="mdrdLdE" style="height: 459px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="navigation without &amp;lt;v-main&amp;gt;">
  <span>See the Pen <a href="https://codepen.io/msickpaler/pen/mdrdLdE">
  navigation without &lt;v-main&gt;</a> by msickpaler (<a href="https://codepen.io/msickpaler">@msickpaler</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### なんか表示崩れたとき

サイドバーが原因なら、app プロップス使えば直ります。

<p class="codepen" data-height="372" data-theme-id="dark" data-default-tab="html,result" data-user="msickpaler" data-slug-hash="jOMOxWz" style="height: 372px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="navbar without app props">
  <span>See the Pen <a href="https://codepen.io/msickpaler/pen/jOMOxWz">
  navbar without app props</a> by msickpaler (<a href="https://codepen.io/msickpaler">@msickpaler</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### ユーザーアイコンを一番上に置きたいとき
上ならprepend、下ならappendを指定すればok

<p class="codepen" data-height="528" data-theme-id="dark" data-default-tab="html,result" data-user="msickpaler" data-slug-hash="dypPpbx" style="height: 528px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="navbar prepend">
  <span>See the Pen <a href="https://codepen.io/msickpaler/pen/dypPpbx">
  navbar prepend</a> by msickpaler (<a href="https://codepen.io/msickpaler">@msickpaler</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## breakpoint

めちゃくちゃ便利。
公式：[Display Breakpoints](https://vuetifyjs.com/en/features/breakpoints/#breakpoint-service)
以下はサイドバーの例で

- md 以上の大きさで常時表示
- sm 以下でトグル式
- xs 以下でトグル式かつ下から表示

が切り替えられます。

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="html,result" data-user="msickpaler" data-slug-hash="ExgxLXq" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="toggle by display size">
  <span>See the Pen <a href="https://codepen.io/msickpaler/pen/ExgxLXq">
  toggle by display size</a> by msickpaler (<a href="https://codepen.io/msickpaler">@msickpaler</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>