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

Updated split button demos

pull/5206/head
Cagatay Civici 2024-02-03 11:48:01 +03:00
parent f66d40e863
commit b8caa0a49f
11 changed files with 396 additions and 314 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
doc/splitbutton/BasicDoc.vue
View File

@ -3,7 +3,7 @@
<p>SplitButton has a default command button and a collection of additional options defined by the <i>model</i> property.</p> <p>SplitButton has a default command button and a collection of additional options defined by the <i>model</i> property.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items" /> <SplitButton label="Save" @click="save" :model="items" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -15,36 +15,33 @@ export default {
items: [ items: [
{ {
label: 'Update', label: 'Update',
icon: 'pi pi-refresh',
command: () => { command: () => {
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 }); this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
} }
}, },
{ {
label: 'Delete', label: 'Delete',
icon: 'pi pi-times',
command: () => { command: () => {
this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 }); this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
} }
}, },
{ {
label: 'Vue Website', label: 'Vue Website',
icon: 'pi pi-external-link',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
}, },
{ label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' } { label: 'Upload', to: '/fileupload' }
], ],
code: { code: {
basic: ` basic: `
<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items" /> <SplitButton label="Save" @click="save" :model="items" />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Toast /> <Toast />
<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items" /> <SplitButton label="Save" @click="save" :model="items" />
</div> </div>
</template> </template>
@ -55,26 +52,23 @@ export default {
items: [ items: [
{ {
label: 'Update', label: 'Update',
icon: 'pi pi-refresh',
command: () => { command: () => {
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 }); this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
} }
}, },
{ {
label: 'Delete', label: 'Delete',
icon: 'pi pi-times',
command: () => { command: () => {
this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 }); this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
} }
}, },
{ {
label: 'Vue Website', label: 'Vue Website',
icon: 'pi pi-external-link',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
}, },
{ label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' } { label: 'Upload', to: '/fileupload' }
] ]
}; };
}, },
@ -90,7 +84,7 @@ export default {
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Toast /> <Toast />
<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items" /> <SplitButton label="Save" @click="save" :model="items" />
</div> </div>
</template> </template>
@ -101,26 +95,23 @@ const toast = useToast();
const items = [ const items = [
{ {
label: 'Update', label: 'Update',
icon: 'pi pi-refresh',
command: () => { command: () => {
toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 }); this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
} }
}, },
{ {
label: 'Delete', label: 'Delete',
icon: 'pi pi-times',
command: () => { command: () => {
toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 }); this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
} }
}, },
{ {
label: 'Vue Website', label: 'Vue Website',
icon: 'pi pi-external-link',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
}, },
{ label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' } { label: 'Upload', to: '/fileupload' }
]; ];
const save = () => { const save = () => {

27
doc/splitbutton/DisabledDoc.vue
View File

@ -3,7 +3,7 @@
<p>When <i>disabled</i> is present, the element cannot be edited and focused.</p> <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items" disabled /> <SplitButton label="Save" @click="save" :model="items" disabled />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -15,36 +15,33 @@ export default {
items: [ items: [
{ {
label: 'Update', label: 'Update',
icon: 'pi pi-refresh',
command: () => { command: () => {
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 }); this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
} }
}, },
{ {
label: 'Delete', label: 'Delete',
icon: 'pi pi-times',
command: () => { command: () => {
this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 }); this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
} }
}, },
{ {
label: 'Vue Website', label: 'Vue Website',
icon: 'pi pi-external-link',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
}, },
{ label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' } { label: 'Upload', to: '/fileupload' }
], ],
code: { code: {
basic: ` basic: `
<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items" disabled /> <SplitButton label="Save" @click="save" :model="items" disabled />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Toast /> <Toast />
<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items" disabled /> <SplitButton label="Save" @click="save" :model="items" disabled />
</div> </div>
</template> </template>
@ -55,26 +52,23 @@ export default {
items: [ items: [
{ {
label: 'Update', label: 'Update',
icon: 'pi pi-refresh',
command: () => { command: () => {
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 }); this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
} }
}, },
{ {
label: 'Delete', label: 'Delete',
icon: 'pi pi-times',
command: () => { command: () => {
this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 }); this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
} }
}, },
{ {
label: 'Vue Website', label: 'Vue Website',
icon: 'pi pi-external-link',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
}, },
{ label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' } { label: 'Upload', to: '/fileupload' }
] ]
}; };
}, },
@ -89,7 +83,7 @@ export default {
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Toast /> <Toast />
<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items" disabled /> <SplitButton label="Save" @click="save" :model="items" disabled />
</div> </div>
</template> </template>
@ -100,26 +94,23 @@ const toast = useToast();
const items = [ const items = [
{ {
label: 'Update', label: 'Update',
icon: 'pi pi-refresh',
command: () => { command: () => {
toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 }); this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
} }
}, },
{ {
label: 'Delete', label: 'Delete',
icon: 'pi pi-times',
command: () => { command: () => {
toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 }); this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
} }
}, },
{ {
label: 'Vue Website', label: 'Vue Website',
icon: 'pi pi-external-link',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
}, },
{ label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' } { label: 'Upload', to: '/fileupload' }
]; ];
const save = () => { const save = () => {

140
doc/splitbutton/IconsDoc.vue Normal file
View File

@ -0,0 +1,140 @@
<template>
<DocSectionText v-bind="$attrs">
<p>The buttons and menuitems have support to display icons.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<SplitButton label="Save" icon="pi pi-check" menuButtonIcon="pi pi-cog" @click="save" :model="items" />
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
items: [
{
label: 'Update',
icon: 'pi pi-refresh',
command: () => {
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
}
},
{
label: 'Delete',
icon: 'pi pi-times',
command: () => {
this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
}
},
{
label: 'Vue Website',
icon: 'pi pi-external-link',
command: () => {
window.location.href = 'https://vuejs.org/';
}
},
{ label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
],
code: {
basic: `
<SplitButton label="Save" icon="pi pi-check" menuButtonIcon="pi pi-cog" @click="save" :model="items" />
`,
options: `
<template>
<div class="card flex justify-content-center">
<Toast />
<SplitButton label="Save" icon="pi pi-check" menuButtonIcon="pi pi-cog" @click="save" :model="items" />
</div>
</template>
<script>
export default {
data() {
return {
items: [
{
label: 'Update',
icon: 'pi pi-refresh',
command: () => {
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
}
},
{
label: 'Delete',
icon: 'pi pi-times',
command: () => {
this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
}
},
{
label: 'Vue Website',
icon: 'pi pi-external-link',
command: () => {
window.location.href = 'https://vuejs.org/';
}
},
{ label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
]
};
},
methods: {
save() {
this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
}
}
};
<\/script>
`,
composition: `
<template>
<div class="card flex justify-content-center">
<Toast />
<SplitButton label="Save" icon="pi pi-check" menuButtonIcon="pi pi-cog" @click="save" :model="items" />
</div>
</template>
<script setup>
import { useToast } from "primevue/usetoast";
const toast = useToast();
const items = [
{
label: 'Update',
icon: 'pi pi-refresh',
command: () => {
toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
}
},
{
label: 'Delete',
icon: 'pi pi-times',
command: () => {
toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
}
},
{
label: 'Vue Website',
icon: 'pi pi-external-link',
command: () => {
window.location.href = 'https://vuejs.org/';
}
},
{ label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
];
const save = () => {
toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
};
<\/script>
`
}
};
},
methods: {
save() {
this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
}
}
};
</script>

