Vuetifyを使っているときによく見に行くページと情報

Vuetifyを使っているときに参照したいと思う事が同じになってきたので、まとめを作っておくことにしました。

まだまだ不完全ですが、一回公開しちゃいます！
秘伝のタレみたいにどんどん追記してオリジナルメモを完成させられればと思っています。

「これもまとめておけよ」ってことがあったらコメントお願いしますm(_ _)m

レイアウト系

レイアウト

  <v-container>
    <v-row>
      <v-col>
      </v-col>
    </v-row>
  </v-container>

https://vuetifyjs.com/en/components/grids#grid-system
使い方については別記事でもまとめました(外部サイト)
【v-col v-row】 Vuetify2.0になってグリッドが刷新！ – レイアウトの作り方 編

フォントの大きさ系CSS

CSSで指定する。文字が大きい順に

.display-4
.display-3
.display-2
.display-1
.headline
.title
.subtitle-1
.subtitle-2
.body-1
.body-2
.caption
.overline

フォントの重さ系CSS

font-weight-** のクラスを追加すればOK

.font-weight-thin
.font-weight-bold

フォントの色系CSS

.***--text
.text--darken-4

隠す系CSS

hidden-{breakpoint}-{condition}

breakpoint は xs, sm, md, lg, xl の５種類

conditionは
- only
- and-down
- and-up

の３種類

色

UIコンポーネントリンク集

カード

<v-card>
  <v-card-title>タイトルと</v-card-title>
  <v-card-text>本文と</v-card-text>
  <v-card-actions>アクションがある</v-card-actions>
</v-card>

よく使うプロパティ

<v-card
  elevation="数字" ...影の度合いを調節
  flat            ...影をなくす
  nuxt            ...nuxt-link対応
  outlined        ...影をなくして、線で囲む
  tile            ...角丸をなくす
>
</v-card

フォーム

イメージ

<v-img
  src="https://picsum.photos/id/11/500/300"
  lazy-src="https://picsum.photos/id/11/10/6"
  aspect-ratio="1"
  class="grey lighten-2"
  max-width="500"
  max-height="300"
></v-img>