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

Fixed animations of Toast and Messages

pull/12/head
cagataycivici 2019-05-23 17:13:18 +03:00
parent c182f92c96
commit d855b68897
4 changed files with 20 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,8 @@
<template> <template>
<div :class="containerClass"> <div :class="containerClass">
<ToastMessage v-for="msg of messages" :key="msg.id" :message="msg" @close="remove($event)"/> <transition-group name="p-toast-message" tag="div">
<ToastMessage v-for="msg of messages" :key="msg.id" :message="msg" @close="remove($event)"/>
</transition-group>
</div> </div>
</template> </template>

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

@ -1,18 +1,16 @@
<template> <template>
<transition name="p-toast-message"> <div :class="containerClass">
<div :class="containerClass"> <div class="p-toast-item">
<div class="p-toast-item"> <button class="p-toast-icon-close p-link" @click="close">
<button class="p-toast-icon-close p-link" @click="close"> <span class="p-toast-icon-close-icon pi pi-times"></span>
<span class="p-toast-icon-close-icon pi pi-times"></span> </button>
</button> <span :class="iconClass"></span>
<span :class="iconClass"></span> <div class="p-toast-message">
<div class="p-toast-message"> <span class="p-toast-title">{{message.summary}}</span>
<span class="p-toast-title">{{message.summary}}</span> <div class="p-toast-detail">{{message.detail}}</div>
<div class="p-toast-detail">{{message.detail}}</div>
</div>
</div> </div>
</div> </div>
</transition> </div>
</template> </template>
<script> <script>

4
src/views/message/MessageDemo.vue
View File

@ -17,7 +17,9 @@
<h3>Dynamic</h3> <h3>Dynamic</h3>
<Button label="Show" @click="addMessages()" /> <Button label="Show" @click="addMessages()" />
<Button label="Clear" @click="removeMessages()" class="p-button-secondary"/> <Button label="Clear" @click="removeMessages()" class="p-button-secondary"/>
<Message v-for="msg of messages" :severity="msg.severity" :key="msg.content">{{msg.content}}</Message> <transition-group name="p-messages" tag="div">
<Message v-for="msg of messages" :severity="msg.severity" :key="msg.content">{{msg.content}}</Message>
</transition-group>
<h3>Auto Dismiss</h3> <h3>Auto Dismiss</h3>
<Message severity="warn" :life="10000" :sticky="false">This message will hide in 10 seconds.</Message> <Message severity="warn" :life="10000" :sticky="false">This message will hide in 10 seconds.</Message>

5
src/views/message/MessageDoc.vue
View File

@ -250,7 +250,10 @@ import Message from 'primevue/message';
&lt;h3&gt;Dynamic&lt;/h3&gt; &lt;h3&gt;Dynamic&lt;/h3&gt;
&lt;Button label="Show" @click="addMessages()" /&gt; &lt;Button label="Show" @click="addMessages()" /&gt;
&lt;Button label="Clear" @click="removeMessages()" class="p-button-secondary"/&gt; &lt;Button label="Clear" @click="removeMessages()" class="p-button-secondary"/&gt;
&lt;Message v-for="msg of messages" :severity="msg.severity" :key="msg.content"&gt;{{msg.content}}&lt;/Message&gt;
&lt;transition-group name="p-messages" tag="div"&gt;
&lt;Message v-for="msg of messages" :severity="msg.severity" :key="msg.content"&gt;{{msg.content}}&lt;/Message&gt;
&lt;/transition-group&gt;
&lt;h3&gt;Auto Dismiss&lt;/h3&gt; &lt;h3&gt;Auto Dismiss&lt;/h3&gt;
&lt;Message severity="warn" :life="10000" :sticky="false"&gt;This message will hide in 10 seconds.&lt;/Message&gt; &lt;Message severity="warn" :life="10000" :sticky="false"&gt;This message will hide in 10 seconds.&lt;/Message&gt;