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

Toast demos updated

pull/3711/head
Tuğçe Küçükoğlu 2023-03-07 15:50:28 +03:00
parent a16c34e742
commit 1ddebd977c
5 changed files with 38 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
doc/toast/BasicDoc.vue
View File

@ -31,7 +31,7 @@ export default {
export default { export default {
methods: { methods: {
show() { show() {
this.$toast.add({ severity: 'info', summary: 'Info', detail: 'Message Content' }); this.$toast.add({ severity: 'info', summary: 'Info', detail: 'Message Content', life: 3000 });
} }
} }
}; };
@ -49,7 +49,7 @@ import { useToast } from "primevue/usetoast";
const toast = useToast(); const toast = useToast();
const show = () => { const show = () => {
toast.add({ severity: 'info', summary: 'Info', detail: 'Message Content' }); toast.add({ severity: 'info', summary: 'Info', detail: 'Message Content', life: 3000 });
}; };
<\/script>` <\/script>`
} }
@ -57,7 +57,7 @@ const show = () => {
}, },
methods: { methods: {
show() { show() {
this.$toast.add({ severity: 'info', summary: 'Info', detail: 'Message Content' }); this.$toast.add({ severity: 'info', summary: 'Info', detail: 'Message Content', life: 3000 });
} }
} }
}; };

21
doc/toast/MultipleDoc.vue
View File

