Updated split button demos
Cagatay Civici
parent
f66d40e863
commit
b8caa0a49f
|
|
@ -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>
|
||||
</DocSectionText>
|
||||
<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>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -15,36 +15,33 @@ export default {
|
|||
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' }
|
||||
{ label: 'Upload', to: '/fileupload' }
|
||||
],
|
||||
code: {
|
||||
basic: `
|
||||
<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items" />
|
||||
<SplitButton label="Save" @click="save" :model="items" />
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Toast />
|
||||
<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items" />
|
||||
<SplitButton label="Save" @click="save" :model="items" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -55,26 +52,23 @@ export default {
|
|||
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' }
|
||||
{ label: 'Upload', to: '/fileupload' }
|
||||
]
|
||||
};
|
||||
},
|
||||
|
|
@ -90,7 +84,7 @@ export default {
|
|||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Toast />
|
||||
<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items" />
|
||||
<SplitButton label="Save" @click="save" :model="items" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -101,26 +95,23 @@ const toast = useToast();
|
|||
const items = [
|
||||
{
|
||||
label: 'Update',
|
||||
icon: 'pi pi-refresh',
|
||||
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',
|
||||
icon: 'pi pi-times',
|
||||
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',
|
||||
icon: 'pi pi-external-link',
|
||||
command: () => {
|
||||
window.location.href = 'https://vuejs.org/';
|
||||
}
|
||||
},
|
||||
{ label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
|
||||
{ label: 'Upload', to: '/fileupload' }
|
||||
];
|
||||
|
||||
const save = () => {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
|
||||
</DocSectionText>
|
||||
<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>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -15,36 +15,33 @@ export default {
|
|||
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' }
|
||||
{ label: 'Upload', to: '/fileupload' }
|
||||
],
|
||||
code: {
|
||||
basic: `
|
||||
<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items" disabled />
|
||||
<SplitButton label="Save" @click="save" :model="items" disabled />
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Toast />
|
||||
<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items" disabled />
|
||||
<SplitButton label="Save" @click="save" :model="items" disabled />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -55,26 +52,23 @@ export default {
|
|||
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' }
|
||||
{ label: 'Upload', to: '/fileupload' }
|
||||
]
|
||||
};
|
||||
},
|
||||
|
|
@ -89,7 +83,7 @@ export default {
|
|||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Toast />
|
||||
<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items" disabled />
|
||||
<SplitButton label="Save" @click="save" :model="items" disabled />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -100,26 +94,23 @@ const toast = useToast();
|
|||
const items = [
|
||||
{
|
||||
label: 'Update',
|
||||
icon: 'pi pi-refresh',
|
||||
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',
|
||||
icon: 'pi pi-times',
|
||||
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',
|
||||
icon: 'pi pi-external-link',
|
||||
command: () => {
|
||||
window.location.href = 'https://vuejs.org/';
|
||||
}
|
||||
},
|
||||
{ label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
|
||||
{ label: 'Upload', to: '/fileupload' }
|
||||
];
|
||||
|
||||
const save = () => {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -3,14 +3,14 @@
|
|||
<p>Outlined buttons display a border without a background initially.</p>
|
||||
</DocSectionText>
|
||||
<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" icon="pi pi-plus" @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" icon="pi pi-plus" @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" icon="pi pi-plus" @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" icon="pi pi-plus" @click="save" outlined severity="contrast"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" outlined></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" outlined severity="secondary"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" outlined severity="success"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" outlined severity="info"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" outlined severity="warning"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" outlined severity="help"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" outlined severity="danger"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" outlined severity="contrast"></SplitButton>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -22,50 +22,47 @@ export default {
|
|||
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' }
|
||||
{ label: 'Upload', to: '/fileupload' }
|
||||
],
|
||||
code: {
|
||||
basic: `
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @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" icon="pi pi-plus" @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" icon="pi pi-plus" @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" icon="pi pi-plus" @click="save" outlined severity="contrast"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" outlined></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" outlined severity="secondary"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" outlined severity="success"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" outlined severity="info"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" outlined severity="warning"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" outlined severity="help"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" outlined severity="danger"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" outlined severity="contrast"></SplitButton>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center flex-wrap gap-3">
|
||||
<Toast />
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @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" icon="pi pi-plus" @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" icon="pi pi-plus" @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" icon="pi pi-plus" @click="save" outlined severity="contrast"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" outlined></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" outlined severity="secondary"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" outlined severity="success"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" outlined severity="info"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" outlined severity="warning"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" outlined severity="help"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" outlined severity="danger"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" outlined severity="contrast"></SplitButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -76,26 +73,23 @@ export default {
|
|||
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' }
|
||||
{ label: 'Upload', to: '/fileupload' }
|
||||
]
|
||||
}
|
||||
},
|
||||
|
|
@ -111,14 +105,14 @@ export default {
|
|||
<template>
|
||||
<div class="card flex justify-content-center flex-wrap gap-3">
|
||||
<Toast />
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @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" icon="pi pi-plus" @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" icon="pi pi-plus" @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" icon="pi pi-plus" @click="save" outlined severity="contrast"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" outlined></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" outlined severity="secondary"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" outlined severity="success"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" outlined severity="info"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" outlined severity="warning"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" outlined severity="help"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" outlined severity="danger"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" outlined severity="contrast"></SplitButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -129,26 +123,23 @@ 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' }
|
||||
{ label: 'Upload', to: '/fileupload' }
|
||||
];
|
||||
|
||||
const save = () => {
|
||||
|
|
|
|||
|
|
@ -3,14 +3,14 @@
|
|||
<p>Raised buttons display a shadow to indicate elevation.</p>
|
||||
</DocSectionText>
|
||||
<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" icon="pi pi-plus" @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" icon="pi pi-plus" @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" icon="pi pi-plus" @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" icon="pi pi-plus" @click="save" raised severity="contrast"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised severity="secondary"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised severity="success"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised severity="info"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised severity="warning"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised severity="help"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised severity="danger"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised severity="contrast"></SplitButton>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -22,50 +22,47 @@ export default {
|
|||
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' }
|
||||
{ label: 'Upload', to: '/fileupload' }
|
||||
],
|
||||
code: {
|
||||
basic: `
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @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" icon="pi pi-plus" @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" icon="pi pi-plus" @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" icon="pi pi-plus" @click="save" raised severity="contrast"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised severity="secondary"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised severity="success"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised severity="info"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised severity="warning"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised severity="help"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised severity="danger"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised severity="contrast"></SplitButton>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center flex-wrap gap-3">
|
||||
<Toast />
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @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" icon="pi pi-plus" @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" icon="pi pi-plus" @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" icon="pi pi-plus" @click="save" raised severity="contrast"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised severity="secondary"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised severity="success"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised severity="info"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised severity="warning"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised severity="help"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised severity="danger"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised severity="contrast"></SplitButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -76,26 +73,23 @@ export default {
|
|||
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' }
|
||||
{ label: 'Upload', to: '/fileupload' }
|
||||
]
|
||||
};
|
||||
},
|
||||
|
|
@ -111,14 +105,14 @@ export default {
|
|||
<template>
|
||||
<div class="card flex justify-content-center flex-wrap gap-3">
|
||||
<Toast />
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @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" icon="pi pi-plus" @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" icon="pi pi-plus" @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" icon="pi pi-plus" @click="save" raised severity="contrast"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised severity="secondary"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised severity="success"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised severity="info"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised severity="warning"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised severity="help"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised severity="danger"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised severity="contrast"></SplitButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -129,26 +123,23 @@ const toast = useToast();
|
|||
const items = [
|
||||
{
|
||||
label: 'Update',
|
||||
icon: 'pi pi-refresh',
|
||||
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',
|
||||
icon: 'pi pi-times',
|
||||
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',
|
||||
icon: 'pi pi-external-link',
|
||||
command: () => {
|
||||
window.location.href = 'https://vuejs.org/';
|
||||
}
|
||||
},
|
||||
{ label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
|
||||
{ label: 'Upload', to: '/fileupload' }
|
||||
];
|
||||
|
||||
const save = () => {
|
||||
|
|
|
|||
|
|
@ -3,13 +3,13 @@
|
|||
<p>Text buttons can be displayed as raised as well for elevation.</p>
|
||||
</DocSectionText>
|
||||
<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" icon="pi pi-plus" @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" icon="pi pi-plus" @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" icon="pi pi-plus" @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></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised text severity="secondary"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised text severity="success"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised text severity="info"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised text severity="warning"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised text severity="help"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised text severity="danger"></SplitButton>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -21,48 +21,45 @@ export default {
|
|||
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' }
|
||||
{ label: 'Upload', to: '/fileupload' }
|
||||
],
|
||||
code: {
|
||||
basic: `
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @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" icon="pi pi-plus" @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" icon="pi pi-plus" @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" icon="pi pi-plus" @click="save" raised text severity="danger"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised text></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised text severity="secondary"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised text severity="success"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised text severity="info"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised text severity="warning"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised text severity="help"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised text severity="danger"></SplitButton>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center flex-wrap gap-3">
|
||||
<Toast />
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @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" icon="pi pi-plus" @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" icon="pi pi-plus" @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" icon="pi pi-plus" @click="save" raised text severity="danger"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised text></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised text severity="secondary"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised text severity="success"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised text severity="info"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised text severity="warning"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised text severity="help"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised text severity="danger"></SplitButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -73,26 +70,23 @@ export default {
|
|||
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' }
|
||||
{ label: 'Upload', to: '/fileupload' }
|
||||
]
|
||||
};
|
||||
},
|
||||
|
|
@ -108,13 +102,13 @@ export default {
|
|||
<template>
|
||||
<div class="card flex justify-content-center flex-wrap gap-3">
|
||||
<Toast />
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @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" icon="pi pi-plus" @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" icon="pi pi-plus" @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" icon="pi pi-plus" @click="save" raised text severity="danger"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised text></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised text severity="secondary"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised text severity="success"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised text severity="info"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised text severity="warning"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised text severity="help"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" raised text severity="danger"></SplitButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -125,26 +119,23 @@ const toast = useToast();
|
|||
const items = [
|
||||
{
|
||||
label: 'Update',
|
||||
icon: 'pi pi-refresh',
|
||||
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',
|
||||
icon: 'pi pi-times',
|
||||
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',
|
||||
icon: 'pi pi-external-link',
|
||||
command: () => {
|
||||
window.location.href = 'https://vuejs.org/';
|
||||
}
|
||||
},
|
||||
{ label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
|
||||
{ label: 'Upload', to: '/fileupload' }
|
||||
];
|
||||
|
||||
const save = () => {
|
||||
|
|
|
|||
|
|
@ -3,14 +3,14 @@
|
|||
<p>Rounded buttons have a circular border radius.</p>
|
||||
</DocSectionText>
|
||||
<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" icon="pi pi-plus" @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" icon="pi pi-plus" @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" icon="pi pi-plus" @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" icon="pi pi-plus" @click="save" rounded severity="contrast"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" rounded></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" rounded severity="secondary"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" rounded severity="success"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" rounded severity="info"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" rounded severity="warning"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" rounded severity="help"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" rounded severity="danger"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" rounded severity="contrast"></SplitButton>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -22,50 +22,47 @@ export default {
|
|||
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' }
|
||||
{ label: 'Upload', to: '/fileupload' }
|
||||
],
|
||||
code: {
|
||||
basic: `
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @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" icon="pi pi-plus" @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" icon="pi pi-plus" @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" icon="pi pi-plus" @click="save" rounded severity="contrast"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" rounded></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" rounded severity="secondary"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" rounded severity="success"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" rounded severity="info"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" rounded severity="warning"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" rounded severity="help"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" rounded severity="danger"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" rounded severity="contrast"></SplitButton>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center flex-wrap gap-3">
|
||||
<Toast />
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @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" icon="pi pi-plus" @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" icon="pi pi-plus" @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" icon="pi pi-plus" @click="save" rounded severity="contrast"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" rounded></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" rounded severity="secondary"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" rounded severity="success"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" rounded severity="info"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" rounded severity="warning"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" rounded severity="help"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" rounded severity="danger"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" rounded severity="contrast"></SplitButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -76,26 +73,23 @@ export default {
|
|||
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' }
|
||||
{ label: 'Upload', to: '/fileupload' }
|
||||
]
|
||||
};
|
||||
},
|
||||
|
|
@ -111,14 +105,14 @@ export default {
|
|||
<template>
|
||||
<div class="card flex justify-content-center flex-wrap gap-3">
|
||||
<Toast />
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @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" icon="pi pi-plus" @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" icon="pi pi-plus" @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" icon="pi pi-plus" @click="save" rounded severity="contrast"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" rounded></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" rounded severity="secondary"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" rounded severity="success"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" rounded severity="info"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" rounded severity="warning"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" rounded severity="help"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" rounded severity="danger"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" rounded severity="contrast"></SplitButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -129,26 +123,23 @@ const toast = useToast();
|
|||
const items = [
|
||||
{
|
||||
label: 'Update',
|
||||
icon: 'pi pi-refresh',
|
||||
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',
|
||||
icon: 'pi pi-times',
|
||||
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',
|
||||
icon: 'pi pi-external-link',
|
||||
command: () => {
|
||||
window.location.href = 'https://vuejs.org/';
|
||||
}
|
||||
},
|
||||
{ label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
|
||||
{ label: 'Upload', to: '/fileupload' }
|
||||
];
|
||||
|
||||
const save = () => {
|
||||
|
|
|
|||
|
|
@ -3,14 +3,14 @@
|
|||
<p>The <i>severity</i> property defines the variant of a button.</p>
|
||||
</DocSectionText>
|
||||
<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" icon="pi pi-plus" @click="save" severity="secondary"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="success"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="info"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="warning"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="help"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @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"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" severity="secondary"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" severity="success"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" severity="info"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" severity="warning"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" severity="help"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" severity="danger"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" severity="contrast"></SplitButton>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -22,50 +22,47 @@ export default {
|
|||
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' }
|
||||
{ label: 'Upload', to: '/fileupload' }
|
||||
],
|
||||
code: {
|
||||
basic: `
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="secondary"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="success"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="info"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="warning"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="help"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @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"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" severity="secondary"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" severity="success"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" severity="info"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" severity="warning"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" severity="help"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" severity="danger"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" severity="contrast"></SplitButton>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center flex-wrap gap-3">
|
||||
<Toast />
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="secondary"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="success"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="info"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="warning"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="help"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @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"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" severity="secondary"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" severity="success"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" severity="info"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" severity="warning"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" severity="help"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" severity="danger"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" severity="contrast"></SplitButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -76,26 +73,23 @@ export default {
|
|||
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' }
|
||||
{ label: 'Upload', to: '/fileupload' }
|
||||
]
|
||||
};
|
||||
},
|
||||
|
|
@ -111,14 +105,14 @@ export default {
|
|||
<template>
|
||||
<div class="card flex justify-content-center flex-wrap gap-3">
|
||||
<Toast />
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="secondary"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="success"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="info"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="warning"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="help"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @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"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" severity="secondary"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" severity="success"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" severity="info"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" severity="warning"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" severity="help"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" severity="danger"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" severity="contrast"></SplitButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -129,26 +123,23 @@ const toast = useToast();
|
|||
const items = [
|
||||
{
|
||||
label: 'Update',
|
||||
icon: 'pi pi-refresh',
|
||||
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',
|
||||
icon: 'pi pi-times',
|
||||
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',
|
||||
icon: 'pi pi-external-link',
|
||||
command: () => {
|
||||
window.location.href = 'https://vuejs.org/';
|
||||
}
|
||||
},
|
||||
{ label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
|
||||
{ label: 'Upload', to: '/fileupload' }
|
||||
];
|
||||
|
||||
const save = () => {
|
||||
|
|
|
|||
|
|
@ -3,9 +3,11 @@
|
|||
<p>Custom content inside a button is defined as children.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-content-center">
|
||||
<SplitButton :model="items" icon="pi pi-plus" class="bg-primary border-round" @click="save">
|
||||
<img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" style="width: 3rem" class="px-3" />
|
||||
<span class="mr-2 flex align-items-center font-bold">PrimeVue</span>
|
||||
<SplitButton :model="items" @click="save" severity="contrast">
|
||||
<span class="flex align-items-center font-bold">
|
||||
<img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" style="height: 1rem; margin-right: 0.5rem" />
|
||||
<span>PrimeVue</span>
|
||||
</span>
|
||||
</SplitButton>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
|
|
@ -41,18 +43,22 @@ export default {
|
|||
],
|
||||
code: {
|
||||
basic: `
|
||||
<SplitButton :model="items" icon="pi pi-plus" class="bg-primary border-round" @click="save">
|
||||
<img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" style="width: 3rem" class="px-3" />
|
||||
<span class="mr-2 flex align-items-center font-bold">PrimeVue</span>
|
||||
<SplitButton :model="items" @click="save" severity="contrast">
|
||||
<span class="flex align-items-center font-bold">
|
||||
<img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" style="height: 1rem; margin-right: 0.5rem" />
|
||||
<span>PrimeVue</span>
|
||||
</span>
|
||||
</SplitButton>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Toast />
|
||||
<SplitButton :model="items" icon="pi pi-plus" class="bg-primary border-round" @click="save">
|
||||
<img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" style="width: 3rem" class="px-3" />
|
||||
<span class="mr-2 flex align-items-center font-bold">PrimeVue</span>
|
||||
<SplitButton :model="items" @click="save" severity="contrast">
|
||||
<span class="flex align-items-center font-bold">
|
||||
<img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" style="height: 1rem; margin-right: 0.5rem" />
|
||||
<span>PrimeVue</span>
|
||||
</span>
|
||||
</SplitButton>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -99,9 +105,11 @@ export default {
|
|||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Toast />
|
||||
<SplitButton :model="items" icon="pi pi-plus" class="bg-primary border-round" @click="save">
|
||||
<img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" style="width: 3rem" class="px-3" />
|
||||
<span class="mr-2 flex align-items-center font-bold">PrimeVue</span>
|
||||
<SplitButton :model="items" @click="save" severity="contrast">
|
||||
<span class="flex align-items-center font-bold">
|
||||
<img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" style="height: 1rem; margin-right: 0.5rem" />
|
||||
<span>PrimeVue</span>
|
||||
</span>
|
||||
</SplitButton>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -3,13 +3,13 @@
|
|||
<p>Text buttons are displayed as textual elements.</p>
|
||||
</DocSectionText>
|
||||
<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" icon="pi pi-plus" @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" icon="pi pi-plus" @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" icon="pi pi-plus" @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></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" text severity="secondary"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" text severity="success"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" text severity="info"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" text severity="warning"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" text severity="help"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" text severity="danger"></SplitButton>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -21,48 +21,45 @@ export default {
|
|||
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' }
|
||||
{ label: 'Upload', to: '/fileupload' }
|
||||
],
|
||||
code: {
|
||||
basic: `
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @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" icon="pi pi-plus" @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" icon="pi pi-plus" @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></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" text severity="secondary"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" text severity="success"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" text severity="info"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" text severity="warning"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" text severity="help"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" text severity="danger"></SplitButton>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center flex-wrap gap-3">
|
||||
<Toast />
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @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" icon="pi pi-plus" @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" icon="pi pi-plus" @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></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" text severity="secondary"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" text severity="success"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" text severity="info"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" text severity="warning"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" text severity="help"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" text severity="danger"></SplitButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -73,26 +70,23 @@ export default {
|
|||
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' }
|
||||
{ label: 'Upload', to: '/fileupload' }
|
||||
]
|
||||
};
|
||||
},
|
||||
|
|
@ -108,13 +102,13 @@ export default {
|
|||
<template>
|
||||
<div class="card flex justify-content-center flex-wrap gap-3">
|
||||
<Toast />
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @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" icon="pi pi-plus" @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" icon="pi pi-plus" @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></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" text severity="secondary"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" text severity="success"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" text severity="info"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" text severity="warning"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" text severity="help"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" text severity="danger"></SplitButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -125,26 +119,23 @@ const toast = useToast();
|
|||
const items = [
|
||||
{
|
||||
label: 'Update',
|
||||
icon: 'pi pi-refresh',
|
||||
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',
|
||||
icon: 'pi pi-times',
|
||||
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',
|
||||
icon: 'pi pi-external-link',
|
||||
command: () => {
|
||||
window.location.href = 'https://vuejs.org/';
|
||||
}
|
||||
},
|
||||
{ label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
|
||||
{ label: 'Upload', to: '/fileupload' }
|
||||
];
|
||||
|
||||
const save = () => {
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
import AccessibilityDoc from '@/doc/splitbutton/AccessibilityDoc.vue';
|
||||
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 OutlinedDoc from '@/doc/splitbutton/OutlinedDoc.vue';
|
||||
import RaisedDoc from '@/doc/splitbutton/RaisedDoc.vue';
|
||||
|
|
@ -40,6 +41,11 @@ export default {
|
|||
label: 'Basic',
|
||||
component: BasicDoc
|
||||
},
|
||||
{
|
||||
id: 'icons',
|
||||
label: 'Icons',
|
||||
component: IconsDoc
|
||||
},
|
||||
{
|
||||
id: 'severity',
|
||||
label: 'Severity',
|
||||
|
|
|
|||
Loading…
Reference in New Issue