【Vuetify】ドロワーメニューをサクッと実装する

こんにちは、ryohei(@ityryohei)です!

本記事では、Vuetifyでドロワーメニューをサクッと実装する方法をご紹介しています。

Vuetifyでドロワーメニューを楽に、シンプルに実装したいな…

上記の要望にお応えします。

では、解説していきます。

ドロワーメニューを実装する

タイトルあるように、Vuetifyでドロワーメニューをサクッと実装してみます。ここではシンプルにコンテンツにリンクだけを追加したドロワーメニューを作成してみます。

HTML

<div id="app">
    <v-app>
        <div>
            <v-app-bar>
                <v-app-bar-nav-icon v-on:click.stop="drawer = !drawer"></v-app-bar-nav-icon>
            </v-app-bar>

            <v-navigation-drawer
                v-model="drawer"
                absolute
                temporary
            >
                <v-list>
                    <v-list-item-group>
                        <v-list-item><a href="#">Menu Item1</a></v-list-item>
                        <v-list-item><a href="#">Menu Item2</a></v-list-item>
                        <v-list-item><a href="#">Menu Item3</a></v-list-item>
                        <v-list-item><a href="#">Menu Item4</a></v-list-item>
                    </v-list-item-group>
                </v-list>
            </v-navigation-drawer>
        </div>
    </v-app>
</div>

JavaScript

new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data: () => ({
        drawer: false,
    }),
})

実行結果は下記の通り。デモ左上のハンバーガーアイコンをクリックするとドロワーメニューが開閉します。

See the Pen 7314 by ryohei (@intotheprogram) on CodePen.

基本的に下記のページを参考にした内容となっています。カスタマイズされる場合に参考になると思います。

参考:https://vuetifyjs.com/ja/components/navigation-drawers/

使用しているプロパティについて

前項でご紹介したドロワーメニューでは、二つのプロパティを使用しています。それぞれ下記の役割を担っています。

absoluteコンポーネントにアブソリュートを追加する
temporaryドロワーメニューが開いているときに、背景に半透明の要素をオーバーレイ表示する

temporaryを追加するだけで背景のオーバーレイを実装できるとか、最高ですね……。

最後に

Vuetifyを導入するなら、画面幅の狭い端末ではドロワーメニューを使いたくなりますよね。公式のドキュメントに実装方法は詳しく説明がありますが、より簡単に実装できるように本記事のような形でまとめてみました。Vuetifyを使用している皆さんにご活用いただければ幸いです。

以上、Vuetifyでドロワーメニューをサクッと実装する方法のご紹介でした!

短期間でプログラミングを習得してエンジニアになろう!

エンジニアに転職を考えている方、独学で勉強中の方必見!CodeCampなら自宅にいながら実務経験があるエンジニアからマンツーマンで指導してもらうことができます。実践的なスキルを習得して一日でも早いエンジニアデビューを目指しましょう。まずは無料体験から!

CodeCamp 公式サイトへ

おすすめの書籍