@ -37,9 +37,10 @@ export default {
export default { export default {
methods: { methods: {
showMultiple() { showMultiple() {
this.$toast.add({ severity: 'info', summary: 'Message 1', detail: 'Message 1 Content', life: 3000 }); this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Message Content', life: 3000 });
this.$toast.add({ severity: 'info', summary: 'Message 2', detail: 'Message 2 Content', life: 3000 }); this.$toast.add({ severity: 'info', summary: 'Info', detail: 'Message Content', life: 3050 });
this.$toast.add({ severity: 'info', summary: 'Message 3', detail: 'Message 3 Content', life: 3000 }); this.$toast.add({ severity: 'warn', summary: 'Warning', detail: 'Message Content', life: 3100 });
this.$toast.add({ severity: 'error', summary: 'Error', detail: 'Message Content', life: 3150 });
}, },
clear() { clear() {
this.$toast.removeAllGroups(); this.$toast.removeAllGroups();
@ -63,9 +64,10 @@ import { useToast } from "primevue/usetoast";
const toast = useToast(); const toast = useToast();
const showMultiple = () => { const showMultiple = () => {
toast.add({ severity: 'info', summary: 'Message 1', detail: 'Message 1 Content', life: 3000 }); toast.add({ severity: 'success', summary: 'Success', detail: 'Message Content', life: 3000 });
toast.add({ severity: 'info', summary: 'Message 2', detail: 'Message 2 Content', life: 3000 }); toast.add({ severity: 'info', summary: 'Info', detail: 'Message Content', life: 3050 });
toast.add({ severity: 'info', summary: 'Message 3', detail: 'Message 3 Content', life: 3000 }); toast.add({ severity: 'warn', summary: 'Warning', detail: 'Message Content', life: 3100 });
toast.add({ severity: 'error', summary: 'Error', detail: 'Message Content', life: 3150 });
}; };
const clear = () => { const clear = () => {
@ -77,9 +79,10 @@ const clear = () => {
}, },
methods: { methods: {
showMultiple() { showMultiple() {
this.$toast.add({ severity: 'info', summary: 'Message 1', detail: 'Message 1 Content', life: 3000 }); this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Message Content', life: 3000 });
this.$toast.add({ severity: 'info', summary: 'Message 2', detail: 'Message 2 Content', life: 3000 }); this.$toast.add({ severity: 'info', summary: 'Info', detail: 'Message Content', life: 3050 });
this.$toast.add({ severity: 'info', summary: 'Message 3', detail: 'Message 3 Content', life: 3000 }); this.$toast.add({ severity: 'warn', summary: 'Warning', detail: 'Message Content', life: 3100 });
this.$toast.add({ severity: 'error', summary: 'Error', detail: 'Message Content', life: 3150 });
}, },
clear() { clear() {
this.$toast.removeAllGroups(); this.$toast.removeAllGroups();

24
doc/toast/SeverityDoc.vue
View File

@ -43,16 +43,16 @@ export default {
export default { export default {
methods: { methods: {
showSuccess() { showSuccess() {
this.$toast.add({ severity: 'success', summary: 'Success Message', detail: 'Message Content' }); this.$toast.add({ severity: 'success', summary: 'Success Message', detail: 'Message Content', life: 3000 });
}, },
showInfo() { showInfo() {
this.$toast.add({ severity: 'info', summary: 'Info Message', detail: 'Message Content' }); this.$toast.add({ severity: 'info', summary: 'Info Message', detail: 'Message Content', life: 3000 });
}, },
showWarn() { showWarn() {
this.$toast.add({ severity: 'warn', summary: 'Warn Message', detail: 'Message Content' }); this.$toast.add({ severity: 'warn', summary: 'Warn Message', detail: 'Message Content', life: 3000 });
}, },
showError() { showError() {
this.$toast.add({ severity: 'error', summary: 'Error Message', detail: 'Message Content' }); this.$toast.add({ severity: 'error', summary: 'Error Message', detail: 'Message Content', life: 3000 });
} }
} }
}; };
@ -75,19 +75,19 @@ import { useToast } from "primevue/usetoast";
const toast = useToast(); const toast = useToast();
const showSuccess = () => { const showSuccess = () => {
toast.add({ severity: 'success', summary: 'Success Message', detail: 'Message Content' }); toast.add({ severity: 'success', summary: 'Success Message', detail: 'Message Content', life: 3000 });
}; };
const showInfo = () => { const showInfo = () => {
toast.add({ severity: 'info', summary: 'Info Message', detail: 'Message Content' }); toast.add({ severity: 'info', summary: 'Info Message', detail: 'Message Content', life: 3000 });
}; };
const showWarn = () => { const showWarn = () => {
toast.add({ severity: 'warn', summary: 'Warn Message', detail: 'Message Content' }); toast.add({ severity: 'warn', summary: 'Warn Message', detail: 'Message Content', life: 3000 });
}; };
const showError = () => { const showError = () => {
toast.add({ severity: 'error', summary: 'Error Message', detail: 'Message Content' }); toast.add({ severity: 'error', summary: 'Error Message', detail: 'Message Content', life: 3000 });
}; };
<\/script>` <\/script>`
} }
@ -95,16 +95,16 @@ const showError = () => {
}, },
methods: { methods: {
showSuccess() { showSuccess() {
this.$toast.add({ severity: 'success', summary: 'Success Message', detail: 'Message Content' }); this.$toast.add({ severity: 'success', summary: 'Success Message', detail: 'Message Content', life: 3000 });
}, },
showInfo() { showInfo() {
this.$toast.add({ severity: 'info', summary: 'Info Message', detail: 'Message Content' }); this.$toast.add({ severity: 'info', summary: 'Info Message', detail: 'Message Content', life: 3000 });
}, },
showWarn() { showWarn() {
this.$toast.add({ severity: 'warn', summary: 'Warn Message', detail: 'Message Content' }); this.$toast.add({ severity: 'warn', summary: 'Warn Message', detail: 'Message Content', life: 3000 });
}, },
showError() { showError() {
this.$toast.add({ severity: 'error', summary: 'Error Message', detail: 'Message Content' }); this.$toast.add({ severity: 'error', summary: 'Error Message', detail: 'Message Content', life: 3000 });
} }
} }
}; };

14
doc/toast/StickyDoc.vue
View File

@ -26,11 +26,11 @@ export default {
<script> <script>
export default { export default {
methods: { methods: {
showSticky() { showSticky() {
this.$toast.add({ severity: 'info', summary: 'Sticky Message', detail: 'Message Content', life: 3000 }); this.$toast.add({ severity: 'info', summary: 'Sticky Message', detail: 'Message Content'});
} }
} }
}; };
<\/script>`, <\/script>`,
composition: ` composition: `
@ -46,7 +46,7 @@ import { useToast } from "primevue/usetoast";
const toast = useToast(); const toast = useToast();
const showSticky = () => { const showSticky = () => {
toast.add({ severity: 'info', summary: 'Sticky Message', detail: 'Message Content', life: 3000 }); toast.add({ severity: 'info', summary: 'Sticky Message', detail: 'Message Content'});
}; };
<\/script>` <\/script>`
} }
@ -54,7 +54,7 @@ const showSticky = () => {
}, },
methods: { methods: {
showSticky() { showSticky() {
this.$toast.add({ severity: 'info', summary: 'Sticky Message', detail: 'Message Content', life: 3000 }); this.$toast.add({ severity: 'info', summary: 'Sticky Message', detail: 'Message Content' });
} }
} }
}; };

12
doc/toast/TemplateDoc.vue
View File

@ -8,8 +8,7 @@
<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">
<i class="pi pi-exclamation-triangle" style="font-size: 3rem"></i> <i class="pi pi-exclamation-triangle" style="font-size: 3rem"></i>
<h4>{{ slotProps.message.summary }}</h4> <div class="font-bold text-xl my-3">{{ slotProps.message.summary }}</div>
<p>{{ slotProps.message.detail }}</p>
</div> </div>
<div class="flex gap-2"> <div class="flex gap-2">
<Button severity="success" label="Yes" @click="onConfirm()"></Button> <Button severity="success" label="Yes" @click="onConfirm()"></Button>
@ -34,8 +33,7 @@ export default {
<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">
<i class="pi pi-exclamation-triangle" style="font-size: 3rem"></i> <i class="pi pi-exclamation-triangle" style="font-size: 3rem"></i>
<h4>{{ slotProps.message.summary }}</h4> <div class="font-bold text-xl my-3">{{ slotProps.message.summary }}</div>
<p>{{ slotProps.message.detail }}</p>
</div> </div>
<div class="flex gap-2"> <div class="flex gap-2">
<Button severity="success" label="Yes" @click="onConfirm()"></Button> <Button severity="success" label="Yes" @click="onConfirm()"></Button>
@ -53,8 +51,7 @@ export default {
<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">
<i class="pi pi-exclamation-triangle" style="font-size: 3rem"></i> <i class="pi pi-exclamation-triangle" style="font-size: 3rem"></i>
<h4>{{ slotProps.message.summary }}</h4> <div class="font-bold text-xl my-3">{{ slotProps.message.summary }}</div>
<p>{{ slotProps.message.detail }}</p>
</div> </div>
<div class="flex gap-2"> <div class="flex gap-2">
<Button severity="success" label="Yes" @click="onConfirm()"></Button> <Button severity="success" label="Yes" @click="onConfirm()"></Button>
@ -84,8 +81,7 @@ export default {
<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">
<i class="pi pi-exclamation-triangle" style="font-size: 3rem"></i> <i class="pi pi-exclamation-triangle" style="font-size: 3rem"></i>
<h4>{{ slotProps.message.summary }}</h4> <div class="font-bold text-xl my-3">{{ slotProps.message.summary }}</div>
<p>{{ slotProps.message.detail }}</p>
</div> </div>
<div class="flex gap-2"> <div class="flex gap-2">
<Button severity="success" label="Yes" @click="onConfirm()"></Button> <Button severity="success" label="Yes" @click="onConfirm()"></Button>