【Vue.js】Vuetifyでボタンを並べてみる（v-app、v-content、v-container、v-layout、v-flex、v-btn）

Vue.jsの続きです。前回はVuetifyを事始めました。今回はもう少し進んで、ボタンを3つ並べてみました。v-layout、v-flex、v-btnなどを使いました。

【目次】

Vuetifyの基本タグ（v-app、v-content、v-container）
グリッド設定（v-layout、v-flex）とボタン（v-btn）
最後に

前回の記事

※参考：【Vue.js】UIフレームワーク「Vuetify」をCDNリンクで事始めた - クモのようにコツコツと

Vuetifyの基本タグ（v-app、v-content、v-container）

前回のおさらい

前回作ったのはこちら

See the Pen Vuetify 01 by イイダリョウ (@i_ryo) on CodePen.

まだハローワールド状態

JSコード

    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
    })

elオプションで#appと紐付け、vuetifyオプションでvuetify()インスタンスを作っただけ。シンプル。

HTMLコード

<div id="app">
  <v-app>
    <v-content>
      <v-container>こんにちは、びゅうてぃふぁい。</v-container>
    </v-content>
  </v-app>
</div>

HTMLの方が特徴的でv-app、v-content、v-containerなどのタグが見受けられる。これは何か？

これらはVertifyの一番基本的なタグでおそらくいつでも書かれるべきもの。下記の記事にわかりやすい解説があった。

※参考：https://dev83.com/vue-vuetify-basic/

v-app

  <v-app><!--中略--></v-app>

v-appはVeutifyを使うために必須の要素です。Vuetifyのコンポーネントは必ずv-app要素の内側に書く必要があります。

v-appは必須の属性なのね。これに囲まれた中身がVuetifyの対象と認識される。

v-content

  <v-content ><!--中略--></v-content >

サイドメニューの表示・非表示にメインコンテンツを連動させる場合はv-contentでコンテンツを囲む必要があります。

v-contentはレイアウトシステムでサイドメニューと連動させるために必要なタグ。

レイアウトシステムについてはこちらを参照

※参考：https://vuetifyjs.com/ja/getting-started/pre-made-layouts

v-container

  <v-container >こんにちは、びゅうてぃふぁい。</v-container >

v-containerはその名の通りコンテナです。オプション属性がいろいろとあって、fluid属性を付与することで左右いっぱいにコンテナを広げたり、fill-height属性を付与することでv-containerの内部要素を上下中央寄せにしたりできます。

v-appとv-contentはページの大枠でv-containerがページの本体部分という感じか。ここに属性を加えて大きさなどを設定できる。

グリッド設定（v-layout、v-flex）とボタン（v-btn）

flexbox設定とボタンを設置してみた

少し改造した。flexbox設定で横並びにして、中にボタンを設置。

See the Pen Vuetify 02 by イイダリョウ (@i_ryo) on CodePen.

HTMLコード

  <div id="app">
    <v-app>
      <v-content>
        <v-container>
         <v-layout wrap>
          <v-flex xs12 sm6 md4 text-center my-5><v-btn>押して</v-btn></v-flex>
          <v-flex xs12 sm6 md4 text-center my-5><v-btn >押して</v-btn></v-flex>
          <v-flex xs12 sm6 md4 text-center my-5><v-btn>押して</v-btn></v-flex>
        </v-layout>
        </v-container>
      </v-content>
    </v-app>
  </div>

JSコードは変更なし

v-layout

         <v-layout wrap><!--中略--></v-layout>

先ほどの解説記事から引用

グリッドシステムを使うために必要です。意味としては
と同じです。

v-flex

<v-flex xs12 sm6 md4 text-center my-5><!--中略--></v-flex>

同じく先ほどの記事から

v-layoutの内側に設置することでグリッドデザインを実現できます。Vuetifyは12分割のグリッドシステムを採用しています。v-flexにxs12、sm6、md4のような属性を与えることでブラウザの幅で可変するようになります。

xs：600px未満（スマホ）
sm：600px以上960px未満（タブレット）
md：960px以上1264px未満（PC）

xs12 sm6 md4は下記の分割になる。

xs12：スマホでは12/12カラム幅=1分割
sm6：タブレットでは 6/12カラム幅=2分割
md4：PCは 4/12カラム幅=3分割

他にスペース設定を入れた。my-5はy（縦）方向の上下に4pxの5倍で20pxのマージン。センタリングはtext-center。

※参考：https://vuetifyjs.com/en/styles/spacing

v-btn

もうちょっとVuetifyらしさを体験したくて、v-flexの中にボタンを設置してみた。

HTMLコード

<v-btn>押して</v-btn>

v-btnを使う。中のテキストがボタンの中に表示される。

※参考：https://vuetifyjs.com/en/components/buttons#buttons

たったこれだけでボタンが配置されて、CSSスタイルも当たってhoverアクションもある。

最後に

f:id:idr_zz:20190829071324j:plain

グリッドシステムの設定とボタンの設置がCSSの記述ゼロで実現できました！その代わり、HTMLの属性はどんどん長くなりますね…。（bootstrapを思い出します）

さくっと管理画面を作ったりするにはやはりCSSフレームワークは便利です！引き続き触っていきます。それではまた！

※参考：Vue.jsの習得のためにやったことまとめ
qiita.com