Add nested splitbutton demo

pull/6483/head
Cagatay Civici 2024-09-26 11:05:33 +03:00
parent 17b0cf035a
commit d262bcc846
2 changed files with 262 additions and 0 deletions

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>

View File

@ -16,6 +16,7 @@ import BasicDoc from '@/doc/splitbutton/BasicDoc.vue';
import DisabledDoc from '@/doc/splitbutton/DisabledDoc.vue';
import IconsDoc from '@/doc/splitbutton/IconsDoc.vue';
import ImportDoc from '@/doc/splitbutton/ImportDoc.vue';
import NestedDoc from '@/doc/splitbutton/NestedDoc.vue';
import OutlinedDoc from '@/doc/splitbutton/OutlinedDoc.vue';
import RaisedDoc from '@/doc/splitbutton/RaisedDoc.vue';
import RaisedTextDoc from '@/doc/splitbutton/RaisedTextDoc.vue';
@ -40,6 +41,11 @@ export default {
label: 'Basic',
component: BasicDoc
},
{
id: 'nested',
label: 'Nested',
component: NestedDoc
},
{
id: 'icons',
label: 'Icons',