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

Fixed #1249 - Feature Request: Templating for Toast component

pull/1361/head
Tuğçe Küçükoğlu 2021-06-25 13:10:52 +03:00
parent 030dbf22aa
commit 037183aa25
4 changed files with 135 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/toast/Toast.vue
View File

@ -2,7 +2,7 @@
<Teleport to="body">
<div ref="container" :class="containerClass" v-bind="$attrs">
<transition-group name="p-toast-message" tag="div" @enter="onEnter">
<ToastMessage v-for="msg of messages" :key="msg.id" :message="msg" @close="remove($event)"/>
<ToastMessage v-for="msg of messages" :key="msg.id" :message="msg" @close="remove($event)" :template="$slots.message"/>
</transition-group>
</div>
</Teleport>

16
src/components/toast/ToastMessage.vue
View File

@ -1,11 +1,14 @@
<template>
<div :class="containerClass" role="alert" aria-live="assertive" aria-atomic="true">
<div class="p-toast-message-content">
<span :class="iconClass"></span>
<div class="p-toast-message-text">
<span class="p-toast-summary">{{message.summary}}</span>
<div class="p-toast-detail">{{message.detail}}</div>
</div>
<template v-if="!template">
<span :class="iconClass"></span>
<div class="p-toast-message-text">
<span class="p-toast-summary">{{message.summary}}</span>
<div class="p-toast-detail">{{message.detail}}</div>
</div>
</template>
<component v-else :is="template" :message="message"></component>
<button class="p-toast-icon-close p-link" @click="onCloseClick" v-if="message.closable !== false" type="button" v-ripple>
<span class="p-toast-icon-close-icon pi pi-times"></span>
</button>
@ -20,7 +23,8 @@ export default {
name: 'ToastMessage',
emits: ['close'],
props: {
message: null
message: null,
template: null
},
closeTimeout: null,
mounted() {

33
src/views/toast/ToastDemo.vue
View File

@ -9,6 +9,26 @@
</div>
<div class="content-section implementation">
<Toast position="bottom-center" group="bc">
<template #message="slotProps">
<div class="p-d-flex p-flex-column">
<div class="p-text-center">
<i class="pi pi-exclamation-triangle" style="font-size: 3rem"></i>
<h4>{{slotProps.message.summary}}</h4>
<p>{{slotProps.message.detail}}</p>
</div>
<div class="p-grid p-fluid">
<div class="p-col-6">
<Button class="p-button-success" label="Yes" @click="onConfirm"></Button>
</div>
<div class="p-col-6">
<Button class="p-button-secondary" label="No" @click="onReject"></Button>
</div>
</div>
</div>
</template>
</Toast>
<div class="card">
<h5>Severities</h5>
<Button label="Success" class="p-button-success" @click="showSuccess" />
@ -27,6 +47,10 @@
<h5>Remove All</h5>
<Button @click="clear" label="Clear" />
<h5>Template</h5>
<Button @click="showTemplate" label="Confirm" />
</div>
</div>
@ -73,6 +97,15 @@ export default {
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});
},
showTemplate() {
this.$toast.add({severity: 'warn', summary: 'Are you sure?', detail: 'Proceed to confirm', group: 'bc'});
},
onConfirm() {
this.$toast.removeGroup('bc');
},
onReject() {
this.$toast.removeGroup('bc');
},
clear() {
this.$toast.removeAllGroups();
}

92
src/views/toast/ToastDoc.vue
View File

