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

Docs for Messages

pull/12/head
cagataycivici 2019-05-23 13:56:51 +03:00
parent 74f94e74a3
commit d83ad99e0c
2 changed files with 149 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,7 +20,7 @@
<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>
<h3>Auto Dismiss</h3> <h3>Auto Dismiss</h3>
<Message severity="warn" :life="5000" :sticky="false">This message will hide in 5 seconds.</Message> <Message severity="warn" :life="10000" :sticky="false">This message will hide in 10 seconds.</Message>
<h3>Validation Message</h3> <h3>Validation Message</h3>
<div class="p-grid"> <div class="p-grid">

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

@ -5,12 +5,16 @@
<h3>Import</h3> <h3>Import</h3>
<CodeHighlight lang="javascript"> <CodeHighlight lang="javascript">
import Message from 'primevue/message'; import Message from 'primevue/message';
import ValidationMessage from 'primevue/validationmessage';
</CodeHighlight> </CodeHighlight>
<h3>Getting Started</h3> <h3>Getting Started</h3>
<p>A single message is specified by Message interface in PrimeVue that defines the severity and content as the properties. <p>Message component requires a content to display.</p>
Messages to display can either be defined using the value property which should an array of Message instances.</p> <CodeHighlight>
&lt;Message&gt;Welcome to PrimeVue&lt;/Message&gt;
</CodeHighlight>
<p>Multiple messages can be displayed using the standard v-for directive.</p>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&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;
@ -30,7 +34,7 @@ data() {
</CodeHighlight> </CodeHighlight>
<h3>Severities</h3> <h3>Severities</h3>
<p>There are four possible values for the severity of a message.</p> <p>There are four possible values for the severity of a message. Default one is "info".</p>
<ul> <ul>
<li>success</li> <li>success</li>
@ -46,13 +50,17 @@ data() {
</CodeHighlight> </CodeHighlight>
<h3>Sticky</h3> <h3>Sticky</h3>
<p>Messages are cleared automatically after the timeout defined by <i>life</i> property which is 3 seconds by default. Use <i>sticky</i> mode to make them stay until <p>Messages are sticky by default, if you require them to be cleared automatically, disable <i>sticky</i> property and optionally configure the <i>life</i> property to specify how long the message
they are manually removed.</p> should be displayed which is 3000 ms by default.</p>
<CodeHighlight> <CodeHighlight>
&lt;Message severity="warn" :life="5000" :sticky="false"&gt;This message will hide in 5 seconds.&lt;/Message&gt; &lt;Message severity="warn" :life="5000" :sticky="false"&gt;This message will hide in 5 seconds.&lt;/Message&gt;
</CodeHighlight> </CodeHighlight>
<h3>ValidationMessage Component</h3> <h3>ValidationMessage Component</h3>
<CodeHighlight lang="javascript">
import Message from 'primevue/message';
</CodeHighlight>
<p>ValidationMessage component is useful in cases where a single message needs to be displayed related to an element such as forms. It has one property, <i>severity</i> of the message.</p> <p>ValidationMessage component is useful in cases where a single message needs to be displayed related to an element such as forms. It has one property, <i>severity</i> of the message.</p>
<CodeHighlight> <CodeHighlight>
&lt;InputText placeholder="Username" class="p-error" /&gt; &lt;InputText placeholder="Username" class="p-error" /&gt;
@ -64,89 +72,151 @@ data() {
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Type</th> <th>Type</th>
<th>Default</th> <th>Default</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>severity</td> <td>severity</td>
<td>string</td> <td>string</td>
<td>info</td> <td>info</td>
<td>Severity level of the message.</td> <td>Severity level of the message.</td>
</tr> </tr>
<tr> <tr>
<td>closable</td> <td>closable</td>
<td>boolean</td> <td>boolean</td>
<td>true</td> <td>true</td>
<td>Whether the message can be closed manually using the close icon.</td> <td>Whether the message can be closed manually using the close icon.</td>
</tr> </tr>
<tr> <tr>
<td>sticky</td> <td>sticky</td>
<td>element</td> <td>element</td>
<td>null</td> <td>null</td>
<td>When enabled, message is not removed automatically.</td> <td>When enabled, message is not removed automatically.</td>
</tr> </tr>
<tr> <tr>
<td>life</td> <td>life</td>
<td>number</td> <td>number</td>
<td>3000</td> <td>3000</td>
<td>Delay in milliseconds to close the message automatically.</td> <td>Delay in milliseconds to close the message automatically.</td>
</tr> </tr>
</tbody>
</table>
</div>
<h3>Properties of ValidationMessage</h3>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>severity</td>
<td>string</td>
<td>info</td>
<td>Severity level of the message.</td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h3>Styling</h3> <h3>Styling</h3>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<strong>Message</strong>
<div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Element</th> <th>Element</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>p-messages</td> <td>p-messages</td>
<td>Container element.</td> <td>Container element.</td>
</tr> </tr>
<tr> <tr>
<td>p-messages-info</td> <td>p-messages-info</td>
<td>Container element when displaying info messages.</td> <td>Container element when displaying info messages.</td>
</tr> </tr>
<tr> <tr>
<td>p-messages-warn</td> <td>p-messages-warn</td>
<td>Container element when displaying warning messages.</td> <td>Container element when displaying warning messages.</td>
</tr> </tr>
<tr> <tr>
<td>p-messages-error</td> <td>p-messages-error</td>
<td>Container element when displaying error messages.</td> <td>Container element when displaying error messages.</td>
</tr> </tr>
<tr> <tr>
<td>p-messages-success</td> <td>p-messages-success</td>
<td>Container element when displaying success messages.</td> <td>Container element when displaying success messages.</td>
</tr> </tr>
<tr> <tr>
<td>p-messages-close</td> <td>p-messages-close</td>
<td>Close icon.</td> <td>Close icon.</td>
</tr> </tr>
<tr> <tr>
<td>p-messages-icon</td> <td>p-messages-icon</td>
<td>Severity icon.</td> <td>Severity icon.</td>
</tr> </tr>
<tr> <tr>
<td>p-messages-summary</td> <td>p-messages-text</td>
<td>Summary of a message.</td> <td>Content of a message.</td>
</tr> </tr>
<tr> </tbody>
<td>p-messages-detail</td> </table>
<td>Detail of a message.</td> </div>
</tr>
<strong>ValidationMessage</strong>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-message</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-message-info</td>
<td>Container element when displaying info messages.</td>
</tr>
<tr>
<td>p-message-warn</td>
<td>Container element when displaying warning messages.</td>
</tr>
<tr>
<td>p-message-error</td>
<td>Container element when displaying error messages.</td>
</tr>
<tr>
<td>p-message-success</td>
<td>Container element when displaying success messages.</td>
</tr>
<tr>
<td>p-message-icon</td>
<td>Severity icon.</td>
</tr>
<tr>
<td>p-message-text</td>
<td>Content of a message.</td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>
@ -183,7 +253,7 @@ data() {
&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;h3&gt;Auto Dismiss&lt;/h3&gt; &lt;h3&gt;Auto Dismiss&lt;/h3&gt;
&lt;Message severity="warn" :life="5000" :sticky="false"&gt;This message will hide in 5 seconds.&lt;/Message&gt; &lt;Message severity="warn" :life="10000" :sticky="false"&gt;This message will hide in 10 seconds.&lt;/Message&gt;
&lt;h3&gt;Validation Message&lt;/h3&gt; &lt;h3&gt;Validation Message&lt;/h3&gt;
&lt;div class="p-grid"&gt; &lt;div class="p-grid"&gt;