torish14 / sendmail-demo

Vuetifyグリッドシステム

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

Vuetify2.x でよく使うUIComponents まとめ

v-app

• v-app は Vuetify を使う為に必須の要素で、Vuetify のコンポーネントには必ずv-app 要素で包括する。

v-content

• レイアウトシステムを使うように、サイドメニューの表示・非表示にメインコンテンツを連動させる場合に v-content で要素を包括する。

v-container

• v-container はコンテナで、fluid属性を付与することで左右一杯にコンテナを広げたり、fill-height属性を付与することでv-container の内部要素を上下**寄せにしたりできる。

v-row

• v-row は v-col のラッパーコンポーネントで、基本的にはセットで用いる。これは、1.xの v-layout が2.xで置き換わったもの。

v-col

• v-col は v-row の直接の子要素出なければならない。 これは、1.xの v-flex が 2.xで置き換わったもの。

属性	幅指定
xs	600px未満
sm	600px以上960px未満
md	960px以上1264px未満
lg	1264px以上1904px未満

v-row の使い方 ↓

<template>
  <v-container fluid>
    <v-row>
      <v-col cols="12">
        <v-row
          :align="alignment"
          :justify="justify"
          class="grey lighten-5"
          style="height: 300px;"
        >
          <v-card
            v-for="n in 3"
            :key="n"
            class="ma-3 pa-6"
            outlined
            tile
          >
            Column
          </v-card>
        </v-row>
      </v-col>
    </v-row>
  </v-container>
</template>

app prop

Project setup

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Lints and fixes files

yarn lint

Customize configuration

See Configuration Reference.

Serve in local

firebase serve

Deploy

firebase deploy