Vue.js

【v-col v-row】 Vuetify2.0になってグリッドが刷新! – レイアウトの作り方 編

VueでCSSを作るための強い味方、Vuetify先輩!

みなさま、こんにちは。どんぶラッコです。

皆さんはCSSフレームワークは何を使っていますか?

Vue使いならば、Vuetifyを使っている人も多いと思います。

このVuetify、実は先月バージョンが2系にアップデートされました。

レイアウトをMaterial Designに寄せて一新したよ!というのがメインのアップデートですが、破壊的アップデートも含む、かなり大幅なアップデートでした。

Qiitaにも「outlinedオプションを使いたい」というテーマで投稿しました(いいねがついていないのが悲しい)

その中でも、私が注目したいのはグリッドシステムに関するアップデートです。

今までVuetifyのグリッドシステムといえば、 v-layout , v-flexを使うものでした。ちょっと想像しづらい名前でしたよね。

それがどう変わったのか?ご紹介したいと思います。

col, row システムに刷新!

では、具体的に何が変わったのでしょうか?

レイアウトの指定方法が変わっています。

v-containerはサイトコンテンツを中央寄せして、パディングしてくれます。fluid(流体って意味らしいです)オプションを使うとコンテンツを幅いっぱいに広げてくれます。

v-rowはその名の通り、行(row)の定義ですね。 It uses a standard gutter of 24pxとありますので、こちらも余白をとってくれます。使わないようにするには、dense オプションで少なめにするか no-gutterで完全になくすか、です。

v-colということは列(column)です。

基本的にはこれだけです。

つまり、v-containerでエリアを作ってあげて、その中でv-rowで行を作り、その中にv-colを詰め込むことでレイアウトを作ることができるわけです。

なので、図のように、1行の中に列が3つあってもいいわけです。

そしてv-colの数によって勝手に調整してくれる、というわけです。

こうやってみると、bulmaのシステムに近いですね。向こうの場合は columnscolumn の組み合わせですが。

また、v-colの区切り方は基本的には等分ですが

colsプロパティを使うことで、カラムの重み付けをすることができます。

↑は公式サイトからの引用です。例えば、1行目のサンプルコードを見ると、こんな感じです。

    <v-row
      class="mb-6"
      no-gutters
    >
      <v-col
        v-for="n in 3"
        :key="n"
        :cols="n === 2 ? 6 : undefined"
      >
        <v-card
          class="pa-2"
          outlined
          tile
        >
          {{ n }} of 3 {{ n === 2 ? '(wider)' : '' }}
        </v-card>
      </v-col>
    </v-row>

2 of 3 の時だけ、 cols オプションに6を指定していますね。

これは、最大値は12なのかな?特に言及がないのでそんな気がしますが調べておきます。


リリースノートにグリッドシステムの大幅な刷新と記載があった通り、かなり直感的に使いやすくなっていますね!

個人的には、 alignjustifyの設定がalign="center"の形で指定できるようになったのがかなり嬉しいです。Vueのdataとして保持させられますからね!

これから開発していく箇所については、早速こちらのグリッドシステムを使っていこうと思います。

また、自分が書いたコードあってるのかな?もっと効率良い書き方ないかな?と心配になったらこちらの記事で紹介しているサービスを使ってみてください。

ユーザー同士で相互にレビューし合う、コードレビュープラットフォームサービスです。

プログラマー、プログラミング学習者の皆さん向けに作ってみたサービスなので、気軽に投稿してみてください!

また、使ってみてサービスの改善点など気が付いた場合は、容赦無く教えていただけると嬉しいです。

サービス改善のために皆さんご協力よろしくお願いします!