tedateコンテンツへスキップ夜の帳がおりています。良い時間をすごせますように。[Vue.js]Vuetifyを使って、サイドからスライドインするドロワーメニュー(ハンバーガーメニュー)を作る方法[v-navigation-drawer][Vue.js]Vuetifyを使って、サイドからスライドインするドロワーメニュー(ハンバーガーメニュー)を作る方法[v-navigation-drawer]Vuetifyで、サイドからスライドインして現れる、ドロワーメニューを使ってみますVuetifyのUIコンポーネントを実際に試してみるシリーズの記事、22回目になります。今回は、いわゆる「ドロワー」だとか「ハンバーガーメニュー」と呼ばれているUIパーツの、Vuetify版についての記事です。以下の動画を見ていただくと、どんなものが扱えるかわかりやすいかと思います。使って、このようなドロワーメニューを表示してみます。あわせてご覧ください。コンポーネントを呼び出すサンプルコードは、以下のようになります。呼び出している部分自体は29行目〜60行目までです。.6rem;">(Vuetifyでは、このようにドロワーメニューのコンポーネントもデフォルトで用意されていて、簡単に扱うことができます。コンポーネントを呼び出す基本形は、上記の様な形になります。上記のサンプルコードでは、便宜上アプリ風のヘッダUIを冒頭(9〜25行目)で作成していて、その中に置いてあるハンバーガーメニュー的なアイコンをトリガーとして使用しています(15行目)。falseになれば閉じる、という仕組みです。選択された項目の番号が数字として返ってきます。(0番目始まりで返ってきます。)この性質をうまく使えば、選択された項目に応じて何かをする(一番単純なのはページ遷移でしょうか)、といったプログラム側での制御が可能かと思います。最低限、用意しておくdataは、以下のようになります。サンプルを用意しました。次のリンクより、見ることができます。ご紹介は、この記事の続編の記事を書いた際にて、ご紹介できればと思います。下記の公式解説ページをみると、何ができるのか網羅されていますので、一読すると理解が深まります。公式ドキュメント、APIページなどv-navigation-drawerコンポーネントのVuetify公式ページは以下です。Vuetifyまた、公式APIページはこちらになります。一覧が記載されています。ついてご紹介しました。使用によって表示位置の変更なども柔軟に可能なこちらのUIコンポーネント。Vuetifyを使っている場合は、使い勝手が良いUIパーツのひとつかもしれません。「ドロワーメニュー」というUIパーツへの理解を深めるのにも役立つことと思います。関する記事を掲載していく予定です。※この記事は、内容の品質向上を目的に、随時更新を行う場合があります。ブレークポイント(Breakpoints)][Vuetify3]まずはとにかく始めたい場合。