Zenn
💻

Vuetifyのv-containerをv-app-barの中で使ったりmax-widthをBootstrapっぽくしたり

2020/02/13に公開
Bootstrap
JavaScript
Vue.js
Vuetify
tech

こんにちは、たつきちです。

小ネタですが備忘録的に残しておきます。

v-containerをv-app-barの中で使う

まず、 v-app-bar を普通に マニュアル のとおりに使うと以下のような実装になります。

<v-app-bar
  app
  fixed
>
  <v-toolbar-title class="mr-auto">
    Vuetify
  </v-toolbar-title>
  <v-btn
    icon
  >
    <v-icon>mdi-menu</v-icon>
  </v-btn>
</v-app-bar>

ちょっと画像が横長すぎて分かりづらいですが、表示結果は以下のようになります。

左端と右端を画面幅いっぱいにせずコンテナに入れたい場合はどうすればいいでしょうか。

とりあえず v-app-bar 内に v-container を入れてみましょう。

<v-app-bar
  app
  fixed
>
+ <v-container>
    <v-toolbar-title class="mr-auto">
      Vuetify
    </v-toolbar-title>
    <v-btn
      icon
    >
      <v-icon>mdi-menu</v-icon>
    </v-btn>
+ </v-container>
</v-app-bar>

ぶっ壊れました😱

落ち着いてください。以下のようにflexを設定すればいい感じになります。

<v-app-bar
  app
  fixed
>
- <v-container>
+ <v-container class="d-flex align-center">
    <v-toolbar-title class="mr-auto">
      Vuetify
    </v-toolbar-title>
    <v-btn
      icon
    >
      <v-icon>mdi-menu</v-icon>
    </v-btn>
  </v-container>
</v-app-bar>

いい感じですね👍

v-containerのmax-widthをBootstrapっぽくする

ところで、実は↑で貼ったキャプチャ画像は、VuetifyのデフォルトのCSSのままではなくて、ちょっと拡張してあります。

デフォルトのCSSだと、最後のコードの表示結果は以下のようになります。

このキャプチャは横幅1920pxの画面で撮ったもので、コンテナの内側の幅は1761pxとなっています。

ちょっと幅、広すぎません？🤔

ということで、 Bootstrapと同じ 感じにしてみましょう。

$container-max-width を上書きする

/node_modues/vuetify/src/styles/settings/_variables.scss を見てみると、 $container-max-widths というmapがあり、これによって v-container の max-width の値が決まるようです。

$container-max-widths: map-deep-merge(
  (
    'md': map-get($grid-breakpoints, 'md') * 0.9375,
    'lg': map-get($grid-breakpoints, 'lg') * 0.9375,
    'xl': map-get($grid-breakpoints, 'xl') * 0.9375
  ),
  $container-max-widths
);

というわけで、この値をBootstrapにならって以下の内容で上書きすればOKです。

$container-max-widths: (
  'md': 720px,
  'lg': 960px,
  'xl': 1140px,
);

Nuxt.jsの場合の変数の変更方法

ちなみに、Nuxt.jsを使っている場合は、以下の方法で変数の上書きができます。

まず、 nuxt.config.js に以下の設定をします。（参考）

// nuxt.config.js

export default {
  :
  vuetify: {
    treeShake: true,
    customVariables: ['~/assets/variables.scss'],
  },
  :
}

その上で、 assets/variables.scss で $container-max-widths を上書きすればOKです。

// assets/variables.scss

$container-max-widths: (
  'md': 720px,
  'lg': 960px,
  'xl': 1140px,
);

まとめ

  • Vuetifyの v-container を v-app-bar の中で使う場合はflexを使っていい感じに並べる
  • Vuetifyの v-container の幅は $container-max-widths という変数（map）の値を上書きすることで変更可能
GitHubで編集を提案

Discussion