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

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

@ -1,6 +1,8 @@
<template> <template>
<div :class="containerClass"> <div :class="containerClass">
<transition-group name="p-toast-message" tag="div">
<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)"/>
</transition-group>
</div> </div>
</template> </template>

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

@ -1,5 +1,4 @@
<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">
@ -12,7 +11,6 @@
</div> </div>
</div> </div>
</div> </div>
</transition>
</template> </template>
<script> <script>

2
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"/>
<transition-group name="p-messages" tag="div">
<Message v-for="msg of messages" :severity="msg.severity" :key="msg.content">{{msg.content}}</Message> <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>

3
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;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;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;