Vuetifyのv-app-bar-nav-iconのハンバーガーメニューのデザインを変えたいとき

2020年7月13日

今回はVuetifyのv-app-bar-nav-iconのハンバーガーメニューのデザインを変えたいときどのようにすれば良いのかについてご紹介いたします。

Vuetifyでハンバーガーメニューを表示させたいとき、v-app-bar-nav-iconタグを使います。

<v-app-bar-nav-icon></v-app-bar-nav-icon>

1	<v-app-bar-nav-icon></v-app-bar-nav-icon>

しかし、v-app-bar-nav-iconタグを使うとデフォルトのハンバーガーメニューのマークを使わなければならず、ハンバーガーメニューのデザインを変えたいときもあると思います。

Vuetifyでもハンバーガーメニューのデザインを変えることが可能です。
例として次のようにv-imgを使って書きましょう。

<div>
    <v-img
    :src="require('./画像の相対パス')"
    contain
    width="××"
    alt="○○○"
    @click="drawer = true" 
    />
</div>

<div>

<v-img

:src="require('./画像の相対パス')"

contain

width="××"

alt="○○○"

@click="drawer = true"

</div>

この記事が参考になればと思います。

終わりに

今回はVuetifyのv-app-bar-nav-iconのハンバーガーメニューのデザインを変えたいときどのようにすれば良いのかについてご紹介いたしました。

最後までお読みいただきありがとうございます。
よろしければブログやTwitterでのシェアをお願いしております。
コメントもお待ちしております。
誤植や勘違いなどございましたらコメント欄にて教えていただけると幸いです。

Youtubeチャンネル開設いたしました。
チャンネル登録者1000人を目指しているので、良いと思った方はチャンネル登録をお願いしたいです。
https://www.youtube.com/channel/UC219XhmSRxmXltTy6COxSMw

Posted by ちこ

まだ、コメントがありません