<template> <ClientOnly ><AppDoc name="MessageDemo" :sources="sources" github="message/MessageDemo.vue"> <h5>Import via Module</h5> <pre v-code.script><code> import Message from 'primevue/message'; </code></pre> <h5>Import via CDN</h5> <pre v-code><code> <script src="https://unpkg.com/primevue@^3/core/core.min.js"></script> </code></pre> <h5>Getting Started</h5> <p>Message component requires a content to display.</p> <pre v-code><code> <Message>Welcome to PrimeVue</Message> </code></pre> <p>Multiple messages can be displayed using the standard v-for directive.</p> <pre v-code><code><template v-pre> <Message v-for="msg of messages" :severity="msg.severity" :key="msg.content">{{msg.content}}</Message> </template> </code></pre> <pre v-code.script><code> data() { return { messages: [ {severity: 'info', content: 'Dynamic Info Message'}, {severity: 'success', content: 'Dynamic Success Message'}, {severity: 'warn', content: 'Dynamic Warning Message'} ] } } </code></pre> <h5>Severities</h5> <p>There are four possible values for the severity of a message. Default one is "info".</p> <ul> <li>success</li> <li>info</li> <li>warn</li> <li>error</li> </ul> <h5>Closable</h5> <p>Messages are closable by default resulting in a close icon being displayed on top right corner. In order to disable closable messages, set <i>closable</i> to false.</p> <pre v-code><code> <Message severity="success" :closable="false">Order Submitted</Message> </code></pre> <h5>Sticky</h5> <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 should be displayed which is 3000 ms by default. </p> <pre v-code><code> <Message severity="warn" :life="5000" :sticky="false">This message will hide in 5 seconds.</Message> </code></pre> <h5>Inline Message Component</h5> <pre v-code.script><code> import InlineMessage from 'primevue/inlinemessage'; </code></pre> <p>InlineMessage 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> <pre v-code><code> <InputText placeholder="Username" class="p-invalid" /> <InlineMessage>Field is required</InlineMessage> </code></pre> <h5>Properties of Message</h5> <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> <tr> <td>closable</td> <td>boolean</td> <td>true</td> <td>Whether the message can be closed manually using the close icon.</td> </tr> <tr> <td>sticky</td> <td>boolean</td> <td>null</td> <td>When enabled, message is not removed automatically.</td> </tr> <tr> <td>life</td> <td>number</td> <td>3000</td> <td>Delay in milliseconds to close the message automatically.</td> </tr> <tr> <td>icon</td> <td>string</td> <td>null</td> <td>Display a custom icon for the message.</td> </tr> <tr> <td>closeIcon</td> <td>string</td> <td>pi pi-times</td> <td>Icon to display in the message close button.</td> </tr> <tr> <td>closeButtonProps</td> <td>object</td> <td>null</td> <td>Uses to pass all properties of the HTMLButtonElement to the close button.</td> </tr> </tbody> </table> </div> <h5>Properties of InlineMessage</h5> <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>error</td> <td>Severity level of the message.</td> </tr> </tbody> </table> </div> <h5>Events of Message</h5> <div class="doc-tablewrapper"> <table class="doc-table"> <thead> <tr> <th>Name</th> <th>Parameters</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td>close</td> <td>event: Browser event</td> <td>Callback to invoke when a message is closed.</td> </tr> </tbody> </table> </div> <h5>Styling</h5> <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <strong>Message</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-close</td> <td>Close icon.</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> </table> </div> <strong>InlineMessage</strong> <div class="doc-tablewrapper"> <table class="doc-table"> <thead> <tr> <th>Name</th> <th>Element</th> </tr> </thead> <tbody> <tr> <td>p-inline-message</td> <td>Container element.</td> </tr> <tr> <td>p-inline-message-info</td> <td>Container element when displaying info messages.</td> </tr> <tr> <td>p-inline-message-warn</td> <td>Container element when displaying warning messages.</td> </tr> <tr> <td>p-inline-message-error</td> <td>Container element when displaying error messages.</td> </tr> <tr> <td>p-inline-message-success</td> <td>Container element when displaying success messages.</td> </tr> <tr> <td>p-inline-message-icon</td> <td>Severity icon.</td> </tr> <tr> <td>p-inline-message-text</td> <td>Content of a message.</td> </tr> </tbody> </table> </div> <h5>Accessibility</h5> <h6>Screen Reader</h6> <p> Message components use <i>alert</i> role that implicitly defines <i>aria-live</i> as "assertive" and <i>aria-atomic</i> as "true". Since any attribute is passed to the root element, attributes like <i>aria-labelledby</i> and <i>aria-label</i> can optionally be used as well. </p> <p> Close element is a <i>button</i> with an <i>aria-label</i> that refers to the <i>aria.close</i> property of the <router-link to="/locale">locale</router-link> API by default, you may use <i>closeButtonProps</i> to customize the element and override the default <i>aria-label</i>. </p> <h6>Close Button Keyboard Support</h6> <div class="doc-tablewrapper"> <table class="doc-table"> <thead> <tr> <th>Key</th> <th>Function</th> </tr> </thead> <tbody> <tr> <td> <i>enter</i> </td> <td>Closes the message.</td> </tr> <tr> <td> <i>space</i> </td> <td>Closes the message.</td> </tr> </tbody> </table> </div> <h5>Dependencies</h5> <p>None.</p> </AppDoc></ClientOnly > </template> <script> export default { data() { return { sources: { 'options-api': { tabName: 'Options API Source', content: ` <template> <div> <h5>Severities</h5> <Message severity="success">Success Message Content</Message> <Message severity="info">Info Message Content</Message> <Message severity="warn">Warning Message Content</Message> <Message severity="error">Error Message Content</Message> <h5>Dynamic</h5> <Button label="Show" @click="addMessages()" /> <transition-group name="p-message" tag="div"> <Message v-for="msg of messages" :severity="msg.severity" :key="msg.id">{{msg.content}}</Message> </transition-group> <h5>Inline Messages</h5> <p>Message component is used to display inline messages mostly within forms.</p> <div class="grid"> <div class="col-12 md:col-3"> <InlineMessage severity="info">Message Content</InlineMessage> </div> <div class="col-12 md:col-3"> <InlineMessage severity="success">Message Content</InlineMessage> </div> <div class="col-12 md:col-3"> <InlineMessage severity="warn">Message Content</InlineMessage> </div> <div class="col-12 md:col-3"> <InlineMessage severity="error">Message Content</InlineMessage> </div> </div> <h5>Auto Dismiss</h5> <Message severity="warn" :life="3000" :sticky="false">This message will hide in 3 seconds.</Message> <h5>Validation Message</h5> <div class="formgroup-inline" style="margin-bottom:.5rem"> <label for="username" class="p-sr-only">Username</label> <InputText id="username" placeholder="Username" class="p-invalid" /> <InlineMessage>Username is required</InlineMessage> </div> <div class="formgroup-inline"> <label for="email" class="p-sr-only">email</label> <InputText id="email" placeholder="Email" class="p-invalid" /> <InlineMessage /> </div> </div> </template> <script> export default { data() { return { messages: [], count: 0 } }, methods: { addMessages() { this.messages = [ {severity: 'info', content: 'Dynamic Info Message', id: this.count++}, {severity: 'success', content: 'Dynamic Success Message', id: this.count++}, {severity: 'warn', content: 'Dynamic Warning Message', id: this.count++} ] } } } <\\/script> <style scoped> button.p-button { margin-right: .5rem; } .p-inputtext { margin-right: .5rem; } </style>` }, 'composition-api': { tabName: 'Composition API Source', content: ` <template> <div> <h5>Severities</h5> <Message severity="success">Success Message Content</Message> <Message severity="info">Info Message Content</Message> <Message severity="warn">Warning Message Content</Message> <Message severity="error">Error Message Content</Message> <h5>Dynamic</h5> <Button label="Show" @click="addMessages()" /> <transition-group name="p-message" tag="div"> <Message v-for="msg of messages" :severity="msg.severity" :key="msg.id">{{msg.content}}</Message> </transition-group> <h5>Inline Messages</h5> <p>Message component is used to display inline messages mostly within forms.</p> <div class="grid"> <div class="col-12 md:col-3"> <InlineMessage severity="info">Message Content</InlineMessage> </div> <div class="col-12 md:col-3"> <InlineMessage severity="success">Message Content</InlineMessage> </div> <div class="col-12 md:col-3"> <InlineMessage severity="warn">Message Content</InlineMessage> </div> <div class="col-12 md:col-3"> <InlineMessage severity="error">Message Content</InlineMessage> </div> </div> <h5>Auto Dismiss</h5> <Message severity="warn" :life="3000" :sticky="false">This message will hide in 3 seconds.</Message> <h5>Validation Message</h5> <div class="formgroup-inline" style="margin-bottom:.5rem"> <label for="username" class="p-sr-only">Username</label> <InputText id="username" placeholder="Username" class="p-invalid" /> <InlineMessage>Username is required</InlineMessage> </div> <div class="formgroup-inline"> <label for="email" class="p-sr-only">email</label> <InputText id="email" placeholder="Email" class="p-invalid" /> <InlineMessage /> </div> </div> </template> <script> import { ref } from 'vue'; export default { setup() { const messages = ref([]); const count = ref(0); const addMessages = () => { messages.value = [ {severity: 'info', content: 'Dynamic Info Message', id: count.value++}, {severity: 'success', content: 'Dynamic Success Message', id: count.value++}, {severity: 'warn', content: 'Dynamic Warning Message', id: count.value++} ] }; return { messages, count, addMessages } } } <\\/script> <style scoped> button.p-button { margin-right: .5rem; } .p-inputtext { margin-right: .5rem; } </style>` }, 'browser-source': { tabName: 'Browser Source', imports: `<script src="https://unpkg.com/primevue@^3/inlinemessage/inlinemessage.min.js"><\\/script>`, content: `<div id="app"> <h5>Severities</h5> <p-message severity="success">Success Message Content</p-message> <p-message severity="info">Info Message Content</p-message> <p-message severity="warn">Warning Message Content</p-message> <p-message severity="error">Error Message Content</p-message> <h5>Dynamic</h5> <p-button label="Show" @click="addMessages()"></p-button> <transition-group name="p-message" tag="div"> <p-message v-for="msg of messages" :severity="msg.severity" :key="msg.id">{{msg.content}}</p-message> </transition-group> <h5>Inline Messages</h5> <p>Message component is used to display inline messages mostly within forms.</p> <div class="grid"> <div class="col-12 md:col-3"> <p-inlinemessage severity="info">Message Content</p-inlinemessage> </div> <div class="col-12 md:col-3"> <p-inlinemessage severity="success">Message Content</p-inlinemessage> </div> <div class="col-12 md:col-3"> <p-inlinemessage severity="warn">Message Content</p-inlinemessage> </div> <div class="col-12 md:col-3"> <p-inlinemessage severity="error">Message Content</p-inlinemessage> </div> </div> <h5>Auto Dismiss</h5> <p-message severity="warn" :life="3000" :sticky="false">This message will hide in 3 seconds.</p-message> <h5>Validation Message</h5> <div class="formgroup-inline" style="margin-bottom:.5rem"> <label for="username" class="p-sr-only">Username</label> <p-inputtext id="username" placeholder="Username" class="p-invalid"></p-inputtext> <p-inlinemessage>Username is required</p-inlinemessage> </div> <div class="formgroup-inline"> <label for="email" class="p-sr-only">email</label> <p-inputtext id="email" placeholder="Email" class="p-invalid"></p-inputtext> <p-inlinemessage></p-inlinemessage> </div> </div> <script type="module"> const { createApp, ref } = Vue; const App = { setup() { const messages = ref([]); const count = ref(0); const addMessages = () => { messages.value = [ {severity: 'info', content: 'Dynamic Info Message', id: count.value++}, {severity: 'success', content: 'Dynamic Success Message', id: count.value++}, {severity: 'warn', content: 'Dynamic Warning Message', id: count.value++} ] }; return { messages, count, addMessages } }, components: { "p-message": primevue.message, "p-inlinemessage": primevue.inlinemessage, "p-button": primevue.button, "p-inputtext": primevue.inputtext } }; createApp(App) .use(primevue.config.default) .mount("#app"); <\\/script> <style> button.p-button { margin-right: .5rem; } .p-inputtext { margin-right: .5rem; } </style>` } } }; } }; </script>