79
doc/splitbutton/OutlinedDoc.vue
View File

@ -3,14 +3,14 @@
<p>Outlined buttons display a border without a background initially.</p> <p>Outlined buttons display a border without a background initially.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center flex-wrap gap-3"> <div class="card flex justify-content-center flex-wrap gap-3">
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined></SplitButton> <SplitButton label="Save" :model="items" @click="save" outlined></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="secondary"></SplitButton> <SplitButton label="Save" :model="items" @click="save" outlined severity="secondary"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="success"></SplitButton> <SplitButton label="Save" :model="items" @click="save" outlined severity="success"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="info"></SplitButton> <SplitButton label="Save" :model="items" @click="save" outlined severity="info"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="warning"></SplitButton> <SplitButton label="Save" :model="items" @click="save" outlined severity="warning"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="help"></SplitButton> <SplitButton label="Save" :model="items" @click="save" outlined severity="help"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="danger"></SplitButton> <SplitButton label="Save" :model="items" @click="save" outlined severity="danger"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="contrast"></SplitButton> <SplitButton label="Save" :model="items" @click="save" outlined severity="contrast"></SplitButton>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -22,50 +22,47 @@ export default {
items: [ items: [
{ {
label: 'Update', label: 'Update',
icon: 'pi pi-refresh',
command: () => { command: () => {
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 }); this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
} }
}, },
{ {
label: 'Delete', label: 'Delete',
icon: 'pi pi-times',
command: () => { command: () => {
this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 }); this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
} }
}, },
{ {
label: 'Vue Website', label: 'Vue Website',
icon: 'pi pi-external-link',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
}, },
{ label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' } { label: 'Upload', to: '/fileupload' }
], ],
code: { code: {
basic: ` basic: `
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined></SplitButton> <SplitButton label="Save" :model="items" @click="save" outlined></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="secondary"></SplitButton> <SplitButton label="Save" :model="items" @click="save" outlined severity="secondary"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="success"></SplitButton> <SplitButton label="Save" :model="items" @click="save" outlined severity="success"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="info"></SplitButton> <SplitButton label="Save" :model="items" @click="save" outlined severity="info"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="warning"></SplitButton> <SplitButton label="Save" :model="items" @click="save" outlined severity="warning"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="help"></SplitButton> <SplitButton label="Save" :model="items" @click="save" outlined severity="help"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="danger"></SplitButton> <SplitButton label="Save" :model="items" @click="save" outlined severity="danger"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="contrast"></SplitButton> <SplitButton label="Save" :model="items" @click="save" outlined severity="contrast"></SplitButton>
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center flex-wrap gap-3"> <div class="card flex justify-content-center flex-wrap gap-3">
<Toast /> <Toast />
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined></SplitButton> <SplitButton label="Save" :model="items" @click="save" outlined></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="secondary"></SplitButton> <SplitButton label="Save" :model="items" @click="save" outlined severity="secondary"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="success"></SplitButton> <SplitButton label="Save" :model="items" @click="save" outlined severity="success"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="info"></SplitButton> <SplitButton label="Save" :model="items" @click="save" outlined severity="info"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="warning"></SplitButton> <SplitButton label="Save" :model="items" @click="save" outlined severity="warning"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="help"></SplitButton> <SplitButton label="Save" :model="items" @click="save" outlined severity="help"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="danger"></SplitButton> <SplitButton label="Save" :model="items" @click="save" outlined severity="danger"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="contrast"></SplitButton> <SplitButton label="Save" :model="items" @click="save" outlined severity="contrast"></SplitButton>
</div> </div>
</template> </template>
@ -76,26 +73,23 @@ export default {
items: [ items: [
{ {
label: 'Update', label: 'Update',
icon: 'pi pi-refresh',
command: () => { command: () => {
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 }); this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
} }
}, },
{ {
label: 'Delete', label: 'Delete',
icon: 'pi pi-times',
command: () => { command: () => {
this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 }); this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
} }
}, },
{ {
label: 'Vue Website', label: 'Vue Website',
icon: 'pi pi-external-link',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
}, },
{ label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' } { label: 'Upload', to: '/fileupload' }
] ]
} }
}, },
@ -111,14 +105,14 @@ export default {
<template> <template>
<div class="card flex justify-content-center flex-wrap gap-3"> <div class="card flex justify-content-center flex-wrap gap-3">
<Toast /> <Toast />
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined></SplitButton> <SplitButton label="Save" :model="items" @click="save" outlined></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="secondary"></SplitButton> <SplitButton label="Save" :model="items" @click="save" outlined severity="secondary"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="success"></SplitButton> <SplitButton label="Save" :model="items" @click="save" outlined severity="success"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="info"></SplitButton> <SplitButton label="Save" :model="items" @click="save" outlined severity="info"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="warning"></SplitButton> <SplitButton label="Save" :model="items" @click="save" outlined severity="warning"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="help"></SplitButton> <SplitButton label="Save" :model="items" @click="save" outlined severity="help"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="danger"></SplitButton> <SplitButton label="Save" :model="items" @click="save" outlined severity="danger"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="contrast"></SplitButton> <SplitButton label="Save" :model="items" @click="save" outlined severity="contrast"></SplitButton>
</div> </div>
</template> </template>
@ -129,26 +123,23 @@ const toast = useToast();
const items = [ const items = [
{ {
label: 'Update', label: 'Update',
icon: 'pi pi-refresh',
command: () => { command: () => {
toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 }); toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
} }
}, },
{ {
label: 'Delete', label: 'Delete',
icon: 'pi pi-times',
command: () => { command: () => {
toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 }); toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
} }
}, },
{ {
label: 'Vue Website', label: 'Vue Website',
icon: 'pi pi-external-link',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
}, },
{ label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' } { label: 'Upload', to: '/fileupload' }
]; ];
const save = () => { const save = () => {

83
doc/splitbutton/RaisedDoc.vue
View File

@ -3,14 +3,14 @@
<p>Raised buttons display a shadow to indicate elevation.</p> <p>Raised buttons display a shadow to indicate elevation.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center flex-wrap gap-3"> <div class="card flex justify-content-center flex-wrap gap-3">
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="secondary"></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised severity="secondary"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="success"></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised severity="success"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="info"></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised severity="info"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="warning"></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised severity="warning"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="help"></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised severity="help"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="danger"></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised severity="danger"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="contrast"></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised severity="contrast"></SplitButton>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -22,50 +22,47 @@ export default {
items: [ items: [
{ {
label: 'Update', label: 'Update',
icon: 'pi pi-refresh',
command: () => { command: () => {
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 }); this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
} }
}, },
{ {
label: 'Delete', label: 'Delete',
icon: 'pi pi-times',
command: () => { command: () => {
this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 }); this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
} }
}, },
{ {
label: 'Vue Website', label: 'Vue Website',
icon: 'pi pi-external-link',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
}, },
{ label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' } { label: 'Upload', to: '/fileupload' }
], ],
code: { code: {
basic: ` basic: `
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="secondary"></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised severity="secondary"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="success"></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised severity="success"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="info"></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised severity="info"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="warning"></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised severity="warning"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="help"></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised severity="help"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="danger"></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised severity="danger"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="contrast"></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised severity="contrast"></SplitButton>
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center flex-wrap gap-3"> <div class="card flex justify-content-center flex-wrap gap-3">
<Toast /> <Toast />
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="secondary"></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised severity="secondary"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="success"></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised severity="success"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="info"></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised severity="info"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="warning"></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised severity="warning"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="help"></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised severity="help"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="danger"></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised severity="danger"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="contrast"></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised severity="contrast"></SplitButton>
</div> </div>
</template> </template>
@ -76,26 +73,23 @@ export default {
items: [ items: [
{ {
label: 'Update', label: 'Update',
icon: 'pi pi-refresh',
command: () => { command: () => {
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 }); this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
} }
}, },
{ {
label: 'Delete', label: 'Delete',
icon: 'pi pi-times',
command: () => { command: () => {
this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 }); this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
} }
}, },
{ {
label: 'Vue Website', label: 'Vue Website',
icon: 'pi pi-external-link',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
}, },
{ label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' } { label: 'Upload', to: '/fileupload' }
] ]
}; };
}, },
@ -111,14 +105,14 @@ export default {
<template> <template>
<div class="card flex justify-content-center flex-wrap gap-3"> <div class="card flex justify-content-center flex-wrap gap-3">
<Toast /> <Toast />
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="secondary"></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised severity="secondary"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="success"></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised severity="success"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="info"></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised severity="info"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="warning"></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised severity="warning"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="help"></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised severity="help"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="danger"></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised severity="danger"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="contrast"></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised severity="contrast"></SplitButton>
</div> </div>
</template> </template>
@ -129,26 +123,23 @@ const toast = useToast();
const items = [ const items = [
{ {
label: 'Update', label: 'Update',
icon: 'pi pi-refresh',
command: () => { command: () => {
toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 }); this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
} }
}, },
{ {
label: 'Delete', label: 'Delete',
icon: 'pi pi-times',
command: () => { command: () => {
toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 }); this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
} }
}, },
{ {
label: 'Vue Website', label: 'Vue Website',
icon: 'pi pi-external-link',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
}, },
{ label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' } { label: 'Upload', to: '/fileupload' }
]; ];
const save = () => { const save = () => {

75
doc/splitbutton/RaisedTextDoc.vue
View File

@ -3,13 +3,13 @@
<p>Text buttons can be displayed as raised as well for elevation.</p> <p>Text buttons can be displayed as raised as well for elevation.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center flex-wrap gap-3"> <div class="card flex justify-content-center flex-wrap gap-3">
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised text></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="secondary"></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised text severity="secondary"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="success"></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised text severity="success"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="info"></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised text severity="info"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="warning"></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised text severity="warning"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="help"></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised text severity="help"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="danger"></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised text severity="danger"></SplitButton>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -21,48 +21,45 @@ export default {
items: [ items: [
{ {
label: 'Update', label: 'Update',
icon: 'pi pi-refresh',
command: () => { command: () => {
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 }); this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
} }
}, },
{ {
label: 'Delete', label: 'Delete',
icon: 'pi pi-times',
command: () => { command: () => {
this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 }); this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
} }
}, },
{ {
label: 'Vue Website', label: 'Vue Website',
icon: 'pi pi-external-link',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
}, },
{ label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' } { label: 'Upload', to: '/fileupload' }
], ],
code: { code: {
basic: ` basic: `
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised text></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="secondary"></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised text severity="secondary"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="success"></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised text severity="success"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="info"></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised text severity="info"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="warning"></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised text severity="warning"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="help"></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised text severity="help"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="danger"></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised text severity="danger"></SplitButton>
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center flex-wrap gap-3"> <div class="card flex justify-content-center flex-wrap gap-3">
<Toast /> <Toast />
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised text></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="secondary"></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised text severity="secondary"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="success"></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised text severity="success"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="info"></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised text severity="info"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="warning"></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised text severity="warning"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="help"></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised text severity="help"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="danger"></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised text severity="danger"></SplitButton>
</div> </div>
</template> </template>
@ -73,26 +70,23 @@ export default {
items: [ items: [
{ {
label: 'Update', label: 'Update',
icon: 'pi pi-refresh',
command: () => { command: () => {
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 }); this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
} }
}, },
{ {
label: 'Delete', label: 'Delete',
icon: 'pi pi-times',
command: () => { command: () => {
this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 }); this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
} }
}, },
{ {
label: 'Vue Website', label: 'Vue Website',
icon: 'pi pi-external-link',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
}, },
{ label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' } { label: 'Upload', to: '/fileupload' }
] ]
}; };
}, },
@ -108,13 +102,13 @@ export default {
<template> <template>
<div class="card flex justify-content-center flex-wrap gap-3"> <div class="card flex justify-content-center flex-wrap gap-3">
<Toast /> <Toast />
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised text></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="secondary"></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised text severity="secondary"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="success"></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised text severity="success"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="info"></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised text severity="info"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="warning"></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised text severity="warning"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="help"></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised text severity="help"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="danger"></SplitButton> <SplitButton label="Save" :model="items" @click="save" raised text severity="danger"></SplitButton>
</div> </div>
</template> </template>
@ -125,26 +119,23 @@ const toast = useToast();
const items = [ const items = [
{ {
label: 'Update', label: 'Update',
icon: 'pi pi-refresh',
command: () => { command: () => {
toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 }); this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
} }
}, },
{ {
label: 'Delete', label: 'Delete',
icon: 'pi pi-times',
command: () => { command: () => {
toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 }); this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
} }
}, },
{ {
label: 'Vue Website', label: 'Vue Website',
icon: 'pi pi-external-link',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
}, },
{ label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' } { label: 'Upload', to: '/fileupload' }
]; ];
const save = () => { const save = () => {

83
doc/splitbutton/RoundedDoc.vue
View File

@ -3,14 +3,14 @@
<p>Rounded buttons have a circular border radius.</p> <p>Rounded buttons have a circular border radius.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center flex-wrap gap-3"> <div class="card flex justify-content-center flex-wrap gap-3">
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded></SplitButton> <SplitButton label="Save" :model="items" @click="save" rounded></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="secondary"></SplitButton> <SplitButton label="Save" :model="items" @click="save" rounded severity="secondary"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="success"></SplitButton> <SplitButton label="Save" :model="items" @click="save" rounded severity="success"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="info"></SplitButton> <SplitButton label="Save" :model="items" @click="save" rounded severity="info"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="warning"></SplitButton> <SplitButton label="Save" :model="items" @click="save" rounded severity="warning"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="help"></SplitButton> <SplitButton label="Save" :model="items" @click="save" rounded severity="help"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="danger"></SplitButton> <SplitButton label="Save" :model="items" @click="save" rounded severity="danger"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="contrast"></SplitButton> <SplitButton label="Save" :model="items" @click="save" rounded severity="contrast"></SplitButton>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -22,50 +22,47 @@ export default {
items: [ items: [
{ {
label: 'Update', label: 'Update',
icon: 'pi pi-refresh',
command: () => { command: () => {
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 }); this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
} }
}, },
{ {
label: 'Delete', label: 'Delete',
icon: 'pi pi-times',
command: () => { command: () => {
this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 }); this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
} }
}, },
{ {
label: 'Vue Website', label: 'Vue Website',
icon: 'pi pi-external-link',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
}, },
{ label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' } { label: 'Upload', to: '/fileupload' }
], ],
code: { code: {
basic: ` basic: `
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded></SplitButton> <SplitButton label="Save" :model="items" @click="save" rounded></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="secondary"></SplitButton> <SplitButton label="Save" :model="items" @click="save" rounded severity="secondary"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="success"></SplitButton> <SplitButton label="Save" :model="items" @click="save" rounded severity="success"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="info"></SplitButton> <SplitButton label="Save" :model="items" @click="save" rounded severity="info"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="warning"></SplitButton> <SplitButton label="Save" :model="items" @click="save" rounded severity="warning"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="help"></SplitButton> <SplitButton label="Save" :model="items" @click="save" rounded severity="help"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="danger"></SplitButton> <SplitButton label="Save" :model="items" @click="save" rounded severity="danger"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="contrast"></SplitButton> <SplitButton label="Save" :model="items" @click="save" rounded severity="contrast"></SplitButton>
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center flex-wrap gap-3"> <div class="card flex justify-content-center flex-wrap gap-3">
<Toast /> <Toast />
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded></SplitButton> <SplitButton label="Save" :model="items" @click="save" rounded></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="secondary"></SplitButton> <SplitButton label="Save" :model="items" @click="save" rounded severity="secondary"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="success"></SplitButton> <SplitButton label="Save" :model="items" @click="save" rounded severity="success"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="info"></SplitButton> <SplitButton label="Save" :model="items" @click="save" rounded severity="info"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="warning"></SplitButton> <SplitButton label="Save" :model="items" @click="save" rounded severity="warning"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="help"></SplitButton> <SplitButton label="Save" :model="items" @click="save" rounded severity="help"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="danger"></SplitButton> <SplitButton label="Save" :model="items" @click="save" rounded severity="danger"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="contrast"></SplitButton> <SplitButton label="Save" :model="items" @click="save" rounded severity="contrast"></SplitButton>
</div> </div>
</template> </template>
@ -76,26 +73,23 @@ export default {
items: [ items: [
{ {
label: 'Update', label: 'Update',
icon: 'pi pi-refresh',
command: () => { command: () => {
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 }); this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
} }
}, },
{ {
label: 'Delete', label: 'Delete',
icon: 'pi pi-times',
command: () => { command: () => {
this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 }); this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
} }
}, },
{ {
label: 'Vue Website', label: 'Vue Website',
icon: 'pi pi-external-link',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
}, },
{ label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' } { label: 'Upload', to: '/fileupload' }
] ]
}; };
}, },
@ -111,14 +105,14 @@ export default {
<template> <template>
<div class="card flex justify-content-center flex-wrap gap-3"> <div class="card flex justify-content-center flex-wrap gap-3">
<Toast /> <Toast />
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded></SplitButton> <SplitButton label="Save" :model="items" @click="save" rounded></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="secondary"></SplitButton> <SplitButton label="Save" :model="items" @click="save" rounded severity="secondary"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="success"></SplitButton> <SplitButton label="Save" :model="items" @click="save" rounded severity="success"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="info"></SplitButton> <SplitButton label="Save" :model="items" @click="save" rounded severity="info"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="warning"></SplitButton> <SplitButton label="Save" :model="items" @click="save" rounded severity="warning"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="help"></SplitButton> <SplitButton label="Save" :model="items" @click="save" rounded severity="help"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="danger"></SplitButton> <SplitButton label="Save" :model="items" @click="save" rounded severity="danger"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="contrast"></SplitButton> <SplitButton label="Save" :model="items" @click="save" rounded severity="contrast"></SplitButton>
</div> </div>
</template> </template>
@ -129,26 +123,23 @@ const toast = useToast();
const items = [ const items = [
{ {
label: 'Update', label: 'Update',
icon: 'pi pi-refresh',
command: () => { command: () => {
toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 }); this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
} }
}, },
{ {
label: 'Delete', label: 'Delete',
icon: 'pi pi-times',
command: () => { command: () => {
toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 }); this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
} }
}, },
{ {
label: 'Vue Website', label: 'Vue Website',
icon: 'pi pi-external-link',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
}, },
{ label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' } { label: 'Upload', to: '/fileupload' }
]; ];
const save = () => { const save = () => {

83
doc/splitbutton/SeverityDoc.vue
View File

@ -3,14 +3,14 @@
<p>The <i>severity</i> property defines the variant of a button.</p> <p>The <i>severity</i> property defines the variant of a button.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center flex-wrap gap-3"> <div class="card flex justify-content-center flex-wrap gap-3">
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save"></SplitButton> <SplitButton label="Save" :model="items" @click="save"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="secondary"></SplitButton> <SplitButton label="Save" :model="items" @click="save" severity="secondary"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="success"></SplitButton> <SplitButton label="Save" :model="items" @click="save" severity="success"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="info"></SplitButton> <SplitButton label="Save" :model="items" @click="save" severity="info"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="warning"></SplitButton> <SplitButton label="Save" :model="items" @click="save" severity="warning"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="help"></SplitButton> <SplitButton label="Save" :model="items" @click="save" severity="help"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="danger"></SplitButton> <SplitButton label="Save" :model="items" @click="save" severity="danger"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="contrast"></SplitButton> <SplitButton label="Save" :model="items" @click="save" severity="contrast"></SplitButton>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -22,50 +22,47 @@ export default {
items: [ items: [
{ {
label: 'Update', label: 'Update',
icon: 'pi pi-refresh',
command: () => { command: () => {
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 }); this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
} }
}, },
{ {
label: 'Delete', label: 'Delete',
icon: 'pi pi-times',
command: () => { command: () => {
this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 }); this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
} }
}, },
{ {
label: 'Vue Website', label: 'Vue Website',
icon: 'pi pi-external-link',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
}, },
{ label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' } { label: 'Upload', to: '/fileupload' }
], ],
code: { code: {
basic: ` basic: `
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save"></SplitButton> <SplitButton label="Save" :model="items" @click="save"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="secondary"></SplitButton> <SplitButton label="Save" :model="items" @click="save" severity="secondary"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="success"></SplitButton> <SplitButton label="Save" :model="items" @click="save" severity="success"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="info"></SplitButton> <SplitButton label="Save" :model="items" @click="save" severity="info"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="warning"></SplitButton> <SplitButton label="Save" :model="items" @click="save" severity="warning"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="help"></SplitButton> <SplitButton label="Save" :model="items" @click="save" severity="help"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="danger"></SplitButton> <SplitButton label="Save" :model="items" @click="save" severity="danger"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="contrast"></SplitButton> <SplitButton label="Save" :model="items" @click="save" severity="contrast"></SplitButton>
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center flex-wrap gap-3"> <div class="card flex justify-content-center flex-wrap gap-3">
<Toast /> <Toast />
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save"></SplitButton> <SplitButton label="Save" :model="items" @click="save"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="secondary"></SplitButton> <SplitButton label="Save" :model="items" @click="save" severity="secondary"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="success"></SplitButton> <SplitButton label="Save" :model="items" @click="save" severity="success"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="info"></SplitButton> <SplitButton label="Save" :model="items" @click="save" severity="info"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="warning"></SplitButton> <SplitButton label="Save" :model="items" @click="save" severity="warning"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="help"></SplitButton> <SplitButton label="Save" :model="items" @click="save" severity="help"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="danger"></SplitButton> <SplitButton label="Save" :model="items" @click="save" severity="danger"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="contrast"></SplitButton> <SplitButton label="Save" :model="items" @click="save" severity="contrast"></SplitButton>
</div> </div>
</template> </template>
@ -76,26 +73,23 @@ export default {
items: [ items: [
{ {
label: 'Update', label: 'Update',
icon: 'pi pi-refresh',
command: () => { command: () => {
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 }); this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
} }
}, },
{ {
label: 'Delete', label: 'Delete',
icon: 'pi pi-times',
command: () => { command: () => {
this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 }); this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
} }
}, },
{ {
label: 'Vue Website', label: 'Vue Website',
icon: 'pi pi-external-link',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
}, },
{ label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' } { label: 'Upload', to: '/fileupload' }
] ]
}; };
}, },
@ -111,14 +105,14 @@ export default {
<template> <template>
<div class="card flex justify-content-center flex-wrap gap-3"> <div class="card flex justify-content-center flex-wrap gap-3">
<Toast /> <Toast />
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save"></SplitButton> <SplitButton label="Save" :model="items" @click="save"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="secondary"></SplitButton> <SplitButton label="Save" :model="items" @click="save" severity="secondary"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="success"></SplitButton> <SplitButton label="Save" :model="items" @click="save" severity="success"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="info"></SplitButton> <SplitButton label="Save" :model="items" @click="save" severity="info"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="warning"></SplitButton> <SplitButton label="Save" :model="items" @click="save" severity="warning"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="help"></SplitButton> <SplitButton label="Save" :model="items" @click="save" severity="help"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="danger"></SplitButton> <SplitButton label="Save" :model="items" @click="save" severity="danger"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="contrast"></SplitButton> <SplitButton label="Save" :model="items" @click="save" severity="contrast"></SplitButton>
</div> </div>
</template> </template>
@ -129,26 +123,23 @@ const toast = useToast();
const items = [ const items = [
{ {
label: 'Update', label: 'Update',
icon: 'pi pi-refresh',
command: () => { command: () => {
toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 }); this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
} }
}, },
{ {
label: 'Delete', label: 'Delete',
icon: 'pi pi-times',
command: () => { command: () => {
toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 }); this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
} }
}, },
{ {
label: 'Vue Website', label: 'Vue Website',
icon: 'pi pi-external-link',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
}, },
{ label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' } { label: 'Upload', to: '/fileupload' }
]; ];
const save = () => { const save = () => {

32
doc/splitbutton/TemplateDoc.vue
View File

@ -3,9 +3,11 @@
<p>Custom content inside a button is defined as children.</p> <p>Custom content inside a button is defined as children.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<SplitButton :model="items" icon="pi pi-plus" class="bg-primary border-round" @click="save"> <SplitButton :model="items" @click="save" severity="contrast">
<img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" style="width: 3rem" class="px-3" /> <span class="flex align-items-center font-bold">
<span class="mr-2 flex align-items-center font-bold">PrimeVue</span> <img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" style="height: 1rem; margin-right: 0.5rem" />
<span>PrimeVue</span>
</span>
</SplitButton> </SplitButton>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
@ -41,18 +43,22 @@ export default {
], ],
code: { code: {
basic: ` basic: `
<SplitButton :model="items" icon="pi pi-plus" class="bg-primary border-round" @click="save"> <SplitButton :model="items" @click="save" severity="contrast">
<img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" style="width: 3rem" class="px-3" /> <span class="flex align-items-center font-bold">
<span class="mr-2 flex align-items-center font-bold">PrimeVue</span> <img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" style="height: 1rem; margin-right: 0.5rem" />
<span>PrimeVue</span>
</span>
</SplitButton> </SplitButton>
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Toast /> <Toast />
<SplitButton :model="items" icon="pi pi-plus" class="bg-primary border-round" @click="save"> <SplitButton :model="items" @click="save" severity="contrast">
<img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" style="width: 3rem" class="px-3" /> <span class="flex align-items-center font-bold">
<span class="mr-2 flex align-items-center font-bold">PrimeVue</span> <img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" style="height: 1rem; margin-right: 0.5rem" />
<span>PrimeVue</span>
</span>
</SplitButton> </SplitButton>
</div> </div>
</template> </template>
@ -99,9 +105,11 @@ export default {
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Toast /> <Toast />
<SplitButton :model="items" icon="pi pi-plus" class="bg-primary border-round" @click="save"> <SplitButton :model="items" @click="save" severity="contrast">
<img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" style="width: 3rem" class="px-3" /> <span class="flex align-items-center font-bold">
<span class="mr-2 flex align-items-center font-bold">PrimeVue</span> <img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" style="height: 1rem; margin-right: 0.5rem" />
<span>PrimeVue</span>
</span>
</SplitButton> </SplitButton>
</div> </div>
</template> </template>

75
doc/splitbutton/TextDoc.vue
View File

@ -3,13 +3,13 @@
<p>Text buttons are displayed as textual elements.</p> <p>Text buttons are displayed as textual elements.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center flex-wrap gap-3"> <div class="card flex justify-content-center flex-wrap gap-3">
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text></SplitButton> <SplitButton label="Save" :model="items" @click="save" text></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="secondary"></SplitButton> <SplitButton label="Save" :model="items" @click="save" text severity="secondary"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="success"></SplitButton> <SplitButton label="Save" :model="items" @click="save" text severity="success"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="info"></SplitButton> <SplitButton label="Save" :model="items" @click="save" text severity="info"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="warning"></SplitButton> <SplitButton label="Save" :model="items" @click="save" text severity="warning"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="help"></SplitButton> <SplitButton label="Save" :model="items" @click="save" text severity="help"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="danger"></SplitButton> <SplitButton label="Save" :model="items" @click="save" text severity="danger"></SplitButton>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -21,48 +21,45 @@ export default {
items: [ items: [
{ {
label: 'Update', label: 'Update',
icon: 'pi pi-refresh',
command: () => { command: () => {
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 }); this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
} }
}, },
{ {
label: 'Delete', label: 'Delete',
icon: 'pi pi-times',
command: () => { command: () => {
this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 }); this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
} }
}, },
{ {
label: 'Vue Website', label: 'Vue Website',
icon: 'pi pi-external-link',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
}, },
{ label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' } { label: 'Upload', to: '/fileupload' }
], ],
code: { code: {
basic: ` basic: `
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text></SplitButton> <SplitButton label="Save" :model="items" @click="save" text></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="secondary"></SplitButton> <SplitButton label="Save" :model="items" @click="save" text severity="secondary"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="success"></SplitButton> <SplitButton label="Save" :model="items" @click="save" text severity="success"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="info"></SplitButton> <SplitButton label="Save" :model="items" @click="save" text severity="info"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="warning"></SplitButton> <SplitButton label="Save" :model="items" @click="save" text severity="warning"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="help"></SplitButton> <SplitButton label="Save" :model="items" @click="save" text severity="help"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="danger"></SplitButton> <SplitButton label="Save" :model="items" @click="save" text severity="danger"></SplitButton>
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center flex-wrap gap-3"> <div class="card flex justify-content-center flex-wrap gap-3">
<Toast /> <Toast />
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text></SplitButton> <SplitButton label="Save" :model="items" @click="save" text></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="secondary"></SplitButton> <SplitButton label="Save" :model="items" @click="save" text severity="secondary"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="success"></SplitButton> <SplitButton label="Save" :model="items" @click="save" text severity="success"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="info"></SplitButton> <SplitButton label="Save" :model="items" @click="save" text severity="info"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="warning"></SplitButton> <SplitButton label="Save" :model="items" @click="save" text severity="warning"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="help"></SplitButton> <SplitButton label="Save" :model="items" @click="save" text severity="help"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="danger"></SplitButton> <SplitButton label="Save" :model="items" @click="save" text severity="danger"></SplitButton>
</div> </div>
</template> </template>
@ -73,26 +70,23 @@ export default {
items: [ items: [
{ {
label: 'Update', label: 'Update',
icon: 'pi pi-refresh',
command: () => { command: () => {
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 }); this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
} }
}, },
{ {
label: 'Delete', label: 'Delete',
icon: 'pi pi-times',
command: () => { command: () => {
this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 }); this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
} }
}, },
{ {
label: 'Vue Website', label: 'Vue Website',
icon: 'pi pi-external-link',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
}, },
{ label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' } { label: 'Upload', to: '/fileupload' }
] ]
}; };
}, },
@ -108,13 +102,13 @@ export default {
<template> <template>
<div class="card flex justify-content-center flex-wrap gap-3"> <div class="card flex justify-content-center flex-wrap gap-3">
<Toast /> <Toast />
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text></SplitButton> <SplitButton label="Save" :model="items" @click="save" text></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="secondary"></SplitButton> <SplitButton label="Save" :model="items" @click="save" text severity="secondary"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="success"></SplitButton> <SplitButton label="Save" :model="items" @click="save" text severity="success"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="info"></SplitButton> <SplitButton label="Save" :model="items" @click="save" text severity="info"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="warning"></SplitButton> <SplitButton label="Save" :model="items" @click="save" text severity="warning"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="help"></SplitButton> <SplitButton label="Save" :model="items" @click="save" text severity="help"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="danger"></SplitButton> <SplitButton label="Save" :model="items" @click="save" text severity="danger"></SplitButton>
</div> </div>
</template> </template>
@ -125,26 +119,23 @@ const toast = useToast();
const items = [ const items = [
{ {
label: 'Update', label: 'Update',
icon: 'pi pi-refresh',
command: () => { command: () => {
toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 }); this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
} }
}, },
{ {
label: 'Delete', label: 'Delete',
icon: 'pi pi-times',
command: () => { command: () => {
toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 }); this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
} }
}, },
{ {
label: 'Vue Website', label: 'Vue Website',
icon: 'pi pi-external-link',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
}, },
{ label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' } { label: 'Upload', to: '/fileupload' }
]; ];
const save = () => { const save = () => {

6
pages/splitbutton/index.vue
View File

@ -14,6 +14,7 @@
import AccessibilityDoc from '@/doc/splitbutton/AccessibilityDoc.vue'; import AccessibilityDoc from '@/doc/splitbutton/AccessibilityDoc.vue';
import BasicDoc from '@/doc/splitbutton/BasicDoc.vue'; import BasicDoc from '@/doc/splitbutton/BasicDoc.vue';
import DisabledDoc from '@/doc/splitbutton/DisabledDoc.vue'; import DisabledDoc from '@/doc/splitbutton/DisabledDoc.vue';
import IconsDoc from '@/doc/splitbutton/IconsDoc.vue';
import ImportDoc from '@/doc/splitbutton/ImportDoc.vue'; import ImportDoc from '@/doc/splitbutton/ImportDoc.vue';
import OutlinedDoc from '@/doc/splitbutton/OutlinedDoc.vue'; import OutlinedDoc from '@/doc/splitbutton/OutlinedDoc.vue';
import RaisedDoc from '@/doc/splitbutton/RaisedDoc.vue'; import RaisedDoc from '@/doc/splitbutton/RaisedDoc.vue';
@ -40,6 +41,11 @@ export default {
label: 'Basic', label: 'Basic',
component: BasicDoc component: BasicDoc
}, },
{
id: 'icons',
label: 'Icons',
component: IconsDoc
},
{ {
id: 'severity', id: 'severity',
label: 'Severity', label: 'Severity',