@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 |
NavDrawerCustomHandle
Props | Type | Default | Description |
---|---|---|---|
drawer-key |
String |
"default" |
Key string for drawer identification |
is-button |
Boolean |
false |
Add WAI-ARIA role button attribute |
NavDrawerCustomCloseHandle
Props | Type | Default | Description |
---|---|---|---|
drawer-key |
String |
"default" |
Key string for drawer identification |
is-button |
Boolean |
false |
Add WAI-ARIA role button attribute |
License
MIT
Author
inotom