vue導航菜單元件_一個Vue.js元件來切換導航抽屜菜單容器

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
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導航菜單元件