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

add inline message to views

pull/619/head
Tuğçe Küçükoğlu 2020-11-02 11:24:48 +03:00
parent f5434c89a5
commit 0861a0abc9
2 changed files with 34 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,6 +21,23 @@
<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> </transition-group>
<h5>Inline Messages</h5>
<p>Message component is used to display inline messages mostly within forms.</p>
<div class="p-grid">
<div class="p-col-12 p-md-3">
<InlineMessage severity="info">Message Content</InlineMessage>
</div>
<div class="p-col-12 p-md-3">
<InlineMessage severity="success">Message Content</InlineMessage>
</div>
<div class="p-col-12 p-md-3">
<InlineMessage severity="warn">Message Content</InlineMessage>
</div>
<div class="p-col-12 p-md-3">
<InlineMessage severity="error">Message Content</InlineMessage>
</div>
</div>
<h5>Auto Dismiss</h5> <h5>Auto Dismiss</h5>
<Message severity="warn" :life="3000" :sticky="false">This message will hide in 3 seconds.</Message> <Message severity="warn" :life="3000" :sticky="false">This message will hide in 3 seconds.</Message>

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

@ -260,6 +260,23 @@ import InlineMessage from 'primevue/inlinemessage';
&lt;h5&gt;Auto Dismiss&lt;/h5&gt; &lt;h5&gt;Auto Dismiss&lt;/h5&gt;
&lt;Message severity="warn" :life="3000" :sticky="false"&gt;This message will hide in 3 seconds.&lt;/Message&gt; &lt;Message severity="warn" :life="3000" :sticky="false"&gt;This message will hide in 3 seconds.&lt;/Message&gt;
&lt;h5&gt;Inline Messages&lt;/h5&gt;
&lt;p&gt;Message component is used to display inline messages mostly within forms.&lt;/p&gt;
&lt;div class="p-grid"&gt;
&lt;div class="p-col-12 p-md-3"&gt;
&lt;InlineMessage severity="info"&gt;Message Content&lt;/InlineMessage&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-3"&gt;
&lt;InlineMessage severity="success"&gt;Message Content&lt;/InlineMessage&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-3"&gt;
&lt;InlineMessage severity="warn"&gt;Message Content&lt;/InlineMessage&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-3"&gt;
&lt;InlineMessage severity="error"&gt;Message Content&lt;/InlineMessage&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h5&gt;Validation Message&lt;/h5&gt; &lt;h5&gt;Validation Message&lt;/h5&gt;
&lt;div class="p-formgroup-inline" style="margin-bottom:.5rem"&gt; &lt;div class="p-formgroup-inline" style="margin-bottom:.5rem"&gt;
&lt;label for="username" class="p-sr-only"&gt;Username&lt;/label&gt; &lt;label for="username" class="p-sr-only"&gt;Username&lt;/label&gt;