Help us understand the problem. What is going on with this article?

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いれないと改行されないで全部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>
Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away