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

Additional visual cosmetics on confirm dialog demos

pull/4713/head
Cagatay Civici 2023-10-28 21:25:28 +03:00
parent d8f85ec957
commit f45070390e
2 changed files with 18 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
doc/confirmdialog/HeadlessDoc.vue
View File

@ -11,8 +11,8 @@
<span class="font-bold text-2xl block mb-2 mt-4">{{ message.header }}</span> <span class="font-bold text-2xl block mb-2 mt-4">{{ message.header }}</span>
<p class="mb-0">{{ message.message }}</p> <p class="mb-0">{{ message.message }}</p>
<div class="flex align-items-center gap-2 mt-4"> <div class="flex align-items-center gap-2 mt-4">
<Button label="Save" @click="onAccept"></Button> <Button label="Save" @click="onAccept" class="w-8rem"></Button>
<Button label="Cancel" outlined @click="onReject"></Button> <Button label="Cancel" outlined @click="onReject" class="w-8rem"></Button>
</div> </div>
</div> </div>
</template> </template>
@ -38,8 +38,8 @@ export default {
<span class="font-bold text-2xl block mb-2 mt-4">{{ message.header }}</span> <span class="font-bold text-2xl block mb-2 mt-4">{{ message.header }}</span>
<p class="mb-0">{{ message.message }}</p> <p class="mb-0">{{ message.message }}</p>
<div class="flex align-items-center gap-2 mt-4"> <div class="flex align-items-center gap-2 mt-4">
<Button label="Save" @click="onAccept"></Button> <Button label="Save" @click="onAccept" class="w-8rem"></Button>
<Button label="Cancel" outlined @click="onReject"></Button> <Button label="Cancel" outlined @click="onReject" class="w-8rem"></Button>
</div> </div>
</div> </div>
</template> </template>
@ -57,8 +57,8 @@ export default {
<span class="font-bold text-2xl block mb-2 mt-4">{{ message.header }}</span> <span class="font-bold text-2xl block mb-2 mt-4">{{ message.header }}</span>
<p class="mb-0">{{ message.message }}</p> <p class="mb-0">{{ message.message }}</p>
<div class="flex align-items-center gap-2 mt-4"> <div class="flex align-items-center gap-2 mt-4">
<Button label="Save" @click="onAccept"></Button> <Button label="Save" @click="onAccept" class="w-8rem"></Button>
<Button label="Cancel" outlined @click="onReject"></Button> <Button label="Cancel" outlined @click="onReject" class="w-8rem"></Button>
</div> </div>
</div> </div>
</template> </template>

21
doc/confirmdialog/TemplateDoc.vue
View File

@ -5,7 +5,7 @@
<ConfirmDialog group="templating"> <ConfirmDialog group="templating">
<template #message="slotProps"> <template #message="slotProps">
<div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border"> <div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border">
<i :class="slotProps.message.icon" class="text-5xl text-primary-500"></i> <i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
<p>{{ slotProps.message.message }}</p> <p>{{ slotProps.message.message }}</p>
</div> </div>
</template> </template>
@ -25,7 +25,7 @@ export default {
<ConfirmDialog group="templating"> <ConfirmDialog group="templating">
<template #message="slotProps"> <template #message="slotProps">
<div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border"> <div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border">
<i :class="slotProps.message.icon" class="text-5xl text-primary-500"></i> <i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
<p>{{ slotProps.message.message }}</p> <p>{{ slotProps.message.message }}</p>
</div> </div>
</template> </template>
@ -56,10 +56,11 @@ export default {
group: 'templating', group: 'templating',
header: 'Confirmation', header: 'Confirmation',
message: 'Please confirm to proceed moving forward.', message: 'Please confirm to proceed moving forward.',
icon: 'pi pi-question-circle', icon: 'pi pi-exclamation-circle',
acceptIcon: 'pi pi-check', acceptIcon: 'pi pi-check',
rejectIcon: 'pi pi-times', rejectIcon: 'pi pi-times',
acceptClass: 'p-button-outlined', rejectClass: 'p-button-sm',
acceptClass: 'p-button-outlined p-button-sm',
accept: () => { accept: () => {
this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 }); this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
}, },
@ -77,7 +78,7 @@ export default {
<ConfirmDialog group="templating"> <ConfirmDialog group="templating">
<template #message="slotProps"> <template #message="slotProps">
<div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border"> <div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border">
<i :class="slotProps.message.icon" class="text-5xl text-primary-500"></i> <i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
<p>{{ slotProps.message.message }}</p> <p>{{ slotProps.message.message }}</p>
</div> </div>
</template> </template>
@ -100,10 +101,11 @@ const showTemplate = () => {
group: 'templating', group: 'templating',
header: 'Confirmation', header: 'Confirmation',
message: 'Please confirm to proceed moving forward.', message: 'Please confirm to proceed moving forward.',
icon: 'pi pi-question-circle', icon: 'pi pi-exclamation-circle',
acceptIcon: 'pi pi-check', acceptIcon: 'pi pi-check',
rejectIcon: 'pi pi-times', rejectIcon: 'pi pi-times',
acceptClass: 'p-button-outlined', rejectClass: 'p-button-sm',
acceptClass: 'p-button-outlined p-button-sm',
accept: () => { accept: () => {
toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 }); toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
}, },
@ -123,10 +125,11 @@ const showTemplate = () => {
group: 'templating', group: 'templating',
header: 'Confirmation', header: 'Confirmation',
message: 'Please confirm to proceed moving forward.', message: 'Please confirm to proceed moving forward.',
icon: 'pi pi-question-circle', icon: 'pi pi-exclamation-circle',
acceptIcon: 'pi pi-check', acceptIcon: 'pi pi-check',
rejectIcon: 'pi pi-times', rejectIcon: 'pi pi-times',
acceptClass: 'p-button-outlined', rejectClass: 'p-button-sm',
acceptClass: 'p-button-outlined p-button-sm',
accept: () => { accept: () => {
this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 }); this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
}, },