Message doc added
Merve Özçifçi
parent
3cc5b49af0
commit
02d55ad389
|
|
@ -34,10 +34,14 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<MessageDoc/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MessageDoc from './MessageDoc';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -56,6 +60,9 @@ export default {
|
|||
removeMessages() {
|
||||
this.messages = null;
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'MessageDoc': MessageDoc
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,240 @@
|
|||
<template>
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Documentation">
|
||||
<h3>Import</h3>
|
||||
<CodeHighlight lang="javascript">
|
||||
import Message from 'primevue/message';
|
||||
import ValidationMessage from 'primevue/validationmessage';
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Getting Started</h3>
|
||||
<p>A single message is specified by Message interface in PrimeVue that defines the severity and content as the properties.
|
||||
Messages to display can either be defined using the value property which should an array of Message instances.</p>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<Message v-for="msg of messages" :severity="msg.severity" :key="msg.content">{{msg.content}}</Message>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="js">
|
||||
data() {
|
||||
return {
|
||||
messages: [
|
||||
{severity: 'info', content: 'Dynamic Info Message'},
|
||||
{severity: 'success', content: 'Dynamic Success Message'},
|
||||
{severity: 'warn', content: 'Dynamic Warning Message'}
|
||||
]
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Severities</h3>
|
||||
<p>There are four possible values for the severity of a message.</p>
|
||||
|
||||
<ul>
|
||||
<li>success</li>
|
||||
<li>info</li>
|
||||
<li>warn</li>
|
||||
<li>error</li>
|
||||
</ul>
|
||||
|
||||
<h3>Closable</h3>
|
||||
<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>
|
||||
<CodeHighlight>
|
||||
<Message severity="success" :closable="false">Order Submitted</Message>
|
||||
</CodeHighlight>
|
||||
|
||||
<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
|
||||
they are manually removed.</p>
|
||||
<CodeHighlight>
|
||||
<Message severity="warn" :life="5000" :sticky="false">This message will hide in 5 seconds.</Message>
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>ValidationMessage Component</h3>
|
||||
<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>
|
||||
<InputText placeholder="Username" class="p-error" />
|
||||
<ValidationMessage>Field is required</ValidationMessage>
|
||||
</CodeHighlight>
|
||||
|
||||
|
||||
<h3>Properties of Message</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>
|
||||
<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>element</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>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Element</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>p-messages</td>
|
||||
<td>Container element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-messages-info</td>
|
||||
<td>Container element when displaying info messages.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-messages-warn</td>
|
||||
<td>Container element when displaying warning messages.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-messages-error</td>
|
||||
<td>Container element when displaying error messages.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-messages-success</td>
|
||||
<td>Container element when displaying success messages.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-messages-close</td>
|
||||
<td>Close icon.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-messages-icon</td>
|
||||
<td>Severity icon.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-messages-summary</td>
|
||||
<td>Summary of a message.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-messages-detail</td>
|
||||
<td>Detail of a message.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3>Dependencies</h3>
|
||||
<p>None.</p>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel header="Source">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/message" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Message</h1>
|
||||
<p>Messages is used to display inline messages with various severities.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Severities</h3>
|
||||
<Message severity="success">Order Submitted</Message>
|
||||
<Message severity="info">PrimeVue Rocks</Message>
|
||||
<Message severity="warn">There are unsaved changes</Message>
|
||||
<Message severity="error">Validation Failed</Message>
|
||||
|
||||
<h3>Dynamic</h3>
|
||||
<Button label="Show" @click="addMessages()" />
|
||||
<Button label="Clear" @click="removeMessages()" class="p-button-secondary"/>
|
||||
<Message v-for="msg of messages" :severity="msg.severity" :key="msg.content">{{msg.content}}</Message>
|
||||
|
||||
<h3>Auto Dismiss</h3>
|
||||
<Message severity="warn" :life="5000" :sticky="false">This message will hide in 5 seconds.</Message>
|
||||
|
||||
<h3>Validation Message</h3>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12">
|
||||
<InputText placeholder="Username" class="p-error" />
|
||||
<ValidationMessage>Field is required</ValidationMessage>
|
||||
</div>
|
||||
<div class="p-col-12">
|
||||
<InputText placeholder="Email" class="p-error" :closable="false" />
|
||||
<ValidationMessage />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="javascript">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
messages: [],
|
||||
count: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addMessages() {
|
||||
this.messages = [
|
||||
{severity: 'info', content: 'Dynamic Info Message'},
|
||||
{severity: 'success', content: 'Dynamic Success Message'},
|
||||
{severity: 'warn', content: 'Dynamic Warning Message'}
|
||||
]
|
||||
},
|
||||
removeMessages() {
|
||||
this.messages = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="css">
|
||||
button.p-button {
|
||||
margin-right: .5em;
|
||||
}
|
||||
|
||||
.p-inputtext {
|
||||
margin-right: .25em;
|
||||
}
|
||||
</CodeHighlight>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</template>
|
||||
Loading…
Reference in New Issue