vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-10 01:12:37 +00:00
Code Issues Projects Releases Packages Wiki Activity

Add nested splitbutton demo

Browse source
This commit is contained in:
Cagatay Civici 2024-09-26 11:05:33 +03:00
parent 17b0cf035a
commit d262bcc846
2 changed files with 262 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

256
apps/showcase/doc/splitbutton/NestedDoc.vue Normal file
View file

@ -0,0 +1,256 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Multi-level menus are supported with a nested menu hierarchy.</p>
</DocSectionText>
<div class="card flex justify-center">
<SplitButton label="Save" @click="save" :model="items" />
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
items: [
{
label: 'File',
icon: 'pi pi-file',
items: [
{
label: 'New',
icon: 'pi pi-plus',
items: [
{
label: 'Document',
icon: 'pi pi-file'
},
{
label: 'Image',
icon: 'pi pi-image'
},
{
label: 'Video',
icon: 'pi pi-video'
}
]
},
{
label: 'Open',
icon: 'pi pi-folder-open'
},
{
label: 'Print',
icon: 'pi pi-print'
}
]
},
{
label: 'Edit',
icon: 'pi pi-file-edit',
items: [
{
label: 'Copy',
icon: 'pi pi-copy'
},
{
label: 'Delete',
icon: 'pi pi-times'
}
]
},
{
label: 'Search',
icon: 'pi pi-search'
},
{
separator: true
},
{
label: 'Share',
icon: 'pi pi-share-alt',
items: [
{
label: 'Slack',
icon: 'pi pi-slack'
},
{
label: 'Whatsapp',
icon: 'pi pi-whatsapp'
}
]
}
],
code: {
basic: `
<SplitButton label="Save" @click="save" :model="items" />
`,
options: `
<template>
<div class="card flex justify-center">
<SplitButton label="Save" @click="save" :model="items" />
</div>
</template>
<script>
export default {
data() {
return {
items: [
{
label: 'File',
icon: 'pi pi-file',
items: [
{
label: 'New',
icon: 'pi pi-plus',
items: [
{
label: 'Document',
icon: 'pi pi-file'
},
{
label: 'Image',
icon: 'pi pi-image'
},
{
label: 'Video',
icon: 'pi pi-video'
}
]
},
{
label: 'Open',
icon: 'pi pi-folder-open'
},
{
label: 'Print',
icon: 'pi pi-print'
}
]
},
{
label: 'Edit',
icon: 'pi pi-file-edit',
items: [
{
label: 'Copy',
icon: 'pi pi-copy'
},
{
label: 'Delete',
icon: 'pi pi-times'
}
]
},
{
label: 'Search',
icon: 'pi pi-search'
},
{
separator: true
},
{
label: 'Share',
icon: 'pi pi-share-alt',
items: [
{
label: 'Slack',
icon: 'pi pi-slack'
},
{
label: 'Whatsapp',
icon: 'pi pi-whatsapp'
}
]
}
]
};
}
};
<\/script>
`,
composition: `
<template>
<div class="card flex justify-center">
<SplitButton label="Save" @click="save" :model="items" />
</div>
</template>
<script setup>
const items = [
{
label: 'File',
icon: 'pi pi-file',
items: [
{
label: 'New',
icon: 'pi pi-plus',
items: [
{
label: 'Document',
icon: 'pi pi-file'
},
{
label: 'Image',
icon: 'pi pi-image'
},
{
label: 'Video',
icon: 'pi pi-video'
}
]
},
{
label: 'Open',
icon: 'pi pi-folder-open'
},
{
label: 'Print',
icon: 'pi pi-print'
}
]
},
{
label: 'Edit',
icon: 'pi pi-file-edit',
items: [
{
label: 'Copy',
icon: 'pi pi-copy'
},
{
label: 'Delete',
icon: 'pi pi-times'
}
]
},
{
label: 'Search',
icon: 'pi pi-search'
},
{
separator: true
},
{
label: 'Share',
icon: 'pi pi-share-alt',
items: [
{
label: 'Slack',
icon: 'pi pi-slack'
},
{
label: 'Whatsapp',
icon: 'pi pi-whatsapp'
}
]
}
];
<\/script>
`
}
};
}
};
</script>