网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
专为Vue.js仪表板应用程序设计的易于使用的多级侧边栏导航组件。
1.安装并导入组件。
import Vue from 'vue'
import VueSidebarMenu from 'vue-sidebar-menu'
import 'vue-sidebar-menu/dist/vue-sidebar-menu.css'
Vue.use(VueSidebarMenu)
// or
import { SidebarMenu } from 'vue-sidebar-menu'
export default {
components: {
SidebarMenu
}
}
2.在应用程序上创建基本的侧边栏导航。
<template>
<sidebar-menu :menu="menu" />
</template>
<script>
export default {
data() {
return {
menu: [
{
header: true,
title: 'Main Navigation',
hiddenOnCollapse: true
},
{
href: '/1',
title: 'Menu 1',
icon: 'ICON CLASS HERE'
},
{
href: '/2',
title: 'Menu 2',
icon: 'ICON CLASS HERE',
child: [
{
href: '/2-1',
title: 'Menu 2-1'
}
]
}
]
}
}
}
</script>
3. 默认配置项。
// Sidebar menu (required)
menu: {
type: Array,
required: true
},
// Sidebar Collapse state
collapsed: {
type: Boolean,
default: false
},
// Sidebar width (expanded)
width: {
type: String,
default: '350px'
},
// Sidebar width (collapsed)
widthCollapsed: {
type: String,
default: '50px'
},
// Keep only one child opened at a time (first level only)
showOneChild: {
type: Boolean,
default: false
},
// Keep all child open
showChild: {
type: Boolean,
default: false
},
// Sidebar right to left
rtl: {
type: Boolean,
default: false
},
// Make sidebar relative to the parent (by default the sidebar is relative to the viewport)
relative: {
type: Boolean,
default: false
},
// Hide toggle collapse btn
hideToggle: {
type: Boolean,
default: false
},
// Sidebar theme (available themes: 'white-theme')
theme: {
type: String,
default: ''
},
// Disable hover on collapse mode
disableHover: {
type: Boolean,
default: false
}
转载请注明来源:多级Vue左侧菜单组件(vue-sidebar-menu)
本文永久链接地址:https://www.moyouyouw.cn/code/1181.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论