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

Update default example of toolbar

pull/4683/head
Cagatay Civici 2023-10-23 19:17:47 +03:00
parent e7996f40ba
commit 9441f3aed4
1 changed files with 40 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
doc/toolbar/BasicDoc.vue
View File

@ -5,17 +5,19 @@
<div class="card"> <div class="card">
<Toolbar> <Toolbar>
<template #start> <template #start>
<Button label="New" icon="pi pi-plus" class="mr-2" /> <Button icon="pi pi-plus" class="mr-2" />
<Button label="Upload" icon="pi pi-upload" severity="success" /> <Button icon="pi pi-print" class="mr-2" />
<i class="pi pi-bars p-toolbar-separator mr-2" /> <Button icon="pi pi-upload" />
<SplitButton label="Save" icon="pi pi-check" :model="items" severity="warning"></SplitButton>
</template> </template>
<template #end> <template #center>
<Button icon="pi pi-search" class="mr-2" /> <span class="p-input-icon-left">
<Button icon="pi pi-calendar" severity="success" class="mr-2" /> <i class="pi pi-search" />
<Button icon="pi pi-times" severity="danger" /> <InputText placeholder="Search" />
</span>
</template> </template>
<template #end> <SplitButton label="Save" icon="pi pi-check" :model="items"></SplitButton></template>
</Toolbar> </Toolbar>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
@ -33,37 +35,25 @@ export default {
{ {
label: 'Delete', label: 'Delete',
icon: 'pi pi-times' 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: { code: {
basic: ` basic: `
<Toolbar> <Toolbar>
<template #start> <template #start>
<Button label="New" icon="pi pi-plus" class="mr-2" /> <Button icon="pi pi-plus" class="mr-2" />
<Button label="Upload" icon="pi pi-upload" severity="success" /> <Button icon="pi pi-print" class="mr-2" />
<i class="pi pi-bars p-toolbar-separator mr-2" /> <Button icon="pi pi-upload" />
<SplitButton label="Save" icon="pi pi-check" :model="items" severity="warning"></SplitButton>
</template> </template>
<template #end> <template #center>
<Button icon="pi pi-search" class="mr-2" /> <span class="p-input-icon-left">
<Button icon="pi pi-calendar" severity="success" class="mr-2" /> <i class="pi pi-search" />
<Button icon="pi pi-times" severity="danger" /> <InputText placeholder="Search" />
</span>
</template> </template>
<template #end> <SplitButton label="Save" icon="pi pi-check" :model="items"></SplitButton></template>
</Toolbar> </Toolbar>
`, `,
options: ` options: `
@ -71,17 +61,19 @@ export default {
<div class="card"> <div class="card">
<Toolbar> <Toolbar>
<template #start> <template #start>
<Button label="New" icon="pi pi-plus" class="mr-2" /> <Button icon="pi pi-plus" class="mr-2" />
<Button label="Upload" icon="pi pi-upload" severity="success" /> <Button icon="pi pi-print" class="mr-2" />
<i class="pi pi-bars p-toolbar-separator mr-2" /> <Button icon="pi pi-upload" />
<SplitButton label="Save" icon="pi pi-check" :model="items" severity="warning"></SplitButton>
</template> </template>
<template #end> <template #center>
<Button icon="pi pi-search" class="mr-2" /> <span class="p-input-icon-left">
<Button icon="pi pi-calendar" severity="success" class="mr-2" /> <i class="pi pi-search" />
<Button icon="pi pi-times" severity="danger" /> <InputText placeholder="Search" />
</span>
</template> </template>
<template #end> <SplitButton label="Save" icon="pi pi-check" :model="items"></SplitButton></template>
</Toolbar> </Toolbar>
</div> </div>
</template> </template>
@ -98,20 +90,6 @@ export default {
{ {
label: 'Delete', label: 'Delete',
icon: 'pi pi-times' 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');
}
} }
] ]
}; };
@ -124,17 +102,19 @@ export default {
<div class="card"> <div class="card">
<Toolbar> <Toolbar>
<template #start> <template #start>
<Button label="New" icon="pi pi-plus" class="mr-2" /> <Button icon="pi pi-plus" class="mr-2" />
<Button label="Upload" icon="pi pi-upload" severity="success" /> <Button icon="pi pi-print" class="mr-2" />
<i class="pi pi-bars p-toolbar-separator mr-2" /> <Button icon="pi pi-upload" />
<SplitButton label="Save" icon="pi pi-check" :model="items" severity="warning"></SplitButton>
</template> </template>
<template #end> <template #center>
<Button icon="pi pi-search" class="mr-2" /> <span class="p-input-icon-left">
<Button icon="pi pi-calendar" severity="success" class="mr-2" /> <i class="pi pi-search" />
<Button icon="pi pi-times" severity="danger" /> <InputText placeholder="Search" />
</span>
</template> </template>
<template #end> <SplitButton label="Save" icon="pi pi-check" :model="items"></SplitButton></template>
</Toolbar> </Toolbar>
</div> </div>
</template> </template>
@ -150,20 +130,6 @@ const items = ref([
{ {
label: 'Delete', label: 'Delete',
icon: 'pi pi-times' 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>