Vue Dual List - Dual List using Vuejs and VueMaterial
Try it yourself.
How to install
npm install vue-dual-list --saveHow to use
var VueDualList = require('vue-dual-list');
new Vue({
el: '#vueduallist',
name: 'vue-dual-list',
data: function() {
return {
options: {
label: 'Demo title',
inputOptions: { uppercase: true, isRequired: false },
buttonOption: { textLeft: 'Move All', textRight: 'Move All' },
resizeBox: "md",
items: [
{ 'id': '1', 'name': 'Alundra' },
{ 'id': '2', 'name': 'Jess' },
{ 'id': '3', 'name': 'Meia' },
{ 'id': '4', 'name': 'Melzas' },
{ 'id': '5', 'name': 'Septimus' },
{ 'id': '6', 'name': 'Rudy Roughknight' },
{ 'id': '7', 'name': 'Jack Van Burace' },
{ 'id': '8', 'name': 'Hanpan' },
{ 'id': '9', 'name': 'Cecilia Adlehyde' },
{ 'id': '10', 'name': 'Serge' },
{ 'id': '11', 'name': 'Kid' },
{ 'id': '12', 'name': 'Lynx' },
{ 'id': '13', 'name': 'Harle' },
],
colorItems: '#1E90FF',
selectedItems: []
}
};
},
components: {
'VueDualList': VueDualList
}
});In your page use
<vue-dual-list id="vueduallist" :options="options"></vue-dual-list>Dual list options
- options: {label}:(optional): Label that will be displayed in the directive input text.;
- options.inputOptions: {uppercase}(required): Indicates if the letters in input text it will be uppercase.;
- options.inputOptions: {isRequired}(required): Indicates if the letters in input text it will be required.;
- options.buttonOption: {textLeft}(optional): Left button text.;
- options.buttonOption: {textRight}(optional): Right button text.;
- options.resizeBox:(optional): Height of the items box. [{'xs': 150px},{'md': 225px},{'lg': 350px},{'xl': 500px}];
- options.items:(required): Items that will be on the list.;
- options.colorItems:(optional): Color of the items that will be on the list.;
- options.selectedItems:(optional): Items selected by the user.;
change dual list
To execute your changes run the command npm run compile
Used versions
vue
version: 2.2.6
vue-material
version: ^0.7.1
License
It is available under the MIT license. License