mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-10 09:22:34 +00:00
Update dialog docs
This commit is contained in:
parent
88bb7e6980
commit
c9901c3c0c
8 changed files with 168 additions and 108 deletions
|
@ -4,8 +4,8 @@
|
|||
</DocSectionText>
|
||||
<ConfirmDialog></ConfirmDialog>
|
||||
<div class="card flex flex-wrap gap-2 justify-content-center">
|
||||
<Button @click="confirm1()" icon="pi pi-check" label="Confirm"></Button>
|
||||
<Button @click="confirm2()" icon="pi pi-times" label="Delete" severity="danger"></Button>
|
||||
<Button @click="confirm1()" label="Save" outlined></Button>
|
||||
<Button @click="confirm2()" label="Delete" severity="danger" outlined></Button>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
@ -17,16 +17,16 @@ export default {
|
|||
code: {
|
||||
basic: `
|
||||
<ConfirmDialog></ConfirmDialog>
|
||||
<Button @click="confirm1()" icon="pi pi-check" label="Confirm"></Button>
|
||||
<Button @click="confirm2()" icon="pi pi-times" label="Delete" severity="danger"></Button>
|
||||
<Button @click="confirm1()" label="Save" outlined></Button>
|
||||
<Button @click="confirm2()" label="Delete" severity="danger" outlined></Button>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<Toast />
|
||||
<ConfirmDialog></ConfirmDialog>
|
||||
<div class="card flex flex-wrap gap-2 justify-content-center">
|
||||
<Button @click="confirm1()" icon="pi pi-check" label="Confirm"></Button>
|
||||
<Button @click="confirm2()" icon="pi pi-times" label="Delete" severity="danger"></Button>
|
||||
<Button @click="confirm1()" label="Save" outlined></Button>
|
||||
<Button @click="confirm2()" label="Delete" severity="danger" outlined></Button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -38,6 +38,9 @@ export default {
|
|||
message: 'Are you sure you want to proceed?',
|
||||
header: 'Confirmation',
|
||||
icon: 'pi pi-exclamation-triangle',
|
||||
rejectClass: 'p-button-secondary p-button-outlined',
|
||||
rejectLabel: 'Cancel',
|
||||
acceptLabel: 'Save',
|
||||
accept: () => {
|
||||
this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
|
||||
},
|
||||
|
@ -49,10 +52,12 @@ export default {
|
|||
confirm2() {
|
||||
this.$confirm.require({
|
||||
message: 'Do you want to delete this record?',
|
||||
header: 'Delete Confirmation',
|
||||
header: 'Danger Zone',
|
||||
icon: 'pi pi-info-circle',
|
||||
rejectClass: 'p-button-text p-button-text',
|
||||
acceptClass: 'p-button-danger p-button-text',
|
||||
rejectLabel: 'Cancel',
|
||||
acceptLabel: 'Delete',
|
||||
rejectClass: 'p-button-secondary p-button-outlined',
|
||||
acceptClass: 'p-button-danger',
|
||||
accept: () => {
|
||||
this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
|
||||
},
|
||||
|
@ -70,8 +75,8 @@ export default {
|
|||
<Toast />
|
||||
<ConfirmDialog></ConfirmDialog>
|
||||
<div class="card flex flex-wrap gap-2 justify-content-center">
|
||||
<Button @click="confirm1()" icon="pi pi-check" label="Confirm"></Button>
|
||||
<Button @click="confirm2()" icon="pi pi-times" label="Delete" severity="danger"></Button>
|
||||
<Button @click="confirm1()" label="Save" outlined></Button>
|
||||
<Button @click="confirm2()" label="Delete" severity="danger" outlined></Button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -87,6 +92,9 @@ const confirm1 = () => {
|
|||
message: 'Are you sure you want to proceed?',
|
||||
header: 'Confirmation',
|
||||
icon: 'pi pi-exclamation-triangle',
|
||||
rejectClass: 'p-button-secondary p-button-outlined',
|
||||
rejectLabel: 'Cancel',
|
||||
acceptLabel: 'Save',
|
||||
accept: () => {
|
||||
toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
|
||||
},
|
||||
|
@ -99,10 +107,12 @@ const confirm1 = () => {
|
|||
const confirm2 = () => {
|
||||
confirm.require({
|
||||
message: 'Do you want to delete this record?',
|
||||
header: 'Delete Confirmation',
|
||||
header: 'Danger Zone',
|
||||
icon: 'pi pi-info-circle',
|
||||
rejectClass: 'p-button-text p-button-text',
|
||||
acceptClass: 'p-button-danger p-button-text',
|
||||
rejectLabel: 'Cancel',
|
||||
acceptLabel: 'Delete',
|
||||
rejectClass: 'p-button-secondary p-button-outlined',
|
||||
acceptClass: 'p-button-danger',
|
||||
accept: () => {
|
||||
toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
|
||||
},
|
||||
|
@ -122,6 +132,9 @@ const confirm2 = () => {
|
|||
message: 'Are you sure you want to proceed?',
|
||||
header: 'Confirmation',
|
||||
icon: 'pi pi-exclamation-triangle',
|
||||
rejectClass: 'p-button-secondary p-button-outlined',
|
||||
rejectLabel: 'Cancel',
|
||||
acceptLabel: 'Save',
|
||||
accept: () => {
|
||||
this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
|
||||
},
|
||||
|
@ -133,10 +146,12 @@ const confirm2 = () => {
|
|||
confirm2() {
|
||||
this.$confirm.require({
|
||||
message: 'Do you want to delete this record?',
|
||||
header: 'Delete Confirmation',
|
||||
header: 'Danger Zone',
|
||||
icon: 'pi pi-info-circle',
|
||||
rejectClass: 'p-button-text p-button-text',
|
||||
acceptClass: 'p-button-danger p-button-text',
|
||||
rejectLabel: 'Cancel',
|
||||
acceptLabel: 'Delete',
|
||||
rejectClass: 'p-button-secondary p-button-outlined',
|
||||
acceptClass: 'p-button-danger',
|
||||
accept: () => {
|
||||
this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
|
||||
},
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue