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いれないと改行されないで全部1行にはいっちゃう。
(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なんだけど、4方向全部指定するのがm-ではなくma-
そのほかはb,t,l,r,x,y,
0から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>