vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed #1313 - New SplitButton with TieredMenu

pull/1361/head
Tuğçe Küçükoğlu 2021-06-25 17:18:14 +03:00
parent a812acebd7
commit 0e34488099
4 changed files with 396 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
rollup.config.js
View File

@ -25,6 +25,7 @@ let globalDependencies = {
'primevue/message': 'primevue.message', 'primevue/message': 'primevue.message',
'primevue/dropdown': 'primevue.dropdown', 'primevue/dropdown': 'primevue.dropdown',
'primevue/menu': 'primevue.menu', 'primevue/menu': 'primevue.menu',
'primevue/tieredmenu': 'primevue.tieredmenu',
'primevue/tree': 'primevue.tree', 'primevue/tree': 'primevue.tree',
'@fullcalendar/core': 'FullCalendar' '@fullcalendar/core': 'FullCalendar'
} }

4
src/components/splitbutton/SplitButton.vue
View File

@ -10,7 +10,7 @@
<script> <script>
import Button from 'primevue/button'; import Button from 'primevue/button';
import Menu from 'primevue/menu'; import TieredMenu from 'primevue/tieredmenu';
import {UniqueComponentId} from 'primevue/utils'; import {UniqueComponentId} from 'primevue/utils';
export default { export default {
@ -62,7 +62,7 @@ export default {
}, },
components: { components: {
'PVSButton': Button, 'PVSButton': Button,
'PVSMenu': Menu 'PVSMenu': TieredMenu
} }
} }
</script> </script>

129
src/views/splitbutton/SplitButtonDemo.vue
View File

@ -13,6 +13,9 @@
<h5>Basic</h5> <h5>Basic</h5>
<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items"></SplitButton> <SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items"></SplitButton>
<h5>Nested</h5>
<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="nestedItems"></SplitButton>
<h5>Severities</h5> <h5>Severities</h5>
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-mb-2"></SplitButton> <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-mb-2"></SplitButton>
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-secondary p-mb-2"></SplitButton> <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-secondary p-mb-2"></SplitButton>
@ -60,6 +63,132 @@ export default {
icon: 'pi pi-upload', icon: 'pi pi-upload',
to: '/fileupload' to: '/fileupload'
} }
],
nestedItems: [
{
label:'File',
icon:'pi pi-fw pi-file',
items:[
{
label:'New',
icon:'pi pi-fw pi-plus',
items:[
{
label:'Bookmark',
icon:'pi pi-fw pi-bookmark'
},
{
label:'Video',
icon:'pi pi-fw pi-video'
},
]
},
{
label:'Delete',
icon:'pi pi-fw pi-trash'
},
{
separator:true
},
{
label:'Export',
icon:'pi pi-fw pi-external-link'
}
]
},
{
label:'Edit',
icon:'pi pi-fw pi-pencil',
items:[
{
label:'Left',
icon:'pi pi-fw pi-align-left'
},
{
label:'Right',
icon:'pi pi-fw pi-align-right'
},
{
label:'Center',
icon:'pi pi-fw pi-align-center'
},
{
label:'Justify',
icon:'pi pi-fw pi-align-justify'
}
]
},
{
label:'Users',
icon:'pi pi-fw pi-user',
items:[
{
label:'New',
icon:'pi pi-fw pi-user-plus'
},
{
label:'Delete',
icon:'pi pi-fw pi-user-minus'
},
{
label:'Search',
icon:'pi pi-fw pi-users',
items:[
{
label:'Filter',
icon:'pi pi-fw pi-filter',
items:[
{
label:'Print',
icon:'pi pi-fw pi-print'
}
]
},
{
icon:'pi pi-fw pi-bars',
label:'List'
}
]
}
]
},
{
label:'Events',
icon:'pi pi-fw pi-calendar',
items:[
{
label:'Edit',
icon:'pi pi-fw pi-pencil',
items:[
{
label:'Save',
icon:'pi pi-fw pi-calendar-plus'
},
{
label:'Delete',
icon:'pi pi-fw pi-calendar-minus'
}
]
},
{
label:'Archieve',
icon:'pi pi-fw pi-calendar-times',
items:[
{
label:'Remove',
icon:'pi pi-fw pi-calendar-minus'
}
]
}
]
},
{
separator:true
},
{
label:'Quit',
icon:'pi pi-fw pi-power-off'
}
] ]
} }
}, },

265
src/views/splitbutton/SplitButtonDoc.vue
View File

