vuetifyの書き方メモ1【gridやdisplayや空白ユーティリティやアスペクト比】

vuetify.jsの公式リファレンス、言語を日本語にしてるとoptionの説明がまったくでないという素敵な仕様で混乱した。
なので自分用に和訳とかもふくめてメモっておきます。

【v-app】

アプリケーションが正しく動作するためには、アプリケーションをv-appコンポーネントにラップする必要があります。このコンポーネントは、レイアウトのグリッドブレークポイントを決定するために必要です。すべてのVuetifyコンポーネントの親でなければなりません。

【layout要素に app を適用する（v-appとプロパティのappがあってややこしいな）】

app propを適用すると、position：fixedがlayout要素に自動的に適用されます。

【デフォルトのアプリケーションマークアップ】
appプロパティを適用する限り、レイアウト要素はどこにでも配置できます。このすべての主要コンポーネントは、v-content要素です。これは、指定されたアプリコンポーネントの構造に応じて動的にサイズが変更されます。

<v-app>
  <v-navigation-drawer app></v-navigation-drawer>
  <v-toolbar app></v-toolbar>
  <v-content>
    <v-container fluid>
      <router-view></router-view>
    </v-container>
  </v-content>
  <v-footer app></v-footer>
</v-app>

※要するにナビとツールバーとフッターがfixedになるってことじゃろ？
※v-contentってなんじゃろ…

【app】

Vuetifyでは、v-appコンポーネントとアプリケーションは、v-contentの適切なサイズ設定でアプリケーションをブートストラップするのに役立ちます。これにより、レイアウト管理の手間をかけずに、本当にユニークなインターフェイスを作成することができます。すべてのアプリケーションでv-appコンポーネントが必要です。これは、Vuetifyの多くのコンポーネントと機能のマウントポイントです。
※v-containerの親に必ずv-contentがいるってことかな？※ちがうな…

【グリッド】

Vuetifyには12ポイントのグリッドシステムがあります。フレックスボックスを使用して構築されたグリッドは、アプリケーションのコンテンツをレイアウトするために使用されます。

Extra small xs  small to large handset  < 600px
tabletSmall sm  small to medium tablet  600px > < 960px
laptopMedium    md  large tablet to laptop  960px > < 1264*
desktop_windowsLarge    lg  desktop 1264 > < 1904px*
tvExtra large   xl  4k and ultra-wides  > 1904px*

【グリッドの使用】

v-container は、中央にフォーカスされたページに使用できます。
v-layoutはセクションを区切るために使用され、v-flexを含みます。
レイアウトの構造は、v-container»v-layout»v-flexのようになります。
グリッドチェーンの各部分はフレックスボックス要素です。
最後のv-flexは自動的に子供たちにflex：1 1 autoを設定します。（自動で空き領域を埋めます）

【wrap】

<v-layout row wrap>
　　　　　　<v-flex xs12></v-flex>
　　　　　　　　<v-flex xs6></v-flex>
　　　　　　　　<v-flex xs6></v-flex>
</v-layout>

wrapいれないと改行されないで全部１行にはいっちゃう。
（xs12とxs6とxs6があっても全部入っちゃう。bootstrapは12で強制改行なのが違うところ）

【オフセット、レスポンシブ】

xs7 offset-(xs5 | md2 | lg5)

幅7でXSのとき5、mdのとき2、lgのとき5のオフセット

(xs12 | sm5 | md5) offset-(xs0 | lg2)

xsなら12、smなら5、md以上で5、オフセットはxsなら0、lgなら2

【Grid-list】

グリッドリストは、アイテム間のガターコントロールを追加するv-containerコンポーネントのアドオンです。

v-container内にいれたv-flexたちの空白を決めるプロパティっすけど…
grid-list-｛xs、sm、md、lg、xl}
※xsとかにブレークポイント以外の意味をもたせるのが非常にわかりにくい

【グリッドシステム bootstrap4とvuetifyの対比】

<div class="container"></div>
<div class="container-fluid"></div>
<v-container></v-container>
<v-container fluid></v-container>

【gridのオプションで気になったやつ】

d-{type}
d-inline-flex, d-flex, d-inline-block, d-block, d-inlineがあってnoneがない…

※d-noneがないなっておもったら…hiddenがあった！

【hidden】

構文：hidden-{breakpoint}-{condition}

conditionは以下

and-down：指定したブレイクポイント含めそれより小さい幅で隠す
and-up：指定したブレイクポイント含めそれより大きい幅で隠す

ついでに
【overflow】
溢れ処理
overflow-hidden - hide overflow on both the x and y axis
overflow-y-hidden - hide overflow on the y axis
overflow-x-hidden - hide overflow on the x axis

【order】
order-lg-2 などブレークポイントと順番で指定できる

【縦と横の整列】

<v-layout row justify-center>
  <v-flex xs2></v-flex>
  ...

てきな感じでv-layoutにflex-boxっぽい指定をしてあげる
v-layoutにrowを入れれば横並び、columnで縦。
公式のリファレンスで「画面でかかったら縦で小さくなったら横」とかいうそれ逆なんじゃない？っていう例があって、しかもv-bind="binding"なんて指定があってなおかつそれはJSで制御されててしばし混乱した。

【空き領域をうめる】

<v-spacer></v-spacer>
三　title　　　　<v-spaserでこの間を埋める>    三

【htmlタグの指定】

セクションやli要素など、レイアウト項目を特定のタグとして指定することもあります。

<v-container
   id="grid"
   fluid
   grid-list-sm
   tag="section"
>
<v-flex tag="h1" class="headline">見出し</v-flex>
※要は <h1>見出し</h1>っすね

【アスペクト比の固定】

<template>
  <div>
    <v-card>
      <v-responsive :aspect-ratio="16/9">
        <v-card-text>
          This card will always be 16:9 (unless you put more stuff in it)
        </v-card-text>
      </v-responsive>
    </v-card>
  </div>
</template>

v-responsiveでアスペクト比を設定できる。上記例だとv-cardが16:9になる。
その他、height、max-height、max-width、widthが指定できる。

【空白ユーティリティ】

bootstrap4と同じようにpはpadding、mはmarginなんだけど、４方向全部指定するのがm-ではなくma-
そのほかはb,t,l,r,x,y,
０から5で指定、

1 - sets the spacing to $spacer * .25
2 - sets the spacing to $spacer * .5
3 - sets the spacing to $spacer
4 - sets the spacing to $spacer * 1.5
5 - sets the spacing to $spacer * 3

bootstrap4は$spacer基準値：1rem=16pxだったけどvuetifyもそうなんかな？

【テキスト配置】

viewpointとright,center,leftの組み合わせでなんやかんやする

<p class="text-lg-right">Right align on large viewport sizes</p>