vue导航菜单组件
Vue组件样板 (vue-component-boilerplate)
A Vue.js component to toggle navigation drawer menu container.
一个Vue.js组件,用于切换导航抽屉菜单容器。
安装 (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 |
---|---|---|---|
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 |
道具 | 类型 | 默认 | 描述 |
---|---|---|---|
size | Number | 50 | 汉堡菜单尺寸(px) |
weight | String | "normal" | 汉堡菜单线宽(常规,细,粗体) |
color | String | "#fff" | 汉堡菜单线颜色 |
bg-color | String | "#f6ac1d" | 汉堡菜单背景色 |
fsize | String | "10px" | 菜单标签文字大小 |
is-button | Boolean | false | 添加WAI-ARIA角色按钮属性 |
导航抽屉 (NavDrawer)
Props | Type | Default | Description |
---|---|---|---|
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 |
z-index | Number | 1000 | Drawer z-index |
is-button | Boolean | false | Add WAI-ARIA role button attribute to close icon |
道具 | 类型 | 默认 | 描述 |
---|---|---|---|
is-left | Boolean | false | 抽屉容器向左对齐 |
bg-color | String | "#fff" | 抽屉容器背景色 |
cover-opacity | Number | 0.5 | 抽屉背景层不透明度 |
disable-close-button | Boolean | false | 隐藏关闭按钮 |
media-query | String | "(max-width: 640px)" | 启用条件抽屉 |
z-index | Number | 1000 | 抽屉Z索引 |
is-button | Boolean | false | 将WAI-ARIA角色按钮属性添加到关闭图标 |
翻译自: https://vuejsexamples.com/a-vue-js-component-to-toggle-navigation-drawer-menu-container/
vue导航菜单组件