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

Update template doc of Toast

pull/4591/head
Cagatay Civici 2023-10-07 13:06:54 +03:00
parent f823950012
commit edf0512f8e
1 changed files with 54 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
doc/toast/TemplateDoc.vue
View File

@ -3,7 +3,7 @@
<p>Custom content inside a message is defined with the <i>content</i> option.</p> <p>Custom content inside a message is defined with the <i>content</i> option.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Toast position="bottom-center" group="bc"> <Toast position="bottom-center" group="bc" @close="onClose">
<template #message="slotProps"> <template #message="slotProps">
<div class="flex flex-column align-items-center" style="flex: 1"> <div class="flex flex-column align-items-center" style="flex: 1">
<div class="text-center"> <div class="text-center">
@ -26,9 +26,10 @@
export default { export default {
data() { data() {
return { return {
visible: false,
code: { code: {
basic: ` basic: `
<Toast position="bottom-center" group="bc"> <Toast position="bottom-center" group="bc" @close="onClose">
<template #message="slotProps"> <template #message="slotProps">
<div class="flex flex-column align-items-center" style="flex: 1"> <div class="flex flex-column align-items-center" style="flex: 1">
<div class="text-center"> <div class="text-center">
@ -46,7 +47,7 @@ export default {
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Toast position="bottom-center" group="bc"> <Toast position="bottom-center" group="bc" @close="onClose">
<template #message="slotProps"> <template #message="slotProps">
<div class="flex flex-column align-items-center" style="flex: 1"> <div class="flex flex-column align-items-center" style="flex: 1">
<div class="text-center"> <div class="text-center">
@ -66,9 +67,28 @@ export default {
<script> <script>
export default { export default {
data() {
return {
visible: false
}
},
methods: { methods: {
showTemplate() { showTemplate() {
this.$toast.add({ severity: 'warn', summary: 'Are you sure?', detail: 'Proceed to confirm', group: 'bc' }); if (!this.visible) {
this.$toast.add({ severity: 'warn', summary: 'Are you sure?', detail: 'Proceed to confirm', group: 'bc' });
this.visible = true;
}
},
onConfirm() {
this.$toast.removeGroup('bc');
this.visible = false;
},
onReject() {
this.$toast.removeGroup('bc');
this.visible = false;
},
onClose() {
this.visible = false;
} }
} }
}; };
@ -76,7 +96,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Toast position="bottom-center" group="bc"> <Toast position="bottom-center" group="bc" @close="onClose">
<template #message="slotProps"> <template #message="slotProps">
<div class="flex flex-column align-items-center" style="flex: 1"> <div class="flex flex-column align-items-center" style="flex: 1">
<div class="text-center"> <div class="text-center">
@ -96,24 +116,51 @@ export default {
<script setup> <script setup>
import { useToast } from "primevue/usetoast"; import { useToast } from "primevue/usetoast";
import { ref } from 'vue';
const toast = useToast(); const toast = useToast();
const visible = ref(false);
const showTemplate = () => { const showTemplate = () => {
toast.add({ severity: 'warn', summary: 'Are you sure?', detail: 'Proceed to confirm', group: 'bc' }); if (!visible.value) {
toast.add({ severity: 'warn', summary: 'Are you sure?', detail: 'Proceed to confirm', group: 'bc' });
visible.value = true;
}
}; };
const onConfirm = () => {
toast.removeGroup('bc');
visible.value = false;
}
const onReject = () => {
toast.removeGroup('bc');
visible.value = false;
}
const onClose = () => {
visible.value = false;
}
<\/script>` <\/script>`
} }
}; };
}, },
methods: { methods: {
showTemplate() { showTemplate() {
this.$toast.add({ severity: 'warn', summary: 'Are you sure?', detail: 'Proceed to confirm', group: 'bc' }); if (!this.visible) {
this.$toast.add({ severity: 'warn', summary: 'Are you sure?', detail: 'Proceed to confirm', group: 'bc' });
this.visible = true;
}
}, },
onConfirm() { onConfirm() {
this.$toast.removeGroup('bc'); this.$toast.removeGroup('bc');
this.visible = false;
}, },
onReject() { onReject() {
this.$toast.removeGroup('bc'); this.$toast.removeGroup('bc');
this.visible = false;
},
onClose() {
this.visible = false;
} }
} }
}; };