<template> <DocSectionText v-bind="$attrs"> <p>Toolbar provides <i>start</i>, <i>center</i> and <i>end</i> properties to place content at these sections.</p> </DocSectionText> <div class="card"> <Toolbar> <template #start> <Button label="New" icon="pi pi-plus" class="mr-2" /> <Button label="Upload" icon="pi pi-upload" severity="success" /> <i class="pi pi-bars p-toolbar-separator mr-2" /> <SplitButton label="Save" icon="pi pi-check" :model="items" severity="warning"></SplitButton> </template> <template #end> <Button icon="pi pi-search" class="mr-2" /> <Button icon="pi pi-calendar" severity="success" class="mr-2" /> <Button icon="pi pi-times" severity="danger" /> </template> </Toolbar> </div> <DocSectionCode :code="code" /> </template> <script> export default { data() { return { items: [ { label: 'Update', icon: 'pi pi-refresh' }, { label: 'Delete', icon: 'pi pi-times' }, { label: 'Vue Website', icon: 'pi pi-external-link', command: () => { window.location.href = 'https://vuejs.org/'; } }, { label: 'Upload', icon: 'pi pi-upload', command: () => { this.$router.push('fileupload'); } } ], code: { basic: ` <Toolbar> <template #start> <Button label="New" icon="pi pi-plus" class="mr-2" /> <Button label="Upload" icon="pi pi-upload" severity="success" /> <i class="pi pi-bars p-toolbar-separator mr-2" /> <SplitButton label="Save" icon="pi pi-check" :model="items" severity="warning"></SplitButton> </template> <template #end> <Button icon="pi pi-search" class="mr-2" /> <Button icon="pi pi-calendar" severity="success" class="mr-2" /> <Button icon="pi pi-times" severity="danger" /> </template> </Toolbar>`, options: ` <template> <div class="card"> <Toolbar> <template #start> <Button label="New" icon="pi pi-plus" class="mr-2" /> <Button label="Upload" icon="pi pi-upload" severity="success" /> <i class="pi pi-bars p-toolbar-separator mr-2" /> <SplitButton label="Save" icon="pi pi-check" :model="items" severity="warning"></SplitButton> </template> <template #end> <Button icon="pi pi-search" class="mr-2" /> <Button icon="pi pi-calendar" severity="success" class="mr-2" /> <Button icon="pi pi-times" severity="danger" /> </template> </Toolbar> </div> </template> <script> export default { data() { return { items: [ { label: 'Update', icon: 'pi pi-refresh' }, { label: 'Delete', icon: 'pi pi-times' }, { label: 'Vue Website', icon: 'pi pi-external-link', command: () => { window.location.href = 'https://vuejs.org/'; } }, { label: 'Upload', icon: 'pi pi-upload', command: () => { this.$router.push('fileupload'); } } ] }; } }; <\/script>`, composition: ` <template> <div class="card"> <Toolbar> <template #start> <Button label="New" icon="pi pi-plus" class="mr-2" /> <Button label="Upload" icon="pi pi-upload" severity="success" /> <i class="pi pi-bars p-toolbar-separator mr-2" /> <SplitButton label="Save" icon="pi pi-check" :model="items" severity="warning"></SplitButton> </template> <template #end> <Button icon="pi pi-search" class="mr-2" /> <Button icon="pi pi-calendar" severity="success" class="mr-2" /> <Button icon="pi pi-times" severity="danger" /> </template> </Toolbar> </div> </template> <script setup> import { ref } from 'vue'; const items = ref([ { label: 'Update', icon: 'pi pi-refresh' }, { label: 'Delete', icon: 'pi pi-times' }, { label: 'Vue Website', icon: 'pi pi-external-link', command: () => { window.location.href = 'https://vuejs.org/'; } }, { label: 'Upload', icon: 'pi pi-upload', command: () => { this.$router.push('fileupload'); } } ]) <\/script>` } }; } }; </script>