@inotom/vue-nav-drawer NPM

@inotom/vue-nav-drawer

A Vue.js component to toggle navigation drawer menu container.

From v2.0.0, it works for Vue 3.

Demo

Install

Browser

<script src="vue.global.prod.js"></script>
<script src="vue-nav-drawer.umd.js"></script>

npm

npm install --save @inotom/vue-nav-drawer

Usage

Browser

<div id="app">
  <nav-drawer-handle></nav-drawer-handle>
  <nav-drawer-custom-handle>MENU</nav-drawer-custom-handle>
  <nav-drawer>
    MENU LIST
    <nav-drawer-custom-close-handle>CLOSE</nav-drawer-custom-close-handle>
  </nav-drawer>
</div>

<script src="vue.global.prod.js"></script>
<script src="vue-nav-drawer.umd.js"></script>
<script>
const { createApp } = Vue;
const { NavDrawer, NavDrawerHandle, NavDrawerCustomHandle, NavDrawerCustomCloseHandle } = SwsVueNavDrawer;

createApp({
  components: {
    NavDrawer,
    NavDrawerHandle,
    NavDrawerCustomHandle,
    NavDrawerCustomCloseHandle,
  },
}).mount('#app');
</script>

SFC (TypeScript)

<template>
  <nav-drawer-handle></nav-drawer-handle>
  <nav-drawer-custom-handle>MENU</nav-drawer-custom-handle>
  <nav-drawer>
    MENU LIST
    <nav-drawer-custom-close-handle>CLOSE</nav-drawer-custom-close-handle>
  </nav-drawer>
</template>

<script setup lang="ts">
import {
  NavDrawer,
  NavDrawerHandle,
  NavDrawerCustomHandle,
  NavDrawerCustomCloseHandle
} from '@inotom/vue-nav-drawer';
</script>

Props

NavDrawerHandle

Props	Type	Default	Description
`drawer-key`	`String`	`"default"`	Key string for drawer identification
`size`	`Number`	`50`	Hamburger menu size(px)
`weight`	`String`	`"normal"`	Hamburger menu line width (normal, thin, bold)
`color`	`String`	`"#fff"`	Hamburger menu line color
`bg-color`	`String`	`"#f6ac1d"`	Hamburger menu background color
`fsize`	`String`	`"10px"`	Menu label text size
`is-button`	`Boolean`	`false`	Add WAI-ARIA role button attribute

NavDrawer

Props	Type	Default	Description
`drawer-key`	`String`	`"default"`	Key string for drawer identification
`is-left`	`Boolean`	`false`	Drawer container align left
`bg-color`	`String`	`"#fff"`	Drawer container background color
`cover-opacity`	`Number`	`0.5`	Drawer background layer opacity
`disable-close-button`	`Boolean`	`false`	Hide close button
`media-query`	`String`	`"(max-width: 640px)"`	Enable drawer conditional
`top`	`String`	`"0px"`	Drawer top position
`z-index`	`Number`	`1000`	Drawer z-index
`is-button`	`Boolean`	`false`	Add WAI-ARIA role button attribute to close icon
`drawer-width`	`String`	`80vw`	Drawer container width