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

24
doc/toast/SeverityDoc.vue
View File

@ -43,16 +43,16 @@ export default {
export default {
methods: {
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() {
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() {
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() {
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 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 = () => {
toast.add({ severity: 'info', summary: 'Info Message', detail: 'Message Content' });
toast.add({ severity: 'info', summary: 'Info Message', detail: 'Message Content', life: 3000 });
};
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 = () => {
toast.add({ severity: 'error', summary: 'Error Message', detail: 'Message Content' });
toast.add({ severity: 'error', summary: 'Error Message', detail: 'Message Content', life: 3000 });
};
<\/script>`
}
@ -95,16 +95,16 @@ const showError = () => {
},
methods: {
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() {
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() {
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() {
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>
export default {
methods: {
showSticky() {
this.$toast.add({ severity: 'info', summary: 'Sticky Message', detail: 'Message Content', life: 3000 });
}
}
methods: {
showSticky() {
this.$toast.add({ severity: 'info', summary: 'Sticky Message', detail: 'Message Content'});
}
}
};
<\/script>`,
composition: `
@ -46,7 +46,7 @@ import { useToast } from "primevue/usetoast";
const toast = useToast();
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>`
}
@ -54,7 +54,7 @@ const showSticky = () => {
},
methods: {
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="text-center">
<i class="pi pi-exclamation-triangle" style="font-size: 3rem"></i>
<h4>{{ slotProps.message.summary }}</h4>
<p>{{ slotProps.message.detail }}</p>
<div class="font-bold text-xl my-3">{{ slotProps.message.summary }}</div>
</div>
<div class="flex gap-2">
<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="text-center">
<i class="pi pi-exclamation-triangle" style="font-size: 3rem"></i>
<h4>{{ slotProps.message.summary }}</h4>
<p>{{ slotProps.message.detail }}</p>
<div class="font-bold text-xl my-3">{{ slotProps.message.summary }}</div>
</div>
<div class="flex gap-2">
<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="text-center">
<i class="pi pi-exclamation-triangle" style="font-size: 3rem"></i>
<h4>{{ slotProps.message.summary }}</h4>
<p>{{ slotProps.message.detail }}</p>
<div class="font-bold text-xl my-3">{{ slotProps.message.summary }}</div>
</div>
<div class="flex gap-2">
<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="text-center">
<i class="pi pi-exclamation-triangle" style="font-size: 3rem"></i>
<h4>{{ slotProps.message.summary }}</h4>
<p>{{ slotProps.message.detail }}</p>
<div class="font-bold text-xl my-3">{{ slotProps.message.summary }}</div>
</div>
<div class="flex gap-2">
<Button severity="success" label="Yes" @click="onConfirm()"></Button>