@ -176,6 +176,32 @@ this.$toast.add({severity:'success', summary: 'Specific Message', group: 'mykey'
<h5>Clearing Messages</h5>
<p><i>removeGroup(group)</i> clears the messages for a specific Toast whereas <i>removeAllGroups()</i> method clears all messages.</p>
<h5>Templating</h5>
<p>Templating allows customizing the content where the message instance is available as the implicit variable.</p>
<pre v-code><code><template v-pre>
&lt;Toast position="bottom-center" group="bc"&gt;
&lt;template #message="slotProps"&gt;
&lt;div class="p-d-flex p-flex-column"&gt;
&lt;div class="p-text-center"&gt;
&lt;i class="pi pi-exclamation-triangle" style="font-size: 3rem"&gt;&lt;/i&gt;
&lt;h4&gt;{{slotProps.message.summary}}&lt;/h4&gt;
&lt;p&gt;{{slotProps.message.detail}}&lt;/p&gt;
&lt;/div&gt;
&lt;div class="p-grid p-fluid"&gt;
&lt;div class="p-col-6"&gt;
&lt;Button class="p-button-success" label="Yes" @click="onConfirm" /&gt;
&lt;/div&gt;
&lt;div class="p-col-6"&gt;
&lt;Button class="p-button-secondary" label="No" @click="onReject" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;/Toast&gt;
</template>
</code></pre>
<h5>Responsive</h5>
<p>Toast styling can be adjusted per screen size with the <i>breakpoints</i> option. The value of <i>breakpoints</i> should be an object literal whose keys are the maximum screen sizes and values are the styles per screen. In example below, width of the toast messages cover the whole page on screens whose widths is smaller than 921px.</p>
<pre v-code><code>
@ -292,6 +318,26 @@ export default {
<Toast position="bottom-left" group="bl" />
<Toast position="bottom-right" group="br" />
<Toast position="bottom-center" group="bc">
<template #message="slotProps">
<div class="p-d-flex p-flex-column">
<div class="p-text-center">
<i class="pi pi-exclamation-triangle" style="font-size: 3rem"></i>
<h4>{{slotProps.message.summary}}</h4>
<p>{{slotProps.message.detail}}</p>
</div>
<div class="p-grid p-fluid">
<div class="p-col-6">
<Button class="p-button-success" label="Yes" @click="onConfirm"></Button>
</div>
<div class="p-col-6">
<Button class="p-button-secondary" label="No" @click="onReject"></Button>
</div>
</div>
</div>
</template>
</Toast>
<div class="card">
<h5>Severities</h5>
<Button label="Success" class="p-button-success" @click="showSuccess" />
@ -310,6 +356,9 @@ export default {
<h5>Remove All</h5>
<Button @click="clear" label="Clear" />
<h5>Template</h5>
<Button @click="showTemplate" label="Confirm" />
</div>
</div>
</template>
@ -351,6 +400,15 @@ export default {
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});
},
showTemplate() {
this.$toast.add({severity: 'warn', summary: 'Are you sure?', detail: 'Proceed to confirm', group: 'bc'});
},
onConfirm() {
this.$toast.removeGroup('bc');
},
onReject() {
this.$toast.removeGroup('bc');
},
clear() {
this.$toast.removeAllGroups();
}
@ -382,6 +440,26 @@ button {
<Toast position="bottom-left" group="bl" />
<Toast position="bottom-right" group="br" />
<Toast position="bottom-center" group="bc">
<template #message="slotProps">
<div class="p-d-flex p-flex-column">
<div class="p-text-center">
<i class="pi pi-exclamation-triangle" style="font-size: 3rem"></i>
<h4>{{slotProps.message.summary}}</h4>
<p>{{slotProps.message.detail}}</p>
</div>
<div class="p-grid p-fluid">
<div class="p-col-6">
<Button class="p-button-success" label="Yes" @click="onConfirm"></Button>
</div>
<div class="p-col-6">
<Button class="p-button-secondary" label="No" @click="onReject"></Button>
</div>
</div>
</div>
</template>
</Toast>
<div class="card">
<h5>Severities</h5>
<Button label="Success" class="p-button-success" @click="showSuccess" />
@ -400,6 +478,9 @@ button {
<h5>Remove All</h5>
<Button @click="clear" label="Clear" />
<h5>Template</h5>
<Button @click="showTemplate" label="Confirm" />
</div>
</div>
</template>
@ -441,12 +522,21 @@ export default defineComponent({
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});
}
const showTemplate = () => {
toast.add({severity: 'warn', summary: 'Are you sure?', detail: 'Proceed to confirm', group: 'bc'});
}
const onConfirm = () => {
toast.removeGroup('bc');
}
const onReject = () => {
toast.removeGroup('bc');
}
const clear = () => {
toast.removeAllGroups();
}
return { showSuccess, showInfo, showWarn, showError, showTopLeft, showBottomLeft,
showBottomRight, showSticky, showMultiple, clear };
showBottomRight, showSticky, showMultiple, showTemplate, onConfirm, onReject, clear };
}
});
<\\/script>