#vue-burger-menuとは
vue-burger-menuは、サイドバーハンバーガーメニュー実装できるコンポーネントライブラリです。
CSS transitionsとSVGパスアニメーションを使用したエフェクトとスタイルを10種類備えてあります。
#vue-burger-menuの導入方法
以下のnpm、yarn、CDNを使ってインストールします。
- npm
npm install vue-burger-menu --save
- yarn
yarn add vue-burger-menu
- CDN
<script src="https://cdn.jsdelivr.net/npm/vue-burger-menu@2.0.3/dist/vue-burger-menu.umd.js"></script>
#導入手順
###1.ライブラリの取り込み
import { Slide } from "vue-burger-menu";
Vue.component("slide", Slide);
###2. テンプレートを準備
を設置します。
は以下のプロパティを設定できます。
<slide right disableOutsideClick width="200">
<router-link to="/" class="header-link neon3 flash">HOME</router-link>
<router-link to="/about" class="header-link neon3 flash"
>ABOUT</router-link
>
<router-link :to="`/board/${this.uid}`" class="header-link neon3 flash"
>POST</router-link
>
<router-link
to="/signup"
class="header-link neon3 flash"
v-if="!authenticatedUser"
>SINGUP</router-link
>
<router-link
to="/signin"
class="header-link neon3 flash"
v-if="!authenticatedUser"
>SINGIN</router-link
>
<router-link :to="`/mypage/${this.uid}`" class="header-link neon3 flash"
>MYPAGE</router-link
>
</slide>
|||
|:--|:--:|--:|
|right|バーガーアイコンを左右のどちらに表示するか|
|width|メニューの幅を指定できます。|
|isOpen|サイドバーを開くか閉じるかを制御できます。|
|disableOutsideClick|外部クリックがトリガーされたときにメニューを閉じることをオフにすることができます。|
|disableEsc|Escキーを押すとメニューが閉じます。|
|noOverlay|オーバーレイをオフにできます。|
|burgerIcon|バーガーアイコンを無効にできます。|
|crossIcon|展開アイコンを無効にできます。|
###3.アニメーションの設定
アニメーション詳細につきましてはGithubをご参照下さい。
10種類のアニメーションを実装することができます。
以下が設定可能なプロパティです。
- Slide
- ScaleDown
- ScaleRotate
- Reveal
- Push
- PushRotate
- FallDown
- Stack
- Elastic
- Bubble
アニメーションによっては、メインコンテンツのコンポーネントに id="page-wrap" を設定する必要があります。
以下のアニメーションを使用する場合は必ず設定しましょう。
- Push
- PushRotate
- ScaleDown
- ScaleRotate
- Reveal