vue导航菜单组件
Vue组件样板 (vue-component-boilerplate)
A Vue.js component to toggle navigation drawer menu container.
一个Vue.js组件,用于切换导航抽屉菜单容器。
View demo View demo2 Download Source 查看演示 查看 演示2 下载源
安装 (Install)
浏览器 (Browser)
<script src="vue.js"></script>
<script src="vue-nav-drawer.min.js"></script>
npm (npm)
npm install --save vue-nav-drawer
用法 (Usage)
浏览器 (Browser)
<div id="app">
<nav-drawer-handle></nav-drawer-handle>
<nav-drawer>
MENU LIST
</nav-drawer>
</div>
<script src="vue.js"></script>
<script src="vue-nav-drawer.min.js"></script>
<script>
Vue.use(NavDrawer);
new Vue({
el: '#app'
});
</script>
证监会 (SFC)
<template>
<nav-drawer-handle></nav-drawer-handle>
<nav-drawer>
MENU LIST
</nav-drawer>
</template>
<script>
import { NavDrawer, NavDrawerHandle } from '@inotom/vue-nav-drawer';
export default {
components: {
NavDrawer,
NavDrawerHandle
}
}
</script>
道具 (Props)
NavDrawerHandle (NavDrawerHandle)
Props | Type | Default | Description |
---|---|---|---|
| | | Hamburger menu size(px) |
| | | Hamburger menu line width (normal, thin, bold) |
| | | Hamburger menu line color |
| | | Hamburger menu background color |
| | | Menu label text size |
| | | Add WAI-ARIA role button attribute |
道具 | 类型 | 默认 | 描述 |
---|---|---|---|
| | | 汉堡菜单尺寸(px) |
| | | 汉堡菜单线宽(常规,细,粗体) |
| | | 汉堡菜单线颜色 |
| | | 汉堡菜单背景色 |
| | | 菜单标签文字大小 |
| | | 添加WAI-ARIA角色按钮属性 |
导航抽屉 (NavDrawer)
Props | Type | Default | Description |
---|---|---|---|
| | | Drawer container align left |
| | | Drawer container background color |
| | | Drawer background layer opacity |
| | | Hide close button |
| | | Enable drawer conditional |
| | | Drawer z-index |
| | | Add WAI-ARIA role button attribute to close icon |
道具 | 类型 | 默认 | 描述 |
---|---|---|---|
| | | 抽屉容器向左对齐 |
| | | 抽屉容器背景色 |
| | | 抽屉背景层不透明度 |
| | | 隐藏关闭按钮 |
| | | 启用条件抽屉 |
| | | 抽屉Z索引 |
| | | 将WAI-ARIA角色按钮属性添加到关闭图标 |
翻译自: https://vuejsexamples.com/a-vue-js-component-to-toggle-navigation-drawer-menu-container/
vue导航菜单组件