@ -210,6 +210,9 @@ export default {
<h5>Basic</h5> <h5>Basic</h5>
<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items"></SplitButton> <SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items"></SplitButton>
<h5>Nested</h5>
<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="nestedItems"></SplitButton>
<h5>Severities</h5> <h5>Severities</h5>
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-mb-2"></SplitButton> <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-mb-2"></SplitButton>
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-secondary p-mb-2"></SplitButton> <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-secondary p-mb-2"></SplitButton>
@ -253,6 +256,137 @@ export default {
window.location.hash = "/fileupload" window.location.hash = "/fileupload"
} }
} }
],
nestedItems: [
{
label:'File',
icon:'pi pi-fw pi-file',
items:[
{
label:'New',
icon:'pi pi-fw pi-plus',
items:[
{
label:'Bookmark',
icon:'pi pi-fw pi-bookmark'
},
{
label:'Video',
icon:'pi pi-fw pi-video'
},
]
},
{
label:'Delete',
icon:'pi pi-fw pi-trash'
},
{
separator:true
},
{
label:'Export',
icon:'pi pi-fw pi-external-link'
}
]
},
{
label:'Edit',
icon:'pi pi-fw pi-pencil',
items:[
{
label:'Left',
icon:'pi pi-fw pi-align-left'
},
{
label:'Right',
icon:'pi pi-fw pi-align-right'
},
{
label:'Center',
icon:'pi pi-fw pi-align-center'
},
{
label:'Justify',
icon:'pi pi-fw pi-align-justify'
},
]
},
{
label:'Users',
icon:'pi pi-fw pi-user',
items:[
{
label:'New',
icon:'pi pi-fw pi-user-plus',
},
{
label:'Delete',
icon:'pi pi-fw pi-user-minus',
},
{
label:'Search',
icon:'pi pi-fw pi-users',
items:[
{
label:'Filter',
icon:'pi pi-fw pi-filter',
items:[
{
label:'Print',
icon:'pi pi-fw pi-print'
}
]
},
{
icon:'pi pi-fw pi-bars',
label:'List'
}
]
}
]
},
{
label:'Events',
icon:'pi pi-fw pi-calendar',
items:[
{
label:'Edit',
icon:'pi pi-fw pi-pencil',
items:[
{
label:'Save',
icon:'pi pi-fw pi-calendar-plus'
},
{
label:'Delete',
icon:'pi pi-fw pi-calendar-minus'
},
]
},
{
label:'Archieve',
icon:'pi pi-fw pi-calendar-times',
items:[
{
label:'Remove',
icon:'pi pi-fw pi-calendar-minus'
}
]
}
]
},
{
separator:true
},
{
label:'Quit',
icon:'pi pi-fw pi-power-off'
}
] ]
} }
}, },
@ -279,6 +413,9 @@ export default {
<h5>Basic</h5> <h5>Basic</h5>
<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items"></SplitButton> <SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items"></SplitButton>
<h5>Nested</h5>
<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="nestedItems"></SplitButton>
<h5>Severities</h5> <h5>Severities</h5>
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-mb-2"></SplitButton> <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-mb-2"></SplitButton>
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-secondary p-mb-2"></SplitButton> <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-secondary p-mb-2"></SplitButton>
@ -326,10 +463,136 @@ export default {
} }
} }
]); ]);
const nestedItems: [
{
label:'File',
icon:'pi pi-fw pi-file',
items:[
{
label:'New',
icon:'pi pi-fw pi-plus',
items:[
{
label:'Bookmark',
icon:'pi pi-fw pi-bookmark'
},
{
label:'Video',
icon:'pi pi-fw pi-video'
}
]
},
{
label:'Delete',
icon:'pi pi-fw pi-trash'
},
{
separator:true
},
{
label:'Export',
icon:'pi pi-fw pi-external-link'
}
]
},
{
label:'Edit',
icon:'pi pi-fw pi-pencil',
items:[
{
label:'Left',
icon:'pi pi-fw pi-align-left'
},
{
label:'Right',
icon:'pi pi-fw pi-align-right'
},
{
label:'Center',
icon:'pi pi-fw pi-align-center'
},
{
label:'Justify',
icon:'pi pi-fw pi-align-justify'
}
]
},
{
label:'Users',
icon:'pi pi-fw pi-user',
items:[
{
label:'New',
icon:'pi pi-fw pi-user-plus',
},
{
label:'Delete',
icon:'pi pi-fw pi-user-minus',
},
{
label:'Search',
icon:'pi pi-fw pi-users',
items:[
{
label:'Filter',
icon:'pi pi-fw pi-filter',
items:[
{
label:'Print',
icon:'pi pi-fw pi-print'
}
]
},
{
icon:'pi pi-fw pi-bars',
label:'List'
}
]
}
]
},
{
label:'Events',
icon:'pi pi-fw pi-calendar',
items:[
{
label:'Edit',
icon:'pi pi-fw pi-pencil',
items:[
{
label:'Save',
icon:'pi pi-fw pi-calendar-plus'
},
{
label:'Delete',
icon:'pi pi-fw pi-calendar-minus'
}
]
},
{
label:'Archieve',
icon:'pi pi-fw pi-calendar-times',
items:[
{
label:'Remove',
icon:'pi pi-fw pi-calendar-minus'
}
]
}
]
},
{
separator:true
},
{
label:'Quit',
icon:'pi pi-fw pi-power-off'
}
];
const save = () => { const save = () => {
toast.add({severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000}); toast.add({severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000});
}; };
return {items, save, toast} return {items, nestedItems, save, toast}
} }
} }
<\\/script> <\\/script>