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

SplitButton demo updates

pull/3699/head
Tuğçe Küçükoğlu 2023-03-03 15:41:43 +03:00
parent 80ac32f864
commit 37d0c633f3
10 changed files with 179 additions and 179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
doc/splitbutton/OutlinedDoc.vue
View File

@ -3,13 +3,13 @@
<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" class="p-button-outlined mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-secondary mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="secondary" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-success mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="success" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-info mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="info" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-warning mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="warning" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-help mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="help" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-danger mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="danger" class="mb-2"></SplitButton>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -44,24 +44,24 @@ export default {
], ],
code: { code: {
basic: ` basic: `
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-secondary mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="secondary" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-success mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="success" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-info mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="info" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-warning mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="warning" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-help mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="help" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-danger mb-2"></SplitButton>`, <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="danger" class="mb-2"></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" class="p-button-outlined mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-secondary mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="secondary" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-success mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="success" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-info mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="info" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-warning mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="warning" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-help mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="help" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-danger mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="danger" class="mb-2"></SplitButton>
</div> </div>
</template> </template>
@ -106,13 +106,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" class="p-button-outlined mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-secondary mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="secondary" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-success mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="success" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-info mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="info" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-warning mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="warning" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-help mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="help" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-danger mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="danger" class="mb-2"></SplitButton>
</div> </div>
</template> </template>

56
doc/splitbutton/RaisedDoc.vue
View File

@ -3,13 +3,13 @@
<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" class="p-button-raised mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-secondary mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="secondary" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-success mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="success" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-info mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="info" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-warning mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="warning" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-help mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="help" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-danger mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="danger" class="mb-2"></SplitButton>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -44,24 +44,24 @@ export default {
], ],
code: { code: {
basic: ` basic: `
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-secondary mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="secondary" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-success mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="success" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-info mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="info" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-warning mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="warning" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-help mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="help" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-danger mb-2"></SplitButton>`, <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="danger" class="mb-2"></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" class="p-button-raised mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-secondary mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="secondary" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-success mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="success" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-info mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="info" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-warning mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="warning" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-help mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="help" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-danger mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="danger" class="mb-2"></SplitButton>
</div> </div>
</template> </template>
@ -106,13 +106,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" class="p-button-raised mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-secondary mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="secondary" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-success mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="success" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-info mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="info" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-warning mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="warning" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-help mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="help" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-danger mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="danger" class="mb-2"></SplitButton>
</div> </div>
</template> </template>

56
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" class="p-button-raised p-button-text mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-secondary mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="secondary" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-success mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="success" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-info mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="info" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-warning mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="warning" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-help mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="help" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-danger mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="danger" class="mb-2"></SplitButton>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -44,24 +44,24 @@ export default {
], ],
code: { code: {
basic: ` basic: `
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-secondary mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="secondary" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-success mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="success" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-info mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="info" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-warning mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="warning" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-help mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="help" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-danger mb-2"></SplitButton>`, <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="danger" class="mb-2"></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" class="p-button-raised p-button-text mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-secondary mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="secondary" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-success mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="success" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-info mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="info" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-warning mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="warning" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-help mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="help" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-danger mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="danger" class="mb-2"></SplitButton>
</div> </div>
</template> </template>
@ -106,13 +106,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" class="p-button-raised p-button-text mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-secondary mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="secondary" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-success mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="success" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-info mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="info" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-warning mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="warning" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-help mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="help" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-danger mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="danger" class="mb-2"></SplitButton>
</div> </div>
</template> </template>

56
doc/splitbutton/RoundedDoc.vue
View File

@ -3,13 +3,13 @@
<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" class="p-button-rounded mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-secondary mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="secondary" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-success mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="success" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-info mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="info" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-warning mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="warning" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-help mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="help" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-danger mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="danger" class="mb-2"></SplitButton>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -44,24 +44,24 @@ export default {
], ],
code: { code: {
basic: ` basic: `
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-secondary mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="secondary" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-success mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="success" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-info mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="info" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-warning mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="warning" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-help mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="help" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-danger mb-2"></SplitButton>`, <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="danger" class="mb-2"></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" class="p-button-rounded mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-secondary mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="secondary" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-success mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="success" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-info mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="info" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-warning mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="warning" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-help mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="help" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-danger mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="danger" class="mb-2"></SplitButton>
</div> </div>
</template> </template>
@ -106,13 +106,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" class="p-button-rounded mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-secondary mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="secondary" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-success mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="success" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-info mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="info" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-warning mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="warning" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-help mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="help" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-danger mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="danger" class="mb-2"></SplitButton>
</div> </div>
</template> </template>

48
doc/splitbutton/SeverityDoc.vue
View File

@ -4,12 +4,12 @@
</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" class="mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-secondary mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="secondary" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-success mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="success" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-info mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="info" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-warning mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="warning" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-help mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="help" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-danger mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="danger" class="mb-2"></SplitButton>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -45,23 +45,23 @@ export default {
code: { code: {
basic: ` basic: `
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-secondary mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="secondary" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-success mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="success" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-info mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="info" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-warning mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="warning" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-help mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="help" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-danger mb-2"></SplitButton>`, <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="danger" class="mb-2"></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" class="mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-secondary mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="secondary" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-success mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="success" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-info mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="info" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-warning mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="warning" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-help mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="help" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-danger mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="danger" class="mb-2"></SplitButton>
</div> </div>
</template> </template>
@ -107,12 +107,12 @@ export default {
<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" class="mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-secondary mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="secondary" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-success mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="success" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-info mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="info" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-warning mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="warning" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-help mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="help" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-danger mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="danger" class="mb-2"></SplitButton>
</div> </div>
</template> </template>

4
doc/splitbutton/SizesDoc.vue
View File

@ -3,9 +3,9 @@
<p>SplitButton provides <i>small</i> and <i>large</i> sizes as alternatives to the standard.</p> <p>SplitButton provides <i>small</i> and <i>large</i> sizes as alternatives to the standard.</p>
</DocSectionText> </DocSectionText>
<div class="card flex align-items-center justify-content-center flex-wrap gap-3"> <div class="card flex align-items-center justify-content-center flex-wrap gap-3">
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-sm"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" size="small"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-lg"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" size="large"></SplitButton>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>

2
doc/splitbutton/TemplateDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>SplitButton has a default command button and a collection of additional options defined by the <i>model</i> property.</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"> <SplitButton :model="items" icon="pi pi-plus" class="bg-primary border-round">

56
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" @click="save" class="p-button-text mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-secondary mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="secondary" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-success mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="success" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-info mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="info" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-warning mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="warning" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-help mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="help" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-danger mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="danger" class="mb-2"></SplitButton>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -44,24 +44,24 @@ export default {
], ],
code: { code: {
basic: ` basic: `
<SplitButton label="Save" :model="items" @click="save" class="p-button-text mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-secondary mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="secondary" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-success mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="success" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-info mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="info" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-warning mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="warning" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-help mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="help" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-danger mb-2"></SplitButton>`, <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="danger" class="mb-2"></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" @click="save" class="p-button-text mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-secondary mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="secondary" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-success mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="success" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-info mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="info" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-warning mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="warning" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-help mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="help" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-danger mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="danger" class="mb-2"></SplitButton>
</div> </div>
</template> </template>
@ -106,13 +106,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" @click="save" class="p-button-text mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-secondary mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="secondary" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-success mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="success" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-info mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="info" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-warning mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="warning" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-help mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="help" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-danger mb-2"></SplitButton> <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="danger" class="mb-2"></SplitButton>
</div> </div>
</template> </template>

8
doc/toolbar/BasicDoc.vue
View File

@ -8,7 +8,7 @@
<Button label="New" icon="pi pi-plus" class="mr-2" /> <Button label="New" icon="pi pi-plus" class="mr-2" />
<Button label="Upload" icon="pi pi-upload" severity="success" /> <Button label="Upload" icon="pi pi-upload" severity="success" />
<i class="pi pi-bars p-toolbar-separator mr-2" /> <i class="pi pi-bars p-toolbar-separator mr-2" />
<SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-warning"></SplitButton> <SplitButton label="Save" icon="pi pi-check" :model="items" severity="warning"></SplitButton>
</template> </template>
<template #end> <template #end>
@ -56,7 +56,7 @@ export default {
<Button label="New" icon="pi pi-plus" class="mr-2" /> <Button label="New" icon="pi pi-plus" class="mr-2" />
<Button label="Upload" icon="pi pi-upload" severity="success" /> <Button label="Upload" icon="pi pi-upload" severity="success" />
<i class="pi pi-bars p-toolbar-separator mr-2" /> <i class="pi pi-bars p-toolbar-separator mr-2" />
<SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-warning"></SplitButton> <SplitButton label="Save" icon="pi pi-check" :model="items" severity="warning"></SplitButton>
</template> </template>
<template #end> <template #end>
@ -73,7 +73,7 @@ export default {
<Button label="New" icon="pi pi-plus" class="mr-2" /> <Button label="New" icon="pi pi-plus" class="mr-2" />
<Button label="Upload" icon="pi pi-upload" severity="success" /> <Button label="Upload" icon="pi pi-upload" severity="success" />
<i class="pi pi-bars p-toolbar-separator mr-2" /> <i class="pi pi-bars p-toolbar-separator mr-2" />
<SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-warning"></SplitButton> <SplitButton label="Save" icon="pi pi-check" :model="items" severity="warning"></SplitButton>
</template> </template>
<template #end> <template #end>
@ -125,7 +125,7 @@ export default {
<Button label="New" icon="pi pi-plus" class="mr-2" /> <Button label="New" icon="pi pi-plus" class="mr-2" />
<Button label="Upload" icon="pi pi-upload" severity="success" /> <Button label="Upload" icon="pi pi-upload" severity="success" />
<i class="pi pi-bars p-toolbar-separator mr-2" /> <i class="pi pi-bars p-toolbar-separator mr-2" />
<SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-warning"></SplitButton> <SplitButton label="Save" icon="pi pi-check" :model="items" severity="warning"></SplitButton>
</template> </template>
<template #end> <template #end>

16
pages/splitbutton/index.vue
View File

@ -36,16 +36,16 @@ export default {
label: 'Severity', label: 'Severity',
component: SeverityDoc component: SeverityDoc
}, },
{
id: 'outlined',
label: 'Outlined',
component: OutlinedDoc
},
{ {
id: 'raised', id: 'raised',
label: 'Raised', label: 'Raised',
component: RaisedDoc component: RaisedDoc
}, },
{
id: 'rounded',
label: 'Rounded',
component: RoundedDoc
},
{ {
id: 'text', id: 'text',
label: 'Text', label: 'Text',
@ -57,9 +57,9 @@ export default {
component: RaisedTextDoc component: RaisedTextDoc
}, },
{ {
id: 'rounded', id: 'outlined',
label: 'Rounded', label: 'Outlined',
component: RoundedDoc component: OutlinedDoc
}, },
{ {
id: 'sizes', id: 'sizes',