0.1.0 • Published 5 years ago
simple-menu-builder-vue v0.1.0
simple-menu-builder-vue
Simple menu builder for vue
Installation
Install the plugin:
npm install --save simple-menu-builder-vue
Use the plugin in your app:
import Vue from 'vue'
import SimpleMenuBuilderVue from 'simple-menu-builder-vue'
Vue.use(SimpleMenuBuilderVue)
Example
All elements that you see in the nestableItems object must be (show, id, link, text). You can: delete, edit menu items. You will implement the addition yourself by simply adding a new element with a unique id to nestableItems. To understand what the menu consists of, style with the styles described below.
Icons: By default, the menu item opener is "+" and "-", you can add your own icons by adding the attribute icon =" true "
, also adding slots to the menu.
<menu-builder icon="true" :nestableItems="nestableItems" :lang="{text: 'Text', link: 'URL', delete: 'Delete'}">
<template v-slot:plus> </template>
<template v-slot:minus> </template>
</menu-builder>
You can also specify your text in the menu editing
lang =" {text: 'Text', link: 'URL', delete: 'Delete'} "
<template>
<div id="app">
<menu-builder :nestableItems="nestableItems" :lang="{text: 'Текст',link: 'URL',delete:'Удалить'}">
</menu-builder>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
nestableItems: [
{
link: 'https://google.com',
id: 0,
text: 'Andy',
show: true
}, {
id: 1,
link: 'https://google.com',
text: 'Harry',
show: false,
children: [{
id: 2,
text: 'David',
link: 'https://google.com',
show: false
},{
id: 4,
text: 'as',
link: 'https://google.com',
show: false
}]
}, {
id: 3,
text: 'Lisa',
link: 'https://google.com',
show: false
}
]
}
}
}
</script>
<style>
ul {
cursor: pointer;
}
.slide-enter-active {
-moz-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-moz-transition-timing-function: ease-in;
-webkit-transition-timing-function: ease-in;
-o-transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
.slide-leave-active {
-moz-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
-webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
-o-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
.slide-enter-to, .slide-leave {
max-height: 100px;
overflow: hidden;
}
.slide-enter, .slide-leave-to {
overflow: hidden;
max-height: 0;
}
#app{
display: flex;
justify-content: center;
}
.dd { position: relative; display: block; margin: 0; padding: 0; list-style: none; line-height: 20px; }
.dd-list { display: block; position: relative; margin: 0; padding: 0; list-style: none; }
.dd-item .dd-list { padding-left: 30px; }
.dd-collapsed .dd-list { display: none; }
.dd-item,
.dd-empty,
.dd-placeholder {
width: 300px;display: block; position: relative; margin: 0; padding: 0; min-height: 20px; line-height: 20px; }
.dd-handle { width: 300px; display: block; margin-top: 10px; padding: 5px 10px; color: #333; text-decoration: none; font-weight: bold; border: 1px solid #ccc;
background: #fafafa;
background: -webkit-linear-gradient(top, #fafafa 0%, #eee 100%);
background: -moz-linear-gradient(top, #fafafa 0%, #eee 100%);
background: linear-gradient(top, #fafafa 0%, #eee 100%);
box-sizing: border-box; -moz-box-sizing: border-box;
user-select: none;
}
.dd-handle:hover { color: #2ea8e5; background: #fff; }
.dd-item > button { display: block; position: relative; cursor: pointer; float: left; width: 25px; height: 20px; margin: 5px 0; padding: 0; text-indent: 100%; white-space: nowrap; overflow: hidden; border: 0; background: transparent; font-size: 12px; line-height: 1; text-align: center; font-weight: bold; }
.dd-item > button:before { content: '+'; display: block; position: absolute; width: 100%; text-align: center; text-indent: 0; }
.dd-item > button[data-action="collapse"]:before { content: '-'; }
.dd-empty { margin: 5px 0; padding: 0; min-height: 30px; background: #f2fbff; border: 1px dashed #b6bcbf; box-sizing: border-box; -moz-box-sizing: border-box; }
.dd-empty { border: 1px dashed #bbb; min-height: 100px; background-color: #e5e5e5;
background-image: -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff),
-webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
background-image: -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff),
-moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
background-image: linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff),
linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
background-size: 60px 60px;
background-position: 0 0, 30px 30px;
}
.dd-dragel { position: absolute; pointer-events: none; z-index: 9999; }
.dd-dragel > .dd-item .dd-handle { margin-top: 0; }
.dd-dragel .dd-handle {
-webkit-box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1);
box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1);
}
.edit-item{
float: right;
padding: 0 10px;
color: #000;
font-size: 20px;
text-decoration: none;
}
.dd-placeholder{margin-top: 10px; padding: 0; background: #f2fbff; border: 1px dashed #b6bcbf; box-sizing: border-box; -moz-box-sizing: border-box;}
.dd-settings{
border: 1px solid #e5e5e5;
padding: 15px;
background: #fff;
}
.dd-settings label{
width: 100%;
display: block;
margin-bottom: 15px;
}
.dd-settings input{
width: 100%;
}
.delete-item{
color: #dc3232;
text-decoration: underline;
}
</style>