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

csb updated for components

pull/1143/head
Tuğçe Küçükoğlu 2021-03-19 12:46:06 +03:00
parent 5cbe0eb5a6
commit e7dab1199c
17 changed files with 3090 additions and 3251 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

616
src/views/avatar/AvatarDoc.vue
View File

@ -1,16 +1,14 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h5>Import</h5>
<AppDoc name="AvatarDemo" :sources="sources">
<h5>Import</h5>
<pre v-code.script><code>
import Avatar from 'primevue/avatar';
import AvatarGroup from 'primevue/avatargroup';
</code></pre>
<h5>Getting Started</h5>
<p>Avatar has three built-in display modes; "label", "icon" and "image".</p>
<h5>Getting Started</h5>
<p>Avatar has three built-in display modes; "label", "icon" and "image".</p>
<pre v-code><code>
&lt;Avatar label="P" /&gt;
&lt;Avatar icon="pi pi-search" /&gt;
@ -18,15 +16,15 @@ import AvatarGroup from 'primevue/avatargroup';
</code></pre>
<h5>Sizes</h5>
<p><i>size</i> property defines the size of the Avatar with "large" and "xlarge" as possible values.</p>
<h5>Sizes</h5>
<p><i>size</i> property defines the size of the Avatar with "large" and "xlarge" as possible values.</p>
<pre v-code><code>
&lt;Avatar label="P" size="large"/&gt;
</code></pre>
<h5>AvatarGroup</h5>
<p>A set of Avatars can be displayed together using the <i>AvatarGroup</i> component.</p>
<h5>AvatarGroup</h5>
<p>A set of Avatars can be displayed together using the <i>AvatarGroup</i> component.</p>
<pre v-code><code>
&lt;AvatarGroup&gt;
&lt;Avatar label="P" /&gt;
@ -36,22 +34,22 @@ import AvatarGroup from 'primevue/avatargroup';
&lt;/AvatarGroup&gt;
</code></pre>
<h5>Shape</h5>
<p>Avatar comes in two different styles specified with the <i>shape</i> property, "square" is the default and "circle" is the alternative.</p>
<h5>Shape</h5>
<p>Avatar comes in two different styles specified with the <i>shape</i> property, "square" is the default and "circle" is the alternative.</p>
<pre v-code><code>
&lt;Avatar label="P" shape="circle"/&gt;
</code></pre>
<h5>Badge</h5>
<p>A badge can be added to an Avatar with the <router-link to="/badge">Badge</router-link> directive.</p>
<h5>Badge</h5>
<p>A badge can be added to an Avatar with the <router-link to="/badge">Badge</router-link> directive.</p>
<pre v-code><code>
&lt;Avatar image="user.png" size="xlarge" v-badge.danger="4" /&gt;
</code></pre>
<h5>Templating</h5>
<p>Content can easily be customized with the default slot instead of using the built-in modes.</p>
<h5>Templating</h5>
<p>Content can easily be customized with the default slot instead of using the built-in modes.</p>
<pre v-code><code>
&lt;Avatar&gt;
Content
@ -59,316 +57,310 @@ import AvatarGroup from 'primevue/avatargroup';
</code></pre>
<h5>Properties of Avatar</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<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>label</td>
<td>string</td>
<td>null</td>
<td>Defines the text to display.</td>
</tr>
<tr>
<td>icon</td>
<td>string</td>
<td>null</td>
<td>Defines the icon to display.</td>
</tr>
<tr>
<td>image</td>
<td>string</td>
<td>null</td>
<td>Defines the image to display.</td>
</tr>
<tr>
<td>size</td>
<td>string</td>
<td>null</td>
<td>Size of the element, valid options are "large" and "xlarge".</td>
</tr>
<tr>
<td>shape</td>
<td>string</td>
<td>square</td>
<td>Shape of the element, valid options are "square" and "circle".</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties of Avatar</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<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>label</td>
<td>string</td>
<td>null</td>
<td>Defines the text to display.</td>
</tr>
<tr>
<td>icon</td>
<td>string</td>
<td>null</td>
<td>Defines the icon to display.</td>
</tr>
<tr>
<td>image</td>
<td>string</td>
<td>null</td>
<td>Defines the image to display.</td>
</tr>
<tr>
<td>size</td>
<td>string</td>
<td>null</td>
<td>Size of the element, valid options are "large" and "xlarge".</td>
</tr>
<tr>
<td>shape</td>
<td>string</td>
<td>square</td>
<td>Shape of the element, valid options are "square" and "circle".</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties of AvatarGroup</h5>
<p>Any property as style and class are passed to the main container element. There are no additional properties.</p>
<h5>Properties of AvatarGroup</h5>
<p>Any property as style and class are passed to the main container element. There are no additional properties.</p>
<h5>Styling of Avatar</h5>
<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-avatar</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-avatar-image</td>
<td>Container element in image mode.</td>
</tr>
<tr>
<td>p-avatar-circle</td>
<td>Container element with a circle shape.</td>
</tr>
<tr>
<td>p-avatar-text</td>
<td>Text of the Avatar.</td>
</tr>
<tr>
<td>p-avatar-icon</td>
<td>Icon of the Avatar.</td>
</tr>
<tr>
<td>p-avatar-lg</td>
<td>Container element with a large size.</td>
</tr>
<tr>
<td>p-avatar-xl</td>
<td>Container element with an xlarge size.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling of Avatar</h5>
<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-avatar</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-avatar-image</td>
<td>Container element in image mode.</td>
</tr>
<tr>
<td>p-avatar-circle</td>
<td>Container element with a circle shape.</td>
</tr>
<tr>
<td>p-avatar-text</td>
<td>Text of the Avatar.</td>
</tr>
<tr>
<td>p-avatar-icon</td>
<td>Icon of the Avatar.</td>
</tr>
<tr>
<td>p-avatar-lg</td>
<td>Container element with a large size.</td>
</tr>
<tr>
<td>p-avatar-xl</td>
<td>Container element with an xlarge size.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling of AvatarGroup</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-avatar-group</td>
<td>Container element.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling of AvatarGroup</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-avatar-group</td>
<td>Container element.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/avatar" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="AvatarDemo" :sources="sources" :directives="['Badge']" :components="['AvatarGroup']" />
</div>
<pre v-code><code><template v-pre>
&lt;div class="p-grid"&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;div class="card"&gt;
&lt;h5&gt;Label&lt;/h5&gt;
&lt;Avatar label="P" class="p-mr-2" size="xlarge" /&gt;
&lt;Avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/&gt;
&lt;Avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;div class="card"&gt;
&lt;h5&gt;Label - Circle&lt;/h5&gt;
&lt;Avatar label="P" class="p-mr-2" size="xlarge" shape="circle" /&gt;
&lt;Avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" /&gt;
&lt;Avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;div class="card"&gt;
&lt;h5&gt;Label - Badge&lt;/h5&gt;
&lt;Avatar label="U" size="xlarge" style="background-color:#4caf4f; color: #ffffff" v-badge="4" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-grid"&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;div class="card"&gt;
&lt;h5&gt;Icon&lt;/h5&gt;
&lt;Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" /&gt;
&lt;Avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/&gt;
&lt;Avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;div class="card"&gt;
&lt;h5&gt;Icon - Circle&lt;/h5&gt;
&lt;Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" shape="circle" /&gt;
&lt;Avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" /&gt;
&lt;Avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;div class="card"&gt;
&lt;h5&gt;Icon - Badge&lt;/h5&gt;
&lt;Avatar icon="pi pi-user" size="xlarge" v-badge="4"/&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-grid"&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;div class="card"&gt;
&lt;h5&gt;Image&lt;/h5&gt;
&lt;Avatar image="demo/images/avatar/amyelsner.png" class="p-mr-2" size="xlarge" shape="circle" /&gt;
&lt;Avatar image="demo/images/avatar/asiyajavayant.png" class="p-mr-2" size="large" shape="circle" /&gt;
&lt;Avatar image="demo/images/avatar/onyamalimba.png" class="p-mr-2" shape="circle" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;div class="card"&gt;
&lt;h5&gt;Avatar Group&lt;/h5&gt;
&lt;AvatarGroup class="p-mb-3"&gt;
&lt;Avatar image="demo/images/avatar/amyelsner.png" size="large" shape="circle"/&gt;
&lt;Avatar image="demo/images/avatar/asiyajavayant.png" size="large" shape="circle"/&gt;
&lt;Avatar image="demo/images/avatar/onyamalimba.png" size="large" shape="circle"/&gt;
&lt;Avatar image="demo/images/avatar/ionibowcher.png" size="large" shape="circle"/&gt;
&lt;Avatar image="demo/images/avatar/xuxuefeng.png" size="large" shape="circle"/&gt;
&lt;Avatar label="+2" shape="circle" size="large" style="background-color:#9c27b0; color: #ffffff" /&gt;
&lt;/AvatarGroup&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;div class="card"&gt;
&lt;h5&gt;Image - Badge&lt;/h5&gt;
&lt;Avatar image="demo/images/organization/walter.jpg" size="xlarge" v-badge.danger="4" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</template>
</code></pre>
</TabPanel>
</TabView>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="p-grid">
<div class="p-col-12 p-md-4">
<div class="card">
<h5>Label</h5>
<Avatar label="P" class="p-mr-2" size="xlarge" />
<Avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
<Avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" />
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="card">
<h5>Label - Circle</h5>
<Avatar label="P" class="p-mr-2" size="xlarge" shape="circle" />
<Avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" />
<Avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" />
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="card">
<h5>Label - Badge</h5>
<Avatar label="U" size="xlarge" style="background-color:#4caf4f; color: #ffffff" v-badge="4" />
</div>
</div>
'options-api': {
tabName: 'Source',
content: `
<template>
<div class="p-grid">
<div class="p-col-12 p-md-4">
<div class="card">
<h5>Label</h5>
<Avatar label="P" class="p-mr-2" size="xlarge" />
<Avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
<Avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" />
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="card">
<h5>Label - Circle</h5>
<Avatar label="P" class="p-mr-2" size="xlarge" shape="circle" />
<Avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" />
<Avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" />
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="card">
<h5>Label - Badge</h5>
<Avatar label="U" size="xlarge" style="background-color:#4caf4f; color: #ffffff" v-badge="4" />
</div>
</div>
</div>
<div class="p-grid">
<div class="p-col-12 p-md-4">
<div class="card">
<h5>Icon</h5>
<Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" />
<Avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
<Avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" />
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="card">
<h5>Icon - Circle</h5>
<Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" shape="circle" />
<Avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" />
<Avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" />
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="card">
<h5>Icon - Badge</h5>
<Avatar icon="pi pi-user" size="xlarge" v-badge="4"/>
</div>
</div>
<div class="p-grid">
<div class="p-col-12 p-md-4">
<div class="card">
<h5>Icon</h5>
<Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" />
<Avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
<Avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" />
</div>
</div>
<div class="p-grid">
<div class="p-col-12 p-md-4">
<div class="card">
<h5>Image</h5>
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" size="xlarge" shape="circle" />
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" size="large" shape="circle" />
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" shape="circle" />
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="card">
<h5>Icon - Circle</h5>
<Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" shape="circle" />
<Avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" />
<Avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" />
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="card">
<h5>Avatar Group</h5>
<AvatarGroup class="p-mb-3">
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
<Avatar label="+2" shape="circle" size="large" style="background-color:#9c27b0; color: #ffffff" />
</AvatarGroup>
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="card">
<h5>Icon - Badge</h5>
<Avatar icon="pi pi-user" size="xlarge" v-badge="4"/>
</div>
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="card">
<h5>Image - Badge</h5>
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="xlarge" v-badge.danger="4" />
</div>
</div>
<div class="p-grid">
<div class="p-col-12 p-md-4">
<div class="card">
<h5>Image</h5>
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" size="xlarge" shape="circle" />
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" size="large" shape="circle" />
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" shape="circle" />
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="card">
<h5>Avatar Group</h5>
<AvatarGroup class="p-mb-3">
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
<Avatar label="+2" shape="circle" size="large" style="background-color:#9c27b0; color: #ffffff" />
</AvatarGroup>
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="card">
<h5>Image - Badge</h5>
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="xlarge" v-badge.danger="4" />
</div>
</div>
</div>
</template>
<script>
export default {
}
<\\/script>
`
},
'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div class="p-grid">
<div class="p-col-12 p-md-4">
<div class="card">
<h5>Label</h5>
<Avatar label="P" class="p-mr-2" size="xlarge" />
<Avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
<Avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" />
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="card">
<h5>Label - Circle</h5>
<Avatar label="P" class="p-mr-2" size="xlarge" shape="circle" />
<Avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" />
<Avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" />
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="card">
<h5>Label - Badge</h5>
<Avatar label="U" size="xlarge" style="background-color:#4caf4f; color: #ffffff" v-badge="4" />
</div>
</div>
</div>
<div class="p-grid">
<div class="p-col-12 p-md-4">
<div class="card">
<h5>Icon</h5>
<Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" />
<Avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
<Avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" />
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="card">
<h5>Icon - Circle</h5>
<Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" shape="circle" />
<Avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" />
<Avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" />
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="card">
<h5>Icon - Badge</h5>
<Avatar icon="pi pi-user" size="xlarge" v-badge="4"/>
</div>
</div>
</div>
<div class="p-grid">
<div class="p-col-12 p-md-4">
<div class="card">
<h5>Image</h5>
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" size="xlarge" shape="circle" />
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" size="large" shape="circle" />
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" shape="circle" />
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="card">
<h5>Avatar Group</h5>
<AvatarGroup class="p-mb-3">
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
<Avatar label="+2" shape="circle" size="large" style="background-color:#9c27b0; color: #ffffff" />
</AvatarGroup>
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="card">
<h5>Image - Badge</h5>
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="xlarge" v-badge.danger="4" />
</div>
</div>
</div>
@ -376,13 +368,11 @@ export default {
<script>
export default {
}`
}
<\\/script>`
}
}
}
},
components: {
LiveEditor
}
}
</script>

345
src/views/badge/BadgeDoc.vue
View File

@ -1,29 +1,27 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h5>Getting Started</h5>
<p>Badge can either be used as a standalone component or as a directive.</p>
<AppDoc name="BadgeDemo" :sources="sources">
<h5>Getting Started</h5>
<p>Badge can either be used as a standalone component or as a directive.</p>
<h6>Component</h6>
<h6>Component</h6>
<pre v-code.script><code>
import Badge from 'primevue/badge';
</code></pre>
<p>Content of the badge is specified using the <i>value</i> property.</p>
<p>Content of the badge is specified using the <i>value</i> property.</p>
<pre v-code><code>
&lt;Badge value="2"&gt;&lt;/Badge&gt;
</code></pre>
<h6>Directive</h6>
<pre v-code.script><code>
<h6>Directive</h6>
<pre v-code.script><code>
import BadgeDirective from 'primevue/badgedirective';
</code></pre>
<p>When used as a directive, badge needs to be configured at the application with a name of your choice.</p>
<p>When used as a directive, badge needs to be configured at the application with a name of your choice.</p>
<pre v-code.script><code>
import BadgeDirective from 'primevue/badgedirective';
@ -31,22 +29,22 @@ Vue.directive('badge', BadgeDirective);
</code></pre>
<p>Next step is attaching it to an element.</p>
<p>Next step is attaching it to an element.</p>
<pre v-code><code>
&lt;i class="pi pi-bell" v-badge="2"&gt;&lt;/i&gt;
</code></pre>
<h5>Severities</h5>
<p>Different color options are available as severity levels. When used as a component use the <i>severity</i> property
to apply a severity and use a <i>modifier</i> as the severity value in directive mode.</p>
<h5>Severities</h5>
<p>Different color options are available as severity levels. When used as a component use the <i>severity</i> property
to apply a severity and use a <i>modifier</i> as the severity value in directive mode.</p>
<ul>
<li>success</li>
<li>info</li>
<li>warning</li>
<li>danger</li>
</ul>
<ul>
<li>success</li>
<li>info</li>
<li>warning</li>
<li>danger</li>
</ul>
<pre v-code><code>
&lt;Badge value="2" severity="success"&gt;&lt;/Badge&gt;
@ -55,8 +53,8 @@ Vue.directive('badge', BadgeDirective);
</code></pre>
<h5>Button Badges</h5>
<p>Buttons provide integrated badge support with the <i>badge</i> and <i>badgeClass</i> properties.</p>
<h5>Button Badges</h5>
<p>Buttons provide integrated badge support with the <i>badge</i> and <i>badgeClass</i> properties.</p>
<pre v-code><code>
&lt;Button type="button" label="Emails" badge="8" /&gt;
@ -64,9 +62,9 @@ Vue.directive('badge', BadgeDirective);
</code></pre>
<h5>Sizes</h5>
<p>Badge sizes are adjusted with the <i>size</i> property that accepts "large" and "xlarge" as the possible alternatives to the default size. Currently
sizes only apply to component mode.</p>
<h5>Sizes</h5>
<p>Badge sizes are adjusted with the <i>size</i> property that accepts "large" and "xlarge" as the possible alternatives to the default size. Currently
sizes only apply to component mode.</p>
<pre v-code><code>
&lt;Badge value="2"&gt;&lt;/Badge&gt;
&lt;Badge value="4" size="large" severity="warning"&gt;&lt;/Badge&gt;
@ -74,183 +72,178 @@ Vue.directive('badge', BadgeDirective);
</code></pre>
<p>In addition, when placed inside another element, badge sizes can also derive their size from their parent.</p>
<p>In addition, when placed inside another element, badge sizes can also derive their size from their parent.</p>
<pre v-code><code>
&lt;h1&gt;Heading 1 &lt;Badge value="New"&gt;&lt;/Badge&gt;&lt;/h1&gt;
&lt;h2&gt;Heading 2 &lt;Badge value="New"&gt;&lt;/Badge&gt;&lt;/h2&gt;
</code></pre>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<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>value</td>
<td>any</td>
<td>null</td>
<td>Value to display inside the badge.</td>
</tr>
<tr>
<td>severity</td>
<td>string</td>
<td>null</td>
<td>Severity type of the badge.</td>
</tr>
<tr>
<td>size</td>
<td>string</td>
<td>null</td>
<td>Size of the badge, valid options are "large" and "xlarge".</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<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>value</td>
<td>any</td>
<td>null</td>
<td>Value to display inside the badge.</td>
</tr>
<tr>
<td>severity</td>
<td>string</td>
<td>null</td>
<td>Severity type of the badge.</td>
</tr>
<tr>
<td>size</td>
<td>string</td>
<td>null</td>
<td>Size of the badge, valid options are "large" and "xlarge".</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>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-badge</td>
<td>Badge element</td>
</tr>
<tr>
<td>p-overlay-badge</td>
<td>Wrapper of a badge and its target.</td>
</tr>
<tr>
<td>p-badge-dot</td>
<td>Badge element with no value.</td>
</tr>
<tr>
<td>p-badge-success</td>
<td>Badge element with success severity.</td>
</tr>
<tr>
<td>p-badge-info</td>
<td>Badge element with info severity.</td>
</tr>
<tr>
<td>p-badge-warning</td>
<td>Badge element with warning severity.</td>
</tr>
<tr>
<td>p-badge-danger</td>
<td>Badge element with danger severity.</td>
</tr>
<tr>
<td>p-badge-lg</td>
<td>Large badge element</td>
</tr>
<tr>
<td>p-badge-xl</td>
<td>Extra large badge element</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>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-badge</td>
<td>Badge element</td>
</tr>
<tr>
<td>p-overlay-badge</td>
<td>Wrapper of a badge and its target.</td>
</tr>
<tr>
<td>p-badge-dot</td>
<td>Badge element with no value.</td>
</tr>
<tr>
<td>p-badge-success</td>
<td>Badge element with success severity.</td>
</tr>
<tr>
<td>p-badge-info</td>
<td>Badge element with info severity.</td>
</tr>
<tr>
<td>p-badge-warning</td>
<td>Badge element with warning severity.</td>
</tr>
<tr>
<td>p-badge-danger</td>
<td>Badge element with danger severity.</td>
</tr>
<tr>
<td>p-badge-lg</td>
<td>Large badge element</td>
</tr>
<tr>
<td>p-badge-xl</td>
<td>Extra large badge element</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/badge" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="BadgeDemo" :sources="sources" :directives="['Badge']" :components="['Button']" />
</div>
<pre v-code><code><template v-pre>
&lt;h5&gt;Numbers&lt;/h5&gt;
&lt;Badge value="2" class="p-mr-2"&gt;&lt;/Badge&gt;
&lt;Badge value="8" severity="success" class="p-mr-2"&gt;&lt;/Badge&gt;
&lt;Badge value="4" severity="info" class="p-mr-2"&gt;&lt;/Badge&gt;
&lt;Badge value="12" severity="warning" class="p-mr-2"&gt;&lt;/Badge&gt;
&lt;Badge value="3" severity="danger"&gt;&lt;/Badge&gt;
&lt;h5 class="p-mb-4"&gt;Positioned Badge&lt;/h5&gt;
&lt;i class="pi pi-bell p-mr-4 p-text-secondary" style="font-size: 2rem" v-badge="2"&gt;&lt;/i&gt;
&lt;i class="pi pi-calendar p-mr-4 p-text-secondary" style="font-size: 2rem" v-badge.danger="'10+'"&gt;&lt;/i&gt;
&lt;i class="pi pi-envelope p-text-secondary" style="font-size: 2rem" v-badge.danger&gt;&lt;/i&gt;
&lt;h5&gt;Button Badge&lt;/h5&gt;
&lt;Button type="button" label="Emails" badge="8" class="p-mr-2" /&gt;
&lt;Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" /&gt;
&lt;h5&gt;Sizes&lt;/h5&gt;
&lt;Badge value="2" class="p-mr-2"&gt;&lt;/Badge&gt;
&lt;Badge value="4" class="p-mr-2" size="large" severity="warning"&gt;&lt;/Badge&gt;
&lt;Badge value="6" size="xlarge" severity="success"&gt;&lt;/Badge&gt;
</template>
</code></pre>
</TabPanel>
</TabView>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<h5>Numbers</h5>
<Badge value="2" class="p-mr-2"></Badge>
<Badge value="8" severity="success" class="p-mr-2"></Badge>
<Badge value="4" severity="info" class="p-mr-2"></Badge>
<Badge value="12" severity="warning" class="p-mr-2"></Badge>
<Badge value="3" severity="danger"></Badge>
'options-api': {
tabName: 'Source',
content: `
<template>
<div class="card">
<h5>Numbers</h5>
<Badge value="2" class="p-mr-2"></Badge>
<Badge value="8" severity="success" class="p-mr-2"></Badge>
<Badge value="4" severity="info" class="p-mr-2"></Badge>
<Badge value="12" severity="warning" class="p-mr-2"></Badge>
<Badge value="3" severity="danger"></Badge>
<h5 class="p-mb-4">Positioned Badge</h5>
<i class="pi pi-bell p-mr-4 p-text-secondary" style="font-size: 2rem" v-badge="2"></i>
<i class="pi pi-calendar p-mr-4 p-text-secondary" style="font-size: 2rem" v-badge.danger="'10+'"></i>
<i class="pi pi-envelope p-text-secondary" style="font-size: 2rem" v-badge.danger></i>
<h5 class="p-mb-4">Positioned Badge</h5>
<i class="pi pi-bell p-mr-4 p-text-secondary" style="font-size: 2rem" v-badge="2"></i>
<i class="pi pi-calendar p-mr-4 p-text-secondary" style="font-size: 2rem" v-badge.danger="'10+'"></i>
<i class="pi pi-envelope p-text-secondary" style="font-size: 2rem" v-badge.danger></i>
<h5>Button Badge</h5>
<Button type="button" label="Emails" badge="8" class="p-mr-2" />
<Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
<h5>Button Badge</h5>
<Button type="button" label="Emails" badge="8" class="p-mr-2" />
<Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
<h5>Sizes</h5>
<Badge value="2" class="p-mr-2"></Badge>
<Badge value="4" class="p-mr-2" size="large" severity="warning"></Badge>
<Badge value="6" size="xlarge" severity="success"></Badge>
</div>
</div>
<h5>Sizes</h5>
<Badge value="2" class="p-mr-2"></Badge>
<Badge value="4" class="p-mr-2" size="large" severity="warning"></Badge>
<Badge value="6" size="xlarge" severity="success"></Badge>
</div>
</template>
<script>
export default {
}`
}
<\\/script>
`
},
'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<h5>Numbers</h5>
<Badge value="2" class="p-mr-2"></Badge>
<Badge value="8" severity="success" class="p-mr-2"></Badge>
<Badge value="4" severity="info" class="p-mr-2"></Badge>
<Badge value="12" severity="warning" class="p-mr-2"></Badge>
<Badge value="3" severity="danger"></Badge>
<h5 class="p-mb-4">Positioned Badge</h5>
<i class="pi pi-bell p-mr-4 p-text-secondary" style="font-size: 2rem" v-badge="2"></i>
<i class="pi pi-calendar p-mr-4 p-text-secondary" style="font-size: 2rem" v-badge.danger="'10+'"></i>
<i class="pi pi-envelope p-text-secondary" style="font-size: 2rem" v-badge.danger></i>
<h5>Button Badge</h5>
<Button type="button" label="Emails" badge="8" class="p-mr-2" />
<Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
<h5>Sizes</h5>
<Badge value="2" class="p-mr-2"></Badge>
<Badge value="4" class="p-mr-2" size="large" severity="warning"></Badge>
<Badge value="6" size="xlarge" severity="success"></Badge>
</div>
</template>
<script>
export default {
}
<\\/script>`
}
}
}
},
components: {
LiveEditor
}
}
</script>

368
src/views/blockui/BlockUIDoc.vue
View File

@ -1,17 +1,15 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h5>Import</h5>
<AppDoc name="BlockUIDemo" :sources="sources">
<h5>Import</h5>
<pre v-code.script><code>
import BlockUI from 'primevue/blockui';
</code></pre>
<h5>Getting Started</h5>
<p>BlockUI is controlled using the <i>blocked</i> property, by default target element to block is the child component. In example below, panel gets blocked
with a mask when blockedPanel is enabled and gets unblock when the bound variable is set to false.
</p>
<h5>Getting Started</h5>
<p>BlockUI is controlled using the <i>blocked</i> property, by default target element to block is the child component. In example below, panel gets blocked
with a mask when blockedPanel is enabled and gets unblock when the bound variable is set to false.
</p>
<pre v-code><code>
&lt;BlockUI :blocked="blockedPanel"&gt;
&lt;Panel header="Header"&gt;
@ -40,196 +38,135 @@ export default {
</code></pre>
<h5>Full Screen</h5>
<p>In full screen mode, instead of a particular element, the whole document gets blocked. Set <i>fullScreen</i> as true in order to enable this functionality.</p>
<h5>Full Screen</h5>
<p>In full screen mode, instead of a particular element, the whole document gets blocked. Set <i>fullScreen</i> as true in order to enable this functionality.</p>
<pre v-code><code>
&lt;BlockUI :blocked="blockedDocument" :fullScreen="true"&gt;&lt;/BlockUI&gt;
</code></pre>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<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>blocked</td>
<td>array</td>
<td>null</td>
<td>Controls the blocked state.</td>
</tr>
<tr>
<td>fullscreen</td>
<td>menuitem</td>
<td>null</td>
<td>When enabled, the whole document gets blocked.</td>
</tr>
<tr>
<td>baseZIndex</td>
<td>number</td>
<td>0</td>
<td>Base zIndex value to use in layering.</td>
</tr>
<tr>
<td>autoZIndex</td>
<td>boolean</td>
<td>true</td>
<td>Whether to automatically manage layering.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<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>blocked</td>
<td>array</td>
<td>null</td>
<td>Controls the blocked state.</td>
</tr>
<tr>
<td>fullscreen</td>
<td>menuitem</td>
<td>null</td>
<td>When enabled, the whole document gets blocked.</td>
</tr>
<tr>
<td>baseZIndex</td>
<td>number</td>
<td>0</td>
<td>Base zIndex value to use in layering.</td>
</tr>
<tr>
<td>autoZIndex</td>
<td>boolean</td>
<td>true</td>
<td>Whether to automatically manage layering.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</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>block</td>
<td>-</td>
<td>Fired when the element gets blocked.</td>
</tr>
<tr>
<td>unblock</td>
<td>-</td>
<td>Fired when the element gets unblocked.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</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>block</td>
<td>-</td>
<td>Fired when the element gets blocked.</td>
</tr>
<tr>
<td>unblock</td>
<td>-</td>
<td>Fired when the element gets unblocked.</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>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-blockui</td>
<td>Mask element.</td>
</tr>
<tr>
<td>p-blockui-document</td>
<td>Mask element in full screen mode.</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>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-blockui</td>
<td>Mask element.</td>
</tr>
<tr>
<td>p-blockui-document</td>
<td>Mask element in full screen mode.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/blockui" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="BlockUIDemo" :sources="sources" :components="['Button', 'Panel']" />
</div>
<pre v-code><code>
&lt;h3&gt;Document&lt;/h3&gt;
&lt;BlockUI :blocked="blockedDocument" :fullScreen="true"&gt;&lt;/BlockUI&gt;
&lt;Button type="button" label="Block" @click="blockDocument()"&gt;&lt;/Button&gt;
&lt;h3&gt;Panel&lt;/h3&gt;
&lt;Button type="button" label="Block" @click="blockPanel()"&gt;&lt;/Button&gt;
&lt;Button type="button" label="Unblock" @click="unblockPanel()"&gt;&lt;/Button&gt;
&lt;BlockUI :blocked="blockedPanel"&gt;
&lt;Panel header="Godfather I" style="margin-top: 20px"&gt;
&lt;p&gt;The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.&lt;/p&gt;
&lt;/Panel&gt;
&lt;/BlockUI&gt;
</code></pre>
<pre v-code.script><code>
export default {
data() {
return {
blockedPanel: false,
blockedDocument: false
}
},
methods: {
blockDocument() {
this.blockedDocument = true;
setTimeout(() => {
this.blockedDocument = false;
}, 3000);
},
blockPanel() {
this.blockedPanel = true;
},
unblockPanel() {
this.blockedPanel = false;
}
}
}
</code></pre>
</TabPanel>
</TabView>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<h5>Document</h5>
<BlockUI :blocked="blockedDocument" :fullScreen="true"></BlockUI>
'options-api': {
tabName: 'Source',
content: `
<template>
<div class="card">
<h5>Document</h5>
<BlockUI :blocked="blockedDocument" :fullScreen="true"></BlockUI>
<Button type="button" label="Block" @click="blockDocument()"></Button>
<Button type="button" label="Block" @click="blockDocument()"></Button>
<h5>Panel</h5>
<Button type="button" label="Block" @click="blockPanel()"></Button>
<Button type="button" label="Unblock" @click="unblockPanel()"></Button>
<h5>Panel</h5>
<Button type="button" label="Block" @click="blockPanel()"></Button>
<Button type="button" label="Unblock" @click="unblockPanel()"></Button>
<BlockUI :blocked="blockedPanel">
<Panel header="Godfather I" style="margin-top: 20px">
<p>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
</Panel>
</BlockUI>
</div>
</div>
<BlockUI :blocked="blockedPanel">
<Panel header="Godfather I" style="margin-top: 20px">
<p>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
</Panel>
</BlockUI>
</div>
</template>
@ -256,8 +193,72 @@ export default {
this.blockedPanel = false;
}
}
}`,
style: `<style lang="scss" scoped>
}
<\\/script>
<style lang="scss" scoped>
.p-panel p {
line-height: 1.5;
margin: 0;
}
button {
margin-right: .5rem;
}
</style>`
},
'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<h5>Document</h5>
<BlockUI :blocked="blockedDocument" :fullScreen="true"></BlockUI>
<Button type="button" label="Block" @click="blockDocument()"></Button>
<h5>Panel</h5>
<Button type="button" label="Block" @click="blockPanel()"></Button>
<Button type="button" label="Unblock" @click="unblockPanel()"></Button>
<BlockUI :blocked="blockedPanel">
<Panel header="Godfather I" style="margin-top: 20px">
<p>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
</Panel>
</BlockUI>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
data() {
const blockedPanel = ref(false);
const blockedDocument = ref(false);
const blockDocument = () => {
blockedDocument.value = true;
setTimeout(() => {
blockedDocument.value = false;
}, 3000);
};
const blockPanel = () => {
blockedPanel.value = true;
};
const unblockPanel = () => {
blockedPanel.value = false;
};
return { blockedPanel, blockedDocument, blockDocument, blockPanel, unblockPanel }
}
}
<\\/script>
<style lang="scss" scoped>
.p-panel p {
line-height: 1.5;
margin: 0;
@ -270,9 +271,6 @@ button {
}
}
}
},
components: {
LiveEditor
}
}
}
</script>

799
src/views/carousel/CarouselDoc.vue
View File

@ -1,15 +1,13 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h5>Import</h5>
<AppDoc name="CarouselDemo" :sources="sources" service="ProductService" data="products-small">
<h5>Import</h5>
<pre v-code.script><code>
import Carousel from 'primevue/carousel';
</code></pre>
<h5>Getting Started</h5>
<p>Carousel requires a collection of items as its value along with a template to render each item.</p>
<h5>Getting Started</h5>
<p>Carousel requires a collection of items as its value along with a template to render each item.</p>
<pre v-code><code>
&lt;Carousel :value="cars"&gt;
&lt;template #item="slotProps"&gt;
@ -18,8 +16,8 @@ import Carousel from 'primevue/carousel';
</code></pre>
<h5>Items per page and Scroll Items</h5>
<p>Number of items per page is defined using the <i>numVisible</i> property whereas number of items to scroll is defined with the <i>numScroll</i> property.</p>
<h5>Items per page and Scroll Items</h5>
<p>Number of items per page is defined using the <i>numVisible</i> property whereas number of items to scroll is defined with the <i>numScroll</i> property.</p>
<pre v-code><code>
&lt;Carousel :value="cars" :numVisible="3" :numScroll="1"&gt;
&lt;template #item="slotProps"&gt;
@ -28,9 +26,9 @@ import Carousel from 'primevue/carousel';
</code></pre>
<h5>Responsive</h5>
<p>For responsive design, <i>numVisible</i> and <i>numScroll</i> can be defined using the <i>responsiveOptions</i> property that should be an array of
objects whose breakpoint defines the max-width to apply the settings.</p>
<h5>Responsive</h5>
<p>For responsive design, <i>numVisible</i> and <i>numScroll</i> can be defined using the <i>responsiveOptions</i> property that should be an array of
objects whose breakpoint defines the max-width to apply the settings.</p>
<pre v-code><code><template v-pre>
&lt;Carousel :value="cars" :numVisible="4" :numScroll="3" :responsiveOptions="responsiveOptions"&gt;
&lt;template #header&gt;
@ -83,8 +81,8 @@ data() {
</code></pre>
<h5>Header and Footer</h5>
<p>Custom content projection is available using the <i>header</i> and <i>footer</i> templates.</p>
<h5>Header and Footer</h5>
<p>Custom content projection is available using the <i>header</i> and <i>footer</i> templates.</p>
<pre v-code><code>
&lt;Carousel :value="cars" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions"&gt;
@ -101,8 +99,8 @@ data() {
</code></pre>
<h5>Orientation</h5>
<p>Default layout of the Carousel is horizontal, other possible option is the vertical mode that is configured with the <i>orientation</i> property.</p>
<h5>Orientation</h5>
<p>Default layout of the Carousel is horizontal, other possible option is the vertical mode that is configured with the <i>orientation</i> property.</p>
<pre v-code><code>
&lt;Carousel :value="cars" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" :responsiveOptions="responsiveOptions"&gt;
&lt;template #item="slotProps"&gt;
@ -112,8 +110,8 @@ data() {
</code></pre>
<h5>AutoPlay and Circular</h5>
<p>When <i>autoplayInterval</i> is defined in milliseconds, items are scrolled automatically. In addition, for infinite scrolling <i>circular</i> property needs to be enabled. Note that in autoplay mode, circular is enabled by default.</p>
<h5>AutoPlay and Circular</h5>
<p>When <i>autoplayInterval</i> is defined in milliseconds, items are scrolled automatically. In addition, for infinite scrolling <i>circular</i> property needs to be enabled. Note that in autoplay mode, circular is enabled by default.</p>
<pre v-code><code>
&lt;Carousel :value="cars" :numVisible="3" :numScroll="1" :circular="true" :autoplayInterval="3000"&gt;
&lt;template #header&gt;
@ -126,265 +124,269 @@ data() {
</code></pre>
<h5>Properties</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>value</td>
<td>array</td>
<td>null</td>
<td>An array of objects to display.</td>
</tr>
<tr>
<td>page</td>
<td>number</td>
<td>null</td>
<td>Index of the first item.</td>
</tr>
<tr>
<td>circular</td>
<td>boolean</td>
<td>false</td>
<td>Defines if scrolling would be infinite.</td>
</tr>
<tr>
<td>autoplayInterval</td>
<td>number</td>
<td>null</td>
<td>Time in milliseconds to scroll items automatically.</td>
</tr>
<tr>
<td>numVisible</td>
<td>number</td>
<td>1</td>
<td>Number of items per page.</td>
</tr>
<tr>
<td>numScroll</td>
<td>number</td>
<td>1</td>
<td>Number of items to scroll.</td>
</tr>
<tr>
<td>responsiveOptions</td>
<td>any</td>
<td>null</td>
<td>An array of options for responsive design.</td>
</tr>
<tr>
<td>orientation</td>
<td>string</td>
<td>horizontal</td>
<td>Specifies the layout of the component, valid values are "horizontal" and "vertical".</td>
</tr>
<tr>
<td>verticalViewPortHeight</td>
<td>string</td>
<td>300px</td>
<td>Height of the viewport in vertical layout.</td>
</tr>
<tr>
<td>contentClass</td>
<td>string</td>
<td>null</td>
<td>Style class of main content.</td>
</tr>
<tr>
<td>containerClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the viewport container.</td>
</tr>
<tr>
<td>indicatorsContentClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the indicator items.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</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>value</td>
<td>array</td>
<td>null</td>
<td>An array of objects to display.</td>
</tr>
<tr>
<td>page</td>
<td>number</td>
<td>null</td>
<td>Index of the first item.</td>
</tr>
<tr>
<td>circular</td>
<td>boolean</td>
<td>false</td>
<td>Defines if scrolling would be infinite.</td>
</tr>
<tr>
<td>autoplayInterval</td>
<td>number</td>
<td>null</td>
<td>Time in milliseconds to scroll items automatically.</td>
</tr>
<tr>
<td>numVisible</td>
<td>number</td>
<td>1</td>
<td>Number of items per page.</td>
</tr>
<tr>
<td>numScroll</td>
<td>number</td>
<td>1</td>
<td>Number of items to scroll.</td>
</tr>
<tr>
<td>responsiveOptions</td>
<td>any</td>
<td>null</td>
<td>An array of options for responsive design.</td>
</tr>
<tr>
<td>orientation</td>
<td>string</td>
<td>horizontal</td>
<td>Specifies the layout of the component, valid values are "horizontal" and "vertical".</td>
</tr>
<tr>
<td>verticalViewPortHeight</td>
<td>string</td>
<td>300px</td>
<td>Height of the viewport in vertical layout.</td>
</tr>
<tr>
<td>contentClass</td>
<td>string</td>
<td>null</td>
<td>Style class of main content.</td>
</tr>
<tr>
<td>containerClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the viewport container.</td>
</tr>
<tr>
<td>indicatorsContentClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the indicator items.</td>
</tr>
</tbody>
</table>
</div>
<h5>Slots</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
</tr>
</thead>
<tbody>
<tr>
<td>header</td>
<td>-</td>
</tr>
<tr>
<td>item</td>
<td>data: Data of the component<br />
index: Index of the item</td>
</tr>
<tr>
<td>footer</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
<h5>Slots</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
</tr>
</thead>
<tbody>
<tr>
<td>header</td>
<td>-</td>
</tr>
<tr>
<td>item</td>
<td>data: Data of the component<br />
index: Index of the item</td>
</tr>
<tr>
<td>footer</td>
<td>-</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>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-carousel</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-carousel-header</td>
<td>Header section.</td>
</tr>
<tr>
<td>p-carousel-footer</td>
<td>Footer section.</td>
</tr>
<tr>
<td>p-carousel-content</td>
<td>Main content element. It contains the container of the viewport.</td>
</tr>
<tr>
<td>p-carousel-container</td>
<td>Container of the viewport. It contains navigation buttons and viewport.</td>
</tr>
<tr>
<td>p-carousel-items-content</td>
<td>Viewport.</td>
</tr>
<tr>
<td>p-carousel-indicators</td>
<td>Container of the indicators.</td>
</tr>
<tr>
<td>p-carousel-indicator</td>
<td>Indicator element.</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>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-carousel</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-carousel-header</td>
<td>Header section.</td>
</tr>
<tr>
<td>p-carousel-footer</td>
<td>Footer section.</td>
</tr>
<tr>
<td>p-carousel-content</td>
<td>Main content element. It contains the container of the viewport.</td>
</tr>
<tr>
<td>p-carousel-container</td>
<td>Container of the viewport. It contains navigation buttons and viewport.</td>
</tr>
<tr>
<td>p-carousel-items-content</td>
<td>Viewport.</td>
</tr>
<tr>
<td>p-carousel-indicators</td>
<td>Container of the indicators.</td>
</tr>
<tr>
<td>p-carousel-indicator</td>
<td>Indicator element.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/carousel" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="CarouselDemo" :sources="sources" service="ProductService" data="products-small" :components="['Button']" />
</div>
<pre v-code><code><template v-pre>
&lt;div class="card"&gt;
&lt;Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions"&gt;
&lt;template #header&gt;
&lt;h5&gt;Basic&lt;/h5&gt;
&lt;/template&gt;
&lt;template #item="slotProps"&gt;
&lt;div class="product-item"&gt;
&lt;div class="product-item-content"&gt;
&lt;div class="p-mb-3"&gt;
&lt;img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" /&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;h4 class="p-mb-1"&gt;{{slotProps.data.name}}&lt;/h4&gt;
&lt;h6 class="p-mt-0 p-mb-3"&gt;${{slotProps.data.price}}&lt;/h6&gt;
&lt;span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()"&gt;{{slotProps.data.inventoryStatus}}&lt;/span&gt;
&lt;div class="car-buttons p-mt-5"&gt;
&lt;Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" /&gt;
&lt;Button icon="pi pi-star" class="p-button-success p-button-rounded p-mr-2" /&gt;
&lt;Button icon="pi pi-cog" class="p-button-help p-button-rounded" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;/Carousel&gt;
&lt;/div&gt;
&lt;div class="card"&gt;
&lt;Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" class="custom-carousel" :circular="true" :autoplayInterval="3000"&gt;
&lt;template #header&gt;
&lt;h5&gt;Circular, AutoPlay, 3 Items per Page and Scroll by 1&lt;/h5&gt;
&lt;/template&gt;
&lt;template #item="slotProps"&gt;
&lt;div class="product-item"&gt;
&lt;div class="product-item-content"&gt;
&lt;div class="p-mb-3"&gt;
&lt;img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" /&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;h4 class="p-mb-1"&gt;{{slotProps.data.name}}&lt;/h4&gt;
&lt;h6 class="p-mt-0 p-mb-3"&gt;${{slotProps.data.price}}&lt;/h6&gt;
&lt;span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()"&gt;{{slotProps.data.inventoryStatus}}&lt;/span&gt;
&lt;div class="car-buttons p-mt-5"&gt;
&lt;Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" /&gt;
&lt;Button icon="pi pi-star" class="p-button-success p-button-rounded p-mr-2" /&gt;
&lt;Button icon="pi pi-cog" class="p-button-help p-button-rounded" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;/Carousel&gt;
&lt;/div&gt;
&lt;div class="card"&gt;
&lt;Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="352px"
style="max-width: 400px; margin-top: 2em"&gt;
&lt;template #header&gt;
&lt;h5&gt;Vertical&lt;/h5&gt;
&lt;/template&gt;
&lt;template #item="slotProps"&gt;
&lt;div class="product-item"&gt;
&lt;div class="product-item-content"&gt;
&lt;div class="p-mb-3"&gt;
&lt;img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" /&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;h4 class="p-mb-1"&gt;{{slotProps.data.name}}&lt;/h4&gt;
&lt;h6 class="p-mt-0 p-mb-3"&gt;${{slotProps.data.price}}&lt;/h6&gt;
&lt;span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()"&gt;{{slotProps.data.inventoryStatus}}&lt;/span&gt;
&lt;div class="car-buttons p-mt-5"&gt;
&lt;Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" /&gt;
&lt;Button icon="pi pi-star" class="p-button-success p-button-rounded p-mr-2" /&gt;
&lt;Button icon="pi pi-cog" class="p-button-help p-button-rounded" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;/Carousel&gt;
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
</code></pre>
<pre v-code.script><code>
import ProductService from '../../service/ProductService';
<script>
export default {
data() {
return {
sources: {
'options-api': {
tabName: 'Source',
content: `
<template>
<div class="card">
<div class="card">
<Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
<template #header>
<h5>Basic</h5>
</template>
<template #item="slotProps">
<div class="product-item">
<div class="product-item-content">
<div class="p-mb-3">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" />
</div>
<div>
<h4 class="p-mb-1">{{slotProps.data.name}}</h4>
<h6 class="p-mt-0 p-mb-3">\${{slotProps.data.price}}</h6>
<span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
<div class="car-buttons p-mt-5">
<Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" />
<Button icon="pi pi-star" class="p-button-success p-button-rounded p-mr-2" />
<Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
</div>
</div>
</div>
</div>
</template>
</Carousel>
</div>
<div class="card">
<Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" class="custom-carousel" :circular="true" :autoplayInterval="3000">
<template #header>
<h5>Circular, AutoPlay, 3 Items per Page and Scroll by 1</h5>
</template>
<template #item="slotProps">
<div class="product-item">
<div class="product-item-content">
<div class="p-mb-3">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" />
</div>
<div>
<h4 class="p-mb-1">{{slotProps.data.name}}</h4>
<h6 class="p-mt-0 p-mb-3">\${{slotProps.data.price}}</h6>
<span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
<div class="car-buttons p-mt-5">
<Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" />
<Button icon="pi pi-star" class="p-button-success p-button-rounded p-mr-2" />
<Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
</div>
</div>
</div>
</div>
</template>
</Carousel>
</div>
<div class="card">
<Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="500px"
style="max-width: 400px; margin-top: 2em">
<template #header>
<h5>Vertical</h5>
</template>
<template #item="slotProps">
<div class="product-item">
<div class="product-item-content">
<div class="p-mb-3">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" />
</div>
<div>
<h4 class="p-mb-1">{{slotProps.data.name}}</h4>
<h6 class="p-mt-0 p-mb-3">\${{slotProps.data.price}}</h6>
<span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
<div class="car-buttons p-mt-5">
<Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" />
<Button icon="pi pi-star" class="p-button-success p-button-rounded p-mr-2" />
<Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
</div>
</div>
</div>
</div>
</template>
</Carousel>
</div>
</div>
</template>
<script>
import ProductService from './service/ProductService';
export default {
data() {
@ -417,10 +419,9 @@ export default {
this.productService.getProductsSmall().then(data => this.products = data.slice(0,9));
}
}
<\\/script>
</code></pre>
<pre v-code.css><code>
<style lang="scss" scoped>
.product-item {
.product-item-content {
border: 1px solid var(--surface-d);
@ -435,143 +436,132 @@ export default {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
}
}
</style>`
},
'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div>
<div class="card">
<Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
<template #header>
<h5>Basic</h5>
</template>
<template #item="slotProps">
<div class="product-item">
<div class="product-item-content">
<div class="p-mb-3">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" />
</div>
<div>
<h4 class="p-mb-1">{{slotProps.data.name}}</h4>
<h6 class="p-mt-0 p-mb-3">\${{slotProps.data.price}}</h6>
<span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
<div class="car-buttons p-mt-5">
<Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" />
<Button icon="pi pi-star" class="p-button-success p-button-rounded p-mr-2" />
<Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
</div>
</div>
</div>
</div>
</template>
</Carousel>
</div>
</code></pre>
</TabPanel>
</TabView>
<div class="card">
<Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" class="custom-carousel" :circular="true" :autoplayInterval="3000">
<template #header>
<h5>Circular, AutoPlay, 3 Items per Page and Scroll by 1</h5>
</template>
<template #item="slotProps">
<div class="product-item">
<div class="product-item-content">
<div class="p-mb-3">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" />
</div>
<div>
<h4 class="p-mb-1">{{slotProps.data.name}}</h4>
<h6 class="p-mt-0 p-mb-3">\${{slotProps.data.price}}</h6>
<span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
<div class="car-buttons p-mt-5">
<Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" />
<Button icon="pi pi-star" class="p-button-success p-button-rounded p-mr-2" />
<Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
</div>
</div>
</div>
</div>
</template>
</Carousel>
</div>
<div class="card">
<Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="500px"
style="max-width: 400px; margin-top: 2em">
<template #header>
<h5>Vertical</h5>
</template>
<template #item="slotProps">
<div class="product-item">
<div class="product-item-content">
<div class="p-mb-3">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" />
</div>
<div>
<h4 class="p-mb-1">{{slotProps.data.name}}</h4>
<h6 class="p-mt-0 p-mb-3">\${{slotProps.data.price}}</h6>
<span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
<div class="car-buttons p-mt-5">
<Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" />
<Button icon="pi pi-star" class="p-button-success p-button-rounded p-mr-2" />
<Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
</div>
</div>
</div>
</div>
</template>
</Carousel>
</div>
</div>
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
<template #header>
<h5>Basic</h5>
</template>
<template #item="slotProps">
<div class="product-item">
<div class="product-item-content">
<div class="p-mb-3">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" />
</div>
<div>
<h4 class="p-mb-1">{{slotProps.data.name}}</h4>
<h6 class="p-mt-0 p-mb-3">\${{slotProps.data.price}}</h6>
<span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
<div class="car-buttons p-mt-5">
<Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" />
<Button icon="pi pi-star" class="p-button-success p-button-rounded p-mr-2" />
<Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
</div>
</div>
</div>
</div>
</template>
</Carousel>
</div>
<div class="card">
<Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" class="custom-carousel" :circular="true" :autoplayInterval="3000">
<template #header>
<h5>Circular, AutoPlay, 3 Items per Page and Scroll by 1</h5>
</template>
<template #item="slotProps">
<div class="product-item">
<div class="product-item-content">
<div class="p-mb-3">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" />
</div>
<div>
<h4 class="p-mb-1">{{slotProps.data.name}}</h4>
<h6 class="p-mt-0 p-mb-3">\${{slotProps.data.price}}</h6>
<span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
<div class="car-buttons p-mt-5">
<Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" />
<Button icon="pi pi-star" class="p-button-success p-button-rounded p-mr-2" />
<Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
</div>
</div>
</div>
</div>
</template>
</Carousel>
</div>
<div class="card">
<Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="352px"
style="max-width: 400px; margin-top: 2em">
<template #header>
<h5>Vertical</h5>
</template>
<template #item="slotProps">
<div class="product-item">
<div class="product-item-content">
<div class="p-mb-3">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" />
</div>
<div>
<h4 class="p-mb-1">{{slotProps.data.name}}</h4>
<h6 class="p-mt-0 p-mb-3">\${{slotProps.data.price}}</h6>
<span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
<div class="car-buttons p-mt-5">
<Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" />
<Button icon="pi pi-star" class="p-button-success p-button-rounded p-mr-2" />
<Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
</div>
</div>
</div>
</div>
</template>
</Carousel>
</div>
</div>
</div>
</template>
<script>
import ProductService from '../service/ProductService';
import { ref, onMounted } from 'vue';
import ProductService from './service/ProductService';
export default {
data() {
return {
products: null,
responsiveOptions: [
{
breakpoint: '1024px',
numVisible: 3,
numScroll: 3
},
{
breakpoint: '600px',
numVisible: 2,
numScroll: 2
},
{
breakpoint: '480px',
numVisible: 1,
numScroll: 1
}
]
}
},
productService: null,
created() {
this.productService = new ProductService();
},
mounted() {
this.productService.getProductsSmall().then(data => this.products = data.slice(0,9));
setup() {
onMounted(() => {
productService.value.getProductsSmall().then(data => products.value = data.slice(0,9));
})
const products = ref(null);
const productService = ref(new ProductService());
const responsiveOptions = ref([
{
breakpoint: '1024px',
numVisible: 3,
numScroll: 3
},
{
breakpoint: '600px',
numVisible: 2,
numScroll: 2
},
{
breakpoint: '480px',
numVisible: 1,
numScroll: 1
}
]);
return {products, productService, responsiveOptions }
}
}`,
style: `<style lang="scss" scoped>
}
<\\/script>
<style lang="scss" scoped>
.product-item {
.product-item-content {
border: 1px solid var(--surface-d);
@ -590,9 +580,6 @@ export default {
}
}
}
},
components: {
LiveEditor
}
}
</script>

389
src/views/chip/ChipDoc.vue
View File

@ -1,15 +1,13 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h5>Import</h5>
<AppDoc name="ChipDemo" :sources="sources">
<h5>Import</h5>
<pre v-code.script><code>
import Chip from 'primevue/chip';
</code></pre>
<h5>Getting Started</h5>
<p>Chip can display labels, icons and images.</p>
<h5>Getting Started</h5>
<p>Chip can display labels, icons and images.</p>
<pre v-code><code>
&lt;Chip label="Text Only" /&gt;
&lt;Chip label="Text with icon" icon="pi pi-check" /&gt;
@ -17,16 +15,16 @@ import Chip from 'primevue/chip';
</code></pre>
<h5>Removable</h5>
<p>Setting <i>removable</i> property displays an icon to close the chip, the optional <i>remove</i>
event is available to get notified when a chip is hidden.</p>
<h5>Removable</h5>
<p>Setting <i>removable</i> property displays an icon to close the chip, the optional <i>remove</i>
event is available to get notified when a chip is hidden.</p>
<pre v-code><code>
&lt;Chip label="Text" removable /&gt;
</code></pre>
<h5>Templating</h5>
<p>Content can easily be customized with the default slot instead of using the built-in modes.</p>
<h5>Templating</h5>
<p>Content can easily be customized with the default slot instead of using the built-in modes.</p>
<pre v-code><code>
&lt;Chip&gt;
Content
@ -34,206 +32,210 @@ import Chip from 'primevue/chip';
</code></pre>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<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>label</td>
<td>string</td>
<td>null</td>
<td>Defines the text to display.</td>
</tr>
<tr>
<td>icon</td>
<td>string</td>
<td>null</td>
<td>Defines the icon to display.</td>
</tr>
<tr>
<td>image</td>
<td>string</td>
<td>null</td>
<td>Defines the image to display.</td>
</tr>
<tr>
<td>removable</td>
<td>boolean</td>
<td>false</td>
<td>Whether to display a remove icon.</td>
</tr>
<tr>
<td>removeIconClass</td>
<td>string</td>
<td>pi pi-times-circle</td>
<td>Icon of the remove element.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<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>label</td>
<td>string</td>
<td>null</td>
<td>Defines the text to display.</td>
</tr>
<tr>
<td>icon</td>
<td>string</td>
<td>null</td>
<td>Defines the icon to display.</td>
</tr>
<tr>
<td>image</td>
<td>string</td>
<td>null</td>
<td>Defines the image to display.</td>
</tr>
<tr>
<td>removable</td>
<td>boolean</td>
<td>false</td>
<td>Whether to display a remove icon.</td>
</tr>
<tr>
<td>removeIconClass</td>
<td>string</td>
<td>pi pi-times-circle</td>
<td>Icon of the remove element.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</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>remove</td>
<td>event: Browser event</td>
<td>Callback to invoke when a chip is removed.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</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>remove</td>
<td>event: Browser event</td>
<td>Callback to invoke when a chip is removed.</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>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-chip</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-chip-image</td>
<td>Container element in image mode.</td>
</tr>
<tr>
<td>p-chip-text</td>
<td>Text of the chip.</td>
</tr>
<tr>
<td>pi-chip-remove-icon</td>
<td>Remove icon.</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>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-chip</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-chip-image</td>
<td>Container element in image mode.</td>
</tr>
<tr>
<td>p-chip-text</td>
<td>Text of the chip.</td>
</tr>
<tr>
<td>pi-chip-remove-icon</td>
<td>Remove icon.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/chip" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="ChipDemo" :sources="sources" />
</div>
<pre v-code><code><template v-pre>
&lt;h5&gt;Basic&lt;/h5&gt;
&lt;div class="p-d-flex p-ai-center"&gt;
&lt;Chip label="Action" class="p-mr-2" /&gt;
&lt;Chip label="Comedy" class="p-mr-2" /&gt;
&lt;Chip label="Mystery" class="p-mr-2" /&gt;
&lt;Chip label="Thriller" removable /&gt;
&lt;/div&gt;
&lt;h5&gt;Icon&lt;/h5&gt;
&lt;div class="p-d-flex p-ai-center"&gt;
&lt;Chip label="Apple" icon="pi pi-apple" class="p-mr-2" /&gt;
&lt;Chip label="Facebook" icon="pi pi-facebook" class="p-mr-2" /&gt;
&lt;Chip label="Google" icon="pi pi-google" class="p-mr-2" /&gt;
&lt;Chip label="Microsoft" icon="pi pi-microsoft" removable /&gt;
&lt;/div&gt;
&lt;h5&gt;Image&lt;/h5&gt;
&lt;div class="p-d-flex p-ai-center"&gt;
&lt;Chip label="Amy Elsner" image="demo/images/avatar/amyelsner.png" class="p-mr-2" /&gt;
&lt;Chip label="Asiya Javayant" image="demo/images/avatar/asiyajavayant.png" class="p-mr-2" /&gt;
&lt;Chip label="Onyama Limba" image="demo/images/avatar/onyamalimba.png" class="p-mr-2" /&gt;
&lt;Chip label="Xuxue Feng" image="demo/images/avatar/xuxuefeng.png" removable /&gt;
&lt;/div&gt;
&lt;h5&gt;Styling&lt;/h5&gt;
&lt;div class="p-d-flex p-ai-center"&gt;
&lt;Chip label="Action" class="p-mr-2 custom-chip" /&gt;
&lt;Chip label="Apple" icon="pi pi-apple" class="p-mr-2 custom-chip" /&gt;
&lt;Chip label="Onyama Limba" image="demo/images/avatar/onyamalimba.png" class="p-mr-2 custom-chip" /&gt;
&lt;Chip label="Xuxue Feng" image="demo/images/avatar/xuxuefeng.png" class="custom-chip" removable /&gt;
&lt;/div&gt;
</template>
</code></pre>
</TabPanel>
</TabView>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<h5>Basic</h5>
<div class="p-d-flex p-ai-center">
<Chip label="Action" class="p-mr-2" />
<Chip label="Comedy" class="p-mr-2" />
<Chip label="Mystery" class="p-mr-2" />
<Chip label="Thriller" removable />
</div>
'options-api': {
tabName: 'Source',
content: `
<template>
<div class="card">
<h5>Basic</h5>
<div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
<Chip label="Action" class="p-mr-2 p-mb-2" />
<Chip label="Comedy" class="p-mr-2 p-mb-2" />
<Chip label="Mystery" class="p-mr-2 p-mb-2" />
<Chip label="Thriller" class="p-mb-2" removable />
</div>
<h5>Icon</h5>
<div class="p-d-flex p-ai-center">
<Chip label="Apple" icon="pi pi-apple" class="p-mr-2" />
<Chip label="Facebook" icon="pi pi-facebook" class="p-mr-2" />
<Chip label="Google" icon="pi pi-google" class="p-mr-2" />
<Chip label="Microsoft" icon="pi pi-microsoft" removable />
</div>
<h5>Icon</h5>
<div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
<Chip label="Apple" icon="pi pi-apple" class="p-mr-2 p-mb-2" />
<Chip label="Facebook" icon="pi pi-facebook" class="p-mr-2 p-mb-2" />
<Chip label="Google" icon="pi pi-google" class="p-mr-2 p-mb-2" />
<Chip label="Microsoft" icon="pi pi-microsoft" class="p-mb-2" removable />
</div>
<h5>Image</h5>
<div class="p-d-flex p-ai-center">
<Chip label="Amy Elsner" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" />
<Chip label="Asiya Javayant" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" />
<Chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" />
<Chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" removable />
</div>
<h5>Image</h5>
<div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
<Chip label="Amy Elsner" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2" />
<Chip label="Asiya Javayant" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2" />
<Chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2" />
<Chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mb-2" removable />
</div>
<h5>Styling</h5>
<div class="p-d-flex p-ai-center">
<Chip label="Action" class="p-mr-2 custom-chip" />
<Chip label="Apple" icon="pi pi-apple" class="p-mr-2 custom-chip" />
<Chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 custom-chip" />
<Chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="custom-chip" removable />
</div>
</div>
<h5>Styling</h5>
<div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
<Chip label="Action" class="p-mr-2 p-mb-2 custom-chip" />
<Chip label="Apple" icon="pi pi-apple" class="p-mr-2 p-mb-2 custom-chip" />
<Chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2 custom-chip" />
<Chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="custom-chip p-mb-2" removable />
</div>
</div>
</template>
<script>
export default {
}`,
style: `<style lang="scss" scoped>
}
<\\/script>
<style lang="scss" scoped>
.p-chip.custom-chip {
background: var(--primary-color);
color: var(--primary-color-text);
}
</style>`
},
'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<h5>Basic</h5>
<div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
<Chip label="Action" class="p-mr-2 p-mb-2" />
<Chip label="Comedy" class="p-mr-2 p-mb-2" />
<Chip label="Mystery" class="p-mr-2 p-mb-2" />
<Chip label="Thriller" class="p-mb-2" removable />
</div>
<h5>Icon</h5>
<div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
<Chip label="Apple" icon="pi pi-apple" class="p-mr-2 p-mb-2" />
<Chip label="Facebook" icon="pi pi-facebook" class="p-mr-2 p-mb-2" />
<Chip label="Google" icon="pi pi-google" class="p-mr-2 p-mb-2" />
<Chip label="Microsoft" icon="pi pi-microsoft" class="p-mb-2" removable />
</div>
<h5>Image</h5>
<div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
<Chip label="Amy Elsner" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2" />
<Chip label="Asiya Javayant" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2" />
<Chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2" />
<Chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mb-2" removable />
</div>
<h5>Styling</h5>
<div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
<Chip label="Action" class="p-mr-2 p-mb-2 custom-chip" />
<Chip label="Apple" icon="pi pi-apple" class="p-mr-2 p-mb-2 custom-chip" />
<Chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2 custom-chip" />
<Chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="custom-chip p-mb-2" removable />
</div>
</div>
</template>
<script>
export default {
}
<\\/script>
<style lang="scss" scoped>
.p-chip.custom-chip {
background: var(--primary-color);
color: var(--primary-color-text);
@ -242,9 +244,6 @@ export default {
}
}
}
},
components: {
LiveEditor
}
}
</script>

229
src/views/inplace/InplaceDoc.vue
View File

@ -1,8 +1,6 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h5>Import</h5>
<AppDoc name="InplaceDemo" :sources="sources" service="ProductService" data="products-small" >
<h5>Import</h5>
<pre v-code.script><code>
import Inplace from 'primevue/inplace';
@ -184,134 +182,59 @@ export default {
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/inplace" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="InplaceDemo" :sources="sources" service="ProductService" data="products-small" :components="['InputText', 'DataTable', 'Column']" />
</div>
<pre v-code><code><template v-pre>
&lt;h3&gt;Input&lt;/h3&gt;
&lt;Inplace :closable="true"&gt;
&lt;template #display&gt;
&#123;&#123;text || 'Click to Edit'&#125;&#125;
&lt;/template&gt;
&lt;template #content&gt;
&lt;InputText v-model="text" autoFocus /&gt;
&lt;/template&gt;
&lt;/Inplace&gt;
&lt;h3&gt;Image&lt;/h3&gt;
&lt;Inplace&gt;
&lt;template #display&gt;
&lt;span class="pi pi-search" style="vertical-align: middle"&gt;&lt;/span&gt;
&lt;span style="margin-left:.5rem; vertical-align: middle"&gt;View Picture&lt;/span&gt;
&lt;/template&gt;
&lt;template #content&gt;
&lt;img src="demo/images/nature/nature1.jpg" /&gt;
&lt;/template&gt;
&lt;/Inplace&gt;
&lt;h3&gt;Lazy Data&lt;/h3&gt;
&lt;Inplace @open="loadData"&gt;
&lt;template #display&gt;
View Data
&lt;/template&gt;
&lt;template #content&gt;
&lt;DataTable :value="products"&gt;
&lt;Column field="code" header="Code"&gt;&lt;/Column&gt;
&lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
&lt;Column field="category" header="Category"&gt;&lt;/Column&gt;
&lt;Column field="quantity" header="Quantity"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
&lt;/template&gt;
&lt;/Inplace&gt;
</template>
</code></pre>
<pre v-code.script><code>
import ProductService from '../../service/ProductService';
export default {
data() {
return {
text: null,
products: null
}
},
productService: null,
created() {
this.productService = new ProductService();
},
methods: {
loadData() {
this.productService.getProductsSmall().then(data => this.products = data);
}
}
}
</code></pre>
</TabPanel>
</TabView>
</div>
</AppDoc>
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<h5>Input</h5>
<Inplace :closable="true">
<template #display>
{{text || 'Click to Edit'}}
</template>
<template #content>
<InputText v-model="text" autoFocus />
</template>
</Inplace>
'options-api': {
tabName: 'Source',
content: `
<template>
<div class="card">
<h5>Input</h5>
<Inplace :closable="true">
<template #display>
{{text || 'Click to Edit'}}
</template>
<template #content>
<InputText v-model="text" autoFocus />
</template>
</Inplace>
<h5>Image</h5>
<Inplace>
<template #display>
<span class="pi pi-search" style="vertical-align: middle"></span>
<span style="margin-left:.5rem; vertical-align: middle">View Picture</span>
</template>
<template #content>
<img src="https://www.primefaces.org/wp-content/uploads/2020/12/primevue-min.png" width="200" />
</template>
</Inplace>
<h5>Image</h5>
<Inplace>
<template #display>
<span class="pi pi-search" style="vertical-align: middle"></span>
<span style="margin-left:.5rem; vertical-align: middle">View Picture</span>
</template>
<template #content>
<img src="https://www.primefaces.org/wp-content/uploads/2020/12/primevue-min.png" width="200" />
</template>
</Inplace>
<h5>Lazy Data</h5>
<Inplace @open="loadData">
<template #display>
View Data
</template>
<template #content>
<DataTable :value="products">
<Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column>
<Column field="quantity" header="Quantity"></Column>
</DataTable>
</template>
</Inplace>
</div>
</div>
<h5>Lazy Data</h5>
<Inplace @open="loadData">
<template #display>
View Data
</template>
<template #content>
<DataTable :value="products" responsiveLayout="scroll" >
<Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column>
<Column field="quantity" header="Quantity"></Column>
</DataTable>
</template>
</Inplace>
</div>
</template>
<script>
import ProductService from '../service/ProductService';
import ProductService from './service/ProductService';
export default {
data() {
@ -329,13 +252,73 @@ export default {
this.productService.getProductsSmall().then(data => this.products = data);
}
}
}`
}
<\\/script>
`
},
'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<h5>Input</h5>
<Inplace :closable="true">
<template #display>
{{text || 'Click to Edit'}}
</template>
<template #content>
<InputText v-model="text" autoFocus />
</template>
</Inplace>
<h5>Image</h5>
<Inplace>
<template #display>
<span class="pi pi-search" style="vertical-align: middle"></span>
<span style="margin-left:.5rem; vertical-align: middle">View Picture</span>
</template>
<template #content>
<img src="https://www.primefaces.org/wp-content/uploads/2020/12/primevue-min.png" width="200" />
</template>
</Inplace>
<h5>Lazy Data</h5>
<Inplace @open="loadData">
<template #display>
View Data
</template>
<template #content>
<DataTable :value="products" responsiveLayout="scroll" >
<Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column>
<Column field="quantity" header="Quantity"></Column>
</DataTable>
</template>
</Inplace>
</div>
</template>
<script>
import { ref } from 'vue';
import ProductService from './service/ProductService';
export default {
setup() {
const productService = ref(new ProductService());
const text = ref(null);
const products = ref(null);
const loadData = () => {
productService.value.getProductsSmall().then(data => products.value = data);
}
return { productService, text, products, loadData }
}
}
<\\/script>`
}
}
}
},
components: {
LiveEditor
}
}
</script>

6
src/views/liveeditor/LiveEditor.vue
View File

@ -198,6 +198,7 @@ import Avatar from 'primevue/avatar';
import AvatarGroup from 'primevue/avatargroup';
import Badge from 'primevue/badge';
import BadgeDirective from "primevue/badgedirective";
import BlockUI from 'primevue/blockui';
import Button from 'primevue/button';
import Breadcrumb from 'primevue/breadcrumb';
import Calendar from 'primevue/calendar';
@ -247,6 +248,7 @@ import PanelMenu from 'primevue/panelmenu';
import Password from 'primevue/password';
import PickList from 'primevue/picklist';
import ProgressBar from 'primevue/progressbar';
import ProgressSpinner from 'primevue/progressspinner';
import Rating from 'primevue/rating';
import RadioButton from 'primevue/radiobutton';
import Ripple from 'primevue/ripple';
@ -269,6 +271,7 @@ import Toolbar from 'primevue/toolbar';
import TabView from 'primevue/tabview';
import TabPanel from 'primevue/tabpanel';
import Tag from 'primevue/tag';
import Terminal from 'primevue/terminal';
import Timeline from 'primevue/timeline';
import ToggleButton from 'primevue/togglebutton';
import Tooltip from 'primevue/tooltip';
@ -299,6 +302,7 @@ app.component('AutoComplete', AutoComplete);
app.component('Avatar', Avatar);
app.component('AvatarGroup', AvatarGroup);
app.component('Badge', Badge);
app.component('BlockUI', BlockUI);
app.component('Breadcrumb', Breadcrumb);
app.component('Button', Button);
app.component('Calendar', Calendar);
@ -347,6 +351,7 @@ app.component('PanelMenu', PanelMenu);
app.component('Password', Password);
app.component('PickList', PickList);
app.component('ProgressBar', ProgressBar);
app.component('ProgressSpinner', ProgressSpinner);
app.component('RadioButton', RadioButton);
app.component('Rating', Rating);
app.component('SelectButton', SelectButton);
@ -364,6 +369,7 @@ app.component('TabView', TabView);
app.component('TabPanel', TabPanel);
app.component('Tag', Tag);
app.component('Textarea', Textarea);
app.component('Terminal', Terminal);
app.component('TieredMenu', TieredMenu);
app.component('Timeline', Timeline);
app.component('Toast', Toast);

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

@ -1,21 +1,19 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h5>Import</h5>
<AppDoc name="MessageDemo" :sources="sources">
<h5>Import</h5>
<pre v-code.script><code>
import Message from 'primevue/message';
</code></pre>
<h5>Getting Started</h5>
<p>Message component requires a content to display.</p>
<h5>Getting Started</h5>
<p>Message component requires a content to display.</p>
<pre v-code><code>
&lt;Message&gt;Welcome to PrimeVue&lt;/Message&gt;
</code></pre>
<p>Multiple messages can be displayed using the standard v-for directive.</p>
<p>Multiple messages can be displayed using the standard v-for directive.</p>
<pre v-code><code><template v-pre>
&lt;Message v-for="msg of messages" :severity="msg.severity" :key="msg.content"&gt;{{msg.content}}&lt;/Message&gt;
@ -35,38 +33,38 @@ data() {
</code></pre>
<h5>Severities</h5>
<p>There are four possible values for the severity of a message. Default one is "info".</p>
<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>
<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>
<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>
&lt;Message severity="success" :closable="false"&gt;Order Submitted&lt;/Message&gt;
</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>
<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>
&lt;Message severity="warn" :life="5000" :sticky="false"&gt;This message will hide in 5 seconds.&lt;/Message&gt;
</code></pre>
<h5>Inline Message Component</h5>
<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>
<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>
&lt;InputText placeholder="Username" class="p-invalid" /&gt;
&lt;InlineMessage&gt;Field is required&lt;/InlineMessage&gt;
@ -74,328 +72,236 @@ import InlineMessage from 'primevue/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>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>
<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>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>
<h5>Properties of ValidationMessage</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>
</tbody>
</table>
</div>
<h5>Properties of ValidationMessage</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>
</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>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>
<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-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-text</td>
<td>Content of a message.</td>
</tr>
</tbody>
</table>
</div>
<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-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-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>
<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>Dependencies</h5>
<p>None.</p>
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<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>
<LiveEditor name="MessageDemo" :sources="sources" :components="['InlineMessage', 'Button']" />
</div>
<pre v-code><code><template v-pre>
&lt;h5&gt;Severities&lt;/h5&gt;
&lt;Message severity="success"&gt;Success Message Content&lt;/Message&gt;
&lt;Message severity="info"&gt;Info Message Content&lt;/Message&gt;
&lt;Message severity="warn"&gt;Warning Message Content&lt;/Message&gt;
&lt;Message severity="error"&gt;Error Message Content&lt;/Message&gt;
&lt;h5&gt;Dynamic&lt;/h5&gt;
&lt;Button label="Show" @click="addMessages()" /&gt;
&lt;transition-group name="p-message" tag="div"&gt;
&lt;Message v-for="msg of messages" :severity="msg.severity" :key="msg.id"&gt;{{msg.content}}&lt;/Message&gt;
&lt;/transition-group&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;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;div class="p-formgroup-inline" style="margin-bottom:.5rem"&gt;
&lt;label for="username" class="p-sr-only"&gt;Username&lt;/label&gt;
&lt;InputText id="username" placeholder="Username" class="p-invalid" /&gt;
&lt;InlineMessage&gt;Username is required&lt;/InlineMessage&gt;
&lt;/div&gt;
&lt;div class="p-formgroup-inline"&gt;
&lt;label for="email" class="p-sr-only"&gt;email&lt;/label&gt;
&lt;InputText id="email" placeholder="Email" class="p-invalid" /&gt;
&lt;InlineMessage /&gt;
&lt;/div&gt;
</template>
</code></pre>
<pre v-code.script><code>
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++}
]
}
}
}
</code></pre>
<pre v-code.css><code>
button.p-button {
margin-right: .5rem;
}
.p-inputtext {
margin-right: .25rem;
}
</code></pre>
</TabPanel>
</TabView>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<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>
'options-api': {
tabName: 'Source',
content: `
<template>
<div class="card">
<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>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="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>
<Message severity="warn" :life="3000" :sticky="false">This message will hide in 3 seconds.</Message>
<h5>Validation Message</h5>
<div class="p-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="p-formgroup-inline">
<label for="email" class="p-sr-only">email</label>
<InputText id="email" placeholder="Email" class="p-invalid" />
<InlineMessage />
</div>
<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>
<Message severity="warn" :life="3000" :sticky="false">This message will hide in 3 seconds.</Message>
<h5>Validation Message</h5>
<div class="p-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="p-formgroup-inline">
<label for="email" class="p-sr-only">email</label>
<InputText id="email" placeholder="Email" class="p-invalid" />
<InlineMessage />
</div>
</div>
</template>
@ -417,8 +323,91 @@ export default {
]
}
}
}`,
style: `<style scoped>
}
<\\/script>
<style scoped>
button.p-button {
margin-right: .5rem;
}
.p-inputtext {
margin-right: .5rem;
}
</style>`
},
'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<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="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>
<Message severity="warn" :life="3000" :sticky="false">This message will hide in 3 seconds.</Message>
<h5>Validation Message</h5>
<div class="p-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="p-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;
}
@ -430,9 +419,6 @@ button.p-button {
}
}
}
},
components: {
LiveEditor
}
}
</script>

297
src/views/progressbar/ProgressBarDoc.vue
View File

@ -1,15 +1,13 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h5>Import</h5>
<AppDoc name="ProgressBarDemo" :sources="sources">
<h5>Import</h5>
<pre v-code.script><code>
import ProgressBar from 'primevue/progressbar';
</code></pre>
<h5>Getting Started</h5>
<p>ProgressBar has two modes; "determinate" (default) and "indeterminate". In determinate mode, a value between 0 and 100 is required to display the progress.</p>
<h5>Getting Started</h5>
<p>ProgressBar has two modes; "determinate" (default) and "indeterminate". In determinate mode, a value between 0 and 100 is required to display the progress.</p>
<pre v-code><code>
&lt;ProgressBar :value="value" /&gt;
@ -23,14 +21,14 @@ data() {
</code></pre>
<p>Indeterminate is simplly enabled using <i>mode</i> property.</p>
<p>Indeterminate is simplly enabled using <i>mode</i> property.</p>
<pre v-code><code>
&lt;ProgressBar mode="indeterminate"/&gt;
</code></pre>
<h5>Slot</h5>
<p>A custom label can be placed inside the progress bar via the default slot.</p>
<h5>Slot</h5>
<p>A custom label can be placed inside the progress bar via the default slot.</p>
<pre v-code><code><template v-pre>
&lt;ProgressBar :value="value"&gt;
Percent Complete: &#123;&#123;value&#125;&#125;%
@ -38,158 +36,99 @@ data() {
</template>
</code></pre>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<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>value</td>
<td>number</td>
<td>null</td>
<td>Current value of the progress.</td>
</tr>
<tr>
<td>mode</td>
<td>string</td>
<td>determinate</td>
<td>Defines the mode of the progress, valid values are "determinate" and "indeterminate".</td>
</tr>
<tr>
<td>showValue</td>
<td>boolean</td>
<td>true</td>
<td>Whether to display the progress bar value.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<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>value</td>
<td>number</td>
<td>null</td>
<td>Current value of the progress.</td>
</tr>
<tr>
<td>mode</td>
<td>string</td>
<td>determinate</td>
<td>Defines the mode of the progress, valid values are "determinate" and "indeterminate".</td>
</tr>
<tr>
<td>showValue</td>
<td>boolean</td>
<td>true</td>
<td>Whether to display the progress bar value.</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>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-progressbar</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-progressbar-determinate</td>
<td>Container element of a determinate progressbar.</td>
</tr>
<tr>
<td>p-progressbar-indeterminate</td>
<td>Container element of an indeterminate progressbar.</td>
</tr>
<tr>
<td>p-progressbar-value</td>
<td>Element whose width changes according to value.</td>
</tr>
<tr>
<td>p-progressbar-label</td>
<td>Label element that displays the current value.</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>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-progressbar</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-progressbar-determinate</td>
<td>Container element of a determinate progressbar.</td>
</tr>
<tr>
<td>p-progressbar-indeterminate</td>
<td>Container element of an indeterminate progressbar.</td>
</tr>
<tr>
<td>p-progressbar-value</td>
<td>Element whose width changes according to value.</td>
</tr>
<tr>
<td>p-progressbar-label</td>
<td>Label element that displays the current value.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/progressbar" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="ProgressBarDemo" :sources="sources" />
</div>
<pre v-code><code><template v-pre>
&lt;h3&gt;Dynamic&lt;/h3&gt;
&lt;ProgressBar :value="value1" /&gt;
&lt;h3&gt;Static&lt;/h3&gt;
&lt;ProgressBar :value="value2" :showValue="false" /&gt;
&lt;h3&gt;Indeterminate&lt;/h3&gt;
&lt;ProgressBar mode="indeterminate" style="height: .5em" /&gt;
</template>
</code></pre>
<pre v-code.script><code>
export default {
data() {
return {
value1: 0,
value2: 50
}
},
interval: null,
methods: {
startProgress() {
this.interval = setInterval(() => {
let newValue = this.value1 + Math.floor(Math.random() * 10) + 1;
if (newValue >= 100) {
newValue = 100;
}
this.value1 = newValue;
}, 2000);
},
endProgress() {
clearInterval(this.interval);
this.interval = null;
}
},
mounted() {
this.startProgress();
},
beforeUnmount() {
this.endProgress();
}
}
</code></pre>
</TabPanel>
</TabView>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<h5>Dynamic</h5>
<ProgressBar :value="value1" />
'options-api': {
tabName: 'Source',
content: `
<template>
<div class="card">
<h5>Dynamic</h5>
<ProgressBar :value="value1" />
<h5>Static</h5>
<ProgressBar :value="value2" :showValue="false" />
<h5>Static</h5>
<ProgressBar :value="value2" :showValue="false" />
<h5>Indeterminate</h5>
<ProgressBar mode="indeterminate" style="height: .5em" />
</div>
</div>
<h5>Indeterminate</h5>
<ProgressBar mode="indeterminate" style="height: .5em" />
</div>
</template>
@ -223,13 +162,63 @@ export default {
beforeUnmount() {
this.endProgress();
}
}`
}
<\\/script>
`
},
'composition-api': {
tabName: 'Composition API',
content: `<template>
<div class="card">
<h5>Dynamic</h5>
<ProgressBar :value="value1" />
<h5>Static</h5>
<ProgressBar :value="value2" :showValue="false" />
<h5>Indeterminate</h5>
<ProgressBar mode="indeterminate" style="height: .5em" />
</div>
</template>
<script>
import { ref, onMounted, onBeforeUnmount } from 'vue';
export default {
setup() {
onMounted(() => {
startProgress();
})
onBeforeUnmount(() => {
endProgress();
})
const value1 = ref(0);
const value2 = ref(50);
const interval = ref(null);
const startProgress = () => {
interval.value = setInterval(() => {
let newValue = value1.value + Math.floor(Math.random() * 10) + 1;
if (newValue >= 100) {
newValue = 100;
}
value1.value = newValue;
}, 2000);
};
const endProgress = () => {
clearInterval(interval.value);
interval.value = null;
};
return { value1, value2 }
}
}
<\\/script>`
}
}
}
},
components: {
LiveEditor
}
}
</script>

208
src/views/progressspinner/ProgressSpinnerDoc.vue
View File

@ -1,22 +1,20 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h5>Import</h5>
<AppDoc name="ProgressSpinnerDemo" :sources="sources">
<h5>Import</h5>
<pre v-code.script><code>
import ProgressSpinner from 'primevue/progressspinner';
</code></pre>
<h5>Getting Started</h5>
<p>ProgressSpinner is defined using ProgressSpinner element.</p>
<h5>Getting Started</h5>
<p>ProgressSpinner is defined using ProgressSpinner element.</p>
<pre v-code><code><template v-pre>
&lt;ProgressSpinner /&gt;
</template>
</code></pre>
<h5>Colors</h5>
<p>Colors of the spinner can be changed by overriding the keyframes animation.</p>
<h5>Colors</h5>
<p>Colors of the spinner can be changed by overriding the keyframes animation.</p>
<pre v-code.css><code>
@keyframes p-progress-spinner-color {
100%,
@ -37,122 +35,118 @@ import ProgressSpinner from 'primevue/progressspinner';
</code></pre>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<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>strokeWidth</td>
<td>string</td>
<td>2</td>
<td>Width of the circle stroke.</td>
</tr>
<tr>
<td>fill</td>
<td>string</td>
<td>null</td>
<td>Color for the background of the circle.</td>
</tr>
<tr>
<td>animationDuration</td>
<td>string</td>
<td>2s</td>
<td>Duration of the rotate animation.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<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>strokeWidth</td>
<td>string</td>
<td>2</td>
<td>Width of the circle stroke.</td>
</tr>
<tr>
<td>fill</td>
<td>string</td>
<td>null</td>
<td>Color for the background of the circle.</td>
</tr>
<tr>
<td>animationDuration</td>
<td>string</td>
<td>2s</td>
<td>Duration of the rotate animation.</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>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-progress-spinner</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-progress-circle</td>
<td>SVG element.</td>
</tr>
<tr>
<td>p-progress-path</td>
<td>Circle element.</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>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-progress-spinner</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-progress-circle</td>
<td>SVG element.</td>
</tr>
<tr>
<td>p-progress-path</td>
<td>Circle element.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/progressspinner" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="ProgressSpinnerDemo" :sources="sources" />
</div>
<pre v-code><code><template v-pre>
&lt;h3&gt;Basic&lt;/h3&gt;
&lt;ProgressSpinner /&gt;
&lt;h3&gt;Custom&lt;/h3&gt;
&lt;ProgressSpinner style="width:50px;height:50px" strokeWidth="8" fill="#EEEEEE" animationDuration=".5s"/&gt;
</template>
</code></pre>
</TabPanel>
</TabView>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<h5>Basic</h5>
<ProgressSpinner />
sources: {
'options-api': {
tabName: 'Source',
content: `
<template>
<div class="card">
<h5>Basic</h5>
<ProgressSpinner />
<h5>Custom</h5>
<ProgressSpinner style="width:50px;height:50px" strokeWidth="8" fill="#EEEEEE" animationDuration=".5s"/>
</div>
</div>
<h5>Custom</h5>
<ProgressSpinner style="width:50px;height:50px" strokeWidth="8" fill="#EEEEEE" animationDuration=".5s"/>
</div>
</template>
<script>
export default {
}`
}
<\\/script>
`
},
'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<h5>Basic</h5>
<ProgressSpinner />
<h5>Custom</h5>
<ProgressSpinner style="width:50px;height:50px" strokeWidth="8" fill="#EEEEEE" animationDuration=".5s"/>
</div>
</template>
<script>
export default {
}
<\\/script>`
}
}
}
},
components: {
LiveEditor
}
}
</script>

179
src/views/ripple/RippleDoc.vue
View File

@ -1,11 +1,9 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h5>Getting Started</h5>
<h5>Ripple</h5>
<p>Ripple is an optional animation for the supported components such as buttons. It is disabled by default and needs to be enabled at
your app's entry file (e.g. main.js) during the PrimeVue setup.</p>
<AppDoc name="RippleDemo" :sources="sources">
<h5>Getting Started</h5>
<h5>Ripple</h5>
<p>Ripple is an optional animation for the supported components such as buttons. It is disabled by default and needs to be enabled at
your app's entry file (e.g. main.js) during the PrimeVue setup.</p>
<pre v-code.script><code>
import {createApp} from 'vue';
import PrimeVue from 'primevue/config';
@ -15,10 +13,10 @@ app.use(PrimeVue, {ripple: true});
</code></pre>
<p><span class="p-text-bold">Note</span>: That would be it to enable ripple on PrimeVue components, next section describes how to use it with your own components and standard elements.</p>
<p><span class="p-text-bold">Note</span>: That would be it to enable ripple on PrimeVue components, next section describes how to use it with your own components and standard elements.</p>
<h5>Directive</h5>
<p>Ripple is a directive that needs to be imported and configured with a name of your choice. Global configuration is done with the <i>Vue.directive</i> function.</p>
<h5>Directive</h5>
<p>Ripple is a directive that needs to be imported and configured with a name of your choice. Global configuration is done with the <i>Vue.directive</i> function.</p>
<pre v-code.script><code>
import Ripple from 'primevue/ripple';
@ -26,7 +24,7 @@ Vue.directive('ripple', Ripple);
</code></pre>
<p>Ripple can also be configured locally using the directives property of your component.</p>
<p>Ripple can also be configured locally using the directives property of your component.</p>
<pre v-code.script><code>
directives: {
'ripple': Ripple
@ -34,14 +32,14 @@ directives: {
</code></pre>
<p>Once the ripple is configured, add <i>.p-ripple</i> class to the target and attach the directive with the v- prefix.</p>
<p>Once the ripple is configured, add <i>.p-ripple</i> class to the target and attach the directive with the v- prefix.</p>
<pre v-code><code><template v-pre>
&lt;div class="p-ripple" v-ripple&gt;&lt;/div&gt;
</template>
</code></pre>
<h5>Styling</h5>
<p>Default styling of the animation adds a shade of white. This can easily be customized using css that changes the color of <i>.p-ink</i> element.</p>
<h5>Styling</h5>
<p>Default styling of the animation adds a shade of white. This can easily be customized using css that changes the color of <i>.p-ink</i> element.</p>
<pre v-code><code><template v-pre>
&lt;div class="p-ripple purple" v-ripple&gt;&lt;/div&gt;
</template>
@ -55,59 +53,62 @@ directives: {
</code></pre>
<h5>Styling</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-ripple</td>
<td>Host element.</td>
</tr>
<tr>
<td>p-ink</td>
<td>Ripple element.</td>
</tr>
<tr>
<td>p-ink-active</td>
<td>Ripple element during animating.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-ripple</td>
<td>Host element.</td>
</tr>
<tr>
<td>p-ink</td>
<td>Ripple element.</td>
</tr>
<tr>
<td>p-ink-active</td>
<td>Ripple element during animating.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/ripple" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="RippleDemo" :sources="sources" />
</div>
<pre v-code><code><template v-pre>
&lt;div class="card-container p-d-flex"&gt;
&lt;div class="card primary-box p-ripple" v-ripple&gt;Default&lt;/div&gt;
&lt;div class="card styled-box-green p-ripple" v-ripple&gt;Green&lt;/div&gt;
&lt;div class="card styled-box-orange p-ripple" v-ripple&gt;Orange&lt;/div&gt;
&lt;div class="card styled-box-purple p-ripple" v-ripple&gt;Purple&lt;/div&gt;
&lt;/div&gt;
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
</code></pre>
<pre v-code.script><code>
export default {}
<script>
export default {
data() {
return {
sources: {
'options-api': {
tabName: 'Source',
content: `
<template>
<div>
<div class="card-container p-d-flex">
<div class="card primary-box p-ripple" v-ripple>Default</div>
<div class="card styled-box-green p-ripple" v-ripple>Green</div>
<div class="card styled-box-orange p-ripple" v-ripple>Orange</div>
<div class="card styled-box-purple p-ripple" v-ripple>Purple</div>
</div>
</div>
</template>
</code></pre>
<script>
export default {
}
<\\/script>
<pre v-code.css><code>
<style lang="scss" scoped>
::v-deep(.card-container) {
.card {
width: 75px;
@ -118,6 +119,11 @@ export default {}
margin-right: 1rem;
user-select: none;
padding: 0;
background: #ffffff;
padding: 2rem;
box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
border-radius: 4px;
margin-bottom: 2rem;
&.primary-box {
background-color: var(--primary-color);
@ -148,37 +154,28 @@ export default {}
}
}
}
</code></pre>
</TabPanel>
</TabView>
</div>
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card-container p-d-flex">
<div class="card primary-box p-ripple" v-ripple>Default</div>
<div class="card styled-box-green p-ripple" v-ripple>Green</div>
<div class="card styled-box-orange p-ripple" v-ripple>Orange</div>
<div class="card styled-box-purple p-ripple" v-ripple>Purple</div>
</div>
</style>`
},
'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div>
<div class="card-container p-d-flex">
<div class="card primary-box p-ripple" v-ripple>Default</div>
<div class="card styled-box-green p-ripple" v-ripple>Green</div>
<div class="card styled-box-orange p-ripple" v-ripple>Orange</div>
<div class="card styled-box-purple p-ripple" v-ripple>Purple</div>
</div>
</div>
</template>
<script>
export default {
}`,
style: `<style lang="scss" scoped>
}
<\\/script>
<style lang="scss" scoped>
::v-deep(.card-container) {
.card {
width: 75px;
@ -189,6 +186,11 @@ export default {
margin-right: 1rem;
user-select: none;
padding: 0;
background: #ffffff;
padding: 2rem;
box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
border-radius: 4px;
margin-bottom: 2rem;
&.primary-box {
background-color: var(--primary-color);
@ -223,9 +225,6 @@ export default {
}
}
}
},
components: {
LiveEditor
}
}
</script>

301
src/views/scrolltop/ScrollTopDoc.vue
View File

@ -1,30 +1,28 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h5>Import</h5>
<AppDoc name="ScrollTopDemo" :sources="sources">
<h5>Import</h5>
<pre v-code.script><code>
import ScrollTop from 'primevue/scrolltop';
</code></pre>
<h5>Getting Started</h5>
<p>Without any configuration, ScrollTop listens window scroll.</p>
<h5>Getting Started</h5>
<p>Without any configuration, ScrollTop listens window scroll.</p>
<pre v-code><code>
&lt;ScrollTop /&gt;
</code></pre>
<h5>Threshold</h5>
<p>When the vertical scroll position reaches a certain value, ScrollTop gets displayed. This value is
defined with the <i>threshold</i> property that defaults to 400.</p>
<h5>Threshold</h5>
<p>When the vertical scroll position reaches a certain value, ScrollTop gets displayed. This value is
defined with the <i>threshold</i> property that defaults to 400.</p>
<pre v-code><code>
&lt;ScrollTop :threshold="200" /&gt;
</code></pre>
<h5>Target Element</h5>
<p>ScrollTop can also be assigned to its parent element by setting <i>target</i> as "parent".</p>
<h5>Target Element</h5>
<p>ScrollTop can also be assigned to its parent element by setting <i>target</i> as "parent".</p>
<pre v-code><code>
&lt;div style="height: 400px; overflow: auto"&gt;
Content that overflows to container
@ -33,113 +31,122 @@ import ScrollTop from 'primevue/scrolltop';
</code></pre>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<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>target</td>
<td>string</td>
<td>window</td>
<td>Target of the ScrollTop, valid values are "window" and "parent".</td>
</tr>
<tr>
<td>threshold</td>
<td>number</td>
<td>400</td>
<td>Defines the threshold value of the vertical scroll position of the target to toggle the visibility.</td>
</tr>
<tr>
<td>icon</td>
<td>string</td>
<td>pi pi-chevron-up</td>
<td>Icon to display.</td>
</tr>
<tr>
<td>behavior</td>
<td>string</td>
<td>smooth</td>
<td>Defines the scrolling behavi, "smooth" adds an animation and "auto" scrolls with a jump.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<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>target</td>
<td>string</td>
<td>window</td>
<td>Target of the ScrollTop, valid values are "window" and "parent".</td>
</tr>
<tr>
<td>threshold</td>
<td>number</td>
<td>400</td>
<td>Defines the threshold value of the vertical scroll position of the target to toggle the visibility.</td>
</tr>
<tr>
<td>icon</td>
<td>string</td>
<td>pi pi-chevron-up</td>
<td>Icon to display.</td>
</tr>
<tr>
<td>behavior</td>
<td>string</td>
<td>smooth</td>
<td>Defines the scrolling behavi, "smooth" adds an animation and "auto" scrolls with a jump.</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>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-scrolltop</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-scrolltop-sticky</td>
<td>Container element when attached to its parent.</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>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-scrolltop</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-scrolltop-sticky</td>
<td>Container element when attached to its parent.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/scrolltop" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="ScrollTopDemo" :sources="sources" :components="['ScrollPanel']" />
</div>
<pre v-code><code><template v-pre>
&lt;h5&gt;Window&lt;/h5&gt;
&lt;p&gt;Scroll down the page to display the ScrollTo component.&lt;/p&gt;
&lt;ScrollTop /&gt;
&lt;h5&gt;Element&lt;/h5&gt;
&lt;ScrollPanel style="width: 250px; height: 200px"&gt;
&lt;p&gt;
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Vitae et leo duis ut diam.
Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut.
Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna.
Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris.
Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales.
Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus.
Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas.
Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.
Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.
Mattis aliquam faucibus purus in massa tempor nec.
&lt;/p&gt;
&lt;ScrollTop target="parent" :threshold="100" class="custom-scrolltop" icon="pi pi-arrow-up" /&gt;
&lt;/ScrollPanel&gt;
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
</code></pre>
<pre v-code.css><code>
<script>
export default {
data() {
return {
sources: {
'options-api': {
tabName: 'Source',
content: `
<template>
<div class="card">
<h5>Window</h5>
<p>Scroll down the page to display the ScrollTo component.</p>
<ScrollTop />
<h5>Element</h5>
<ScrollPanel style="width: 250px; height: 200px">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Vitae et leo duis ut diam.
Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut.
Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna.
Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris.
Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales.
Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus.
Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas.
Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.
Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.
Mattis aliquam faucibus purus in massa tempor nec.
</p>
<ScrollTop target="parent" :threshold="100" class="custom-scrolltop" icon="pi pi-arrow-up" />
</ScrollPanel>
</div>
</template>
<script>
export default {
}
<\\/script>
<style lang="scss" scoped>
::v-deep(.custom-scrolltop) {
width: 2rem;
height: 2rem;
border-radius: 4px;
background-color: var(--primary-color);
&:hover {
&:hover {
background-color: var(--primary-color);
}
@ -148,54 +155,43 @@ import ScrollTop from 'primevue/scrolltop';
color: var(--primary-color-text);
}
}
</style>`
},
'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<h5>Window</h5>
<p>Scroll down the page to display the ScrollTo component.</p>
<ScrollTop />
</code></pre>
</TabPanel>
</TabView>
</div>
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<h5>Window</h5>
<p>Scroll down the page to display the ScrollTo component.</p>
<ScrollTop />
<h5>Element</h5>
<ScrollPanel style="width: 250px; height: 200px">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Vitae et leo duis ut diam.
Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut.
Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna.
Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris.
Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales.
Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus.
Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas.
Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.
Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.
Mattis aliquam faucibus purus in massa tempor nec.
</p>
<ScrollTop target="parent" :threshold="100" class="custom-scrolltop" icon="pi pi-arrow-up" />
</ScrollPanel>
</div>
</div>
<h5>Element</h5>
<ScrollPanel style="width: 250px; height: 200px">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Vitae et leo duis ut diam.
Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut.
Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna.
Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris.
Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales.
Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus.
Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas.
Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.
Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.
Mattis aliquam faucibus purus in massa tempor nec.
</p>
<ScrollTop target="parent" :threshold="100" class="custom-scrolltop" icon="pi pi-arrow-up" />
</ScrollPanel>
</div>
</template>
<script>
export default {
} `,
style: `<style lang="scss" scoped>
}
<\\/script>
<style lang="scss" scoped>
::v-deep(.custom-scrolltop) {
width: 2rem;
height: 2rem;
@ -215,9 +211,6 @@ export default {
}
}
}
},
components: {
LiveEditor
}
}
</script>

750
src/views/skeleton/SkeletonDoc.vue
View File

@ -1,417 +1,270 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h5>Import</h5>
<AppDoc name="SkeletonDemo" :sources="sources">
<h5>Import</h5>
<pre v-code.script><code>
import Skeleton from 'primevue/skeleton';
</code></pre>
<h5>Getting Started</h5>
<p>Skeleton displays a rectangle in its simplest form.</p>
<h5>Getting Started</h5>
<p>Skeleton displays a rectangle in its simplest form.</p>
<pre v-code><code>
&lt;Skeleton /&gt;
</code></pre>
<h5>Circle</h5>
<p>The other option is the circle by setting <i>shape</i> property as "circle".</p>
<h5>Circle</h5>
<p>The other option is the circle by setting <i>shape</i> property as "circle".</p>
<pre v-code><code>
&lt;Skeleton shape="circle"/&gt;
</code></pre>
<h5>Size</h5>
<p>In order to customize the size, use <i>width</i> and <i>height</i> properties for rectangles and <i>size</i> for Circle and Square shapes.</p>
<h5>Size</h5>
<p>In order to customize the size, use <i>width</i> and <i>height</i> properties for rectangles and <i>size</i> for Circle and Square shapes.</p>
<pre v-code><code>
&lt;Skeleton width="100%" height="2rem" /&gt;
&lt;Skeleton shape="circle" size="50px" /&gt;
</code></pre>
<h5>Border Radius</h5>
<p>The default border radius of a rectangle is specified by the theme and can be overriden using the <i>borderRadius</i> property.</p>
<h5>Border Radius</h5>
<p>The default border radius of a rectangle is specified by the theme and can be overriden using the <i>borderRadius</i> property.</p>
<pre v-code><code>
&lt;Skeleton borderRadius="16px" /&gt;
</code></pre>
<h5>Animation</h5>
<p>Animation can be turned of by setting <i>animation</i> to "none".</p>
<h5>Animation</h5>
<p>Animation can be turned of by setting <i>animation</i> to "none".</p>
<pre v-code><code>
&lt;Skeleton animation="none" /&gt;
</code></pre>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<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>shape</td>
<td>string</td>
<td>rectangle</td>
<td>Shape of the element, options are "rectangle" and "circle".</td>
</tr>
<tr>
<td>size</td>
<td>string</td>
<td>null</td>
<td>Size of the Circle or Square.</td>
</tr>
<tr>
<td>width</td>
<td>string</td>
<td>100%</td>
<td>Width of the element.</td>
</tr>
<tr>
<td>height</td>
<td>string</td>
<td>1rem</td>
<td>Height of the element.</td>
</tr>
<tr>
<td>borderRadius</td>
<td>string</td>
<td>null</td>
<td>Border radius of the element, defaults to value from theme.</td>
</tr>
<tr>
<td>animation</td>
<td>string</td>
<td>wave</td>
<td>Type of the animation, valid options are "wave" and "none".</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<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>shape</td>
<td>string</td>
<td>rectangle</td>
<td>Shape of the element, options are "rectangle" and "circle".</td>
</tr>
<tr>
<td>size</td>
<td>string</td>
<td>null</td>
<td>Size of the Circle or Square.</td>
</tr>
<tr>
<td>width</td>
<td>string</td>
<td>100%</td>
<td>Width of the element.</td>
</tr>
<tr>
<td>height</td>
<td>string</td>
<td>1rem</td>
<td>Height of the element.</td>
</tr>
<tr>
<td>borderRadius</td>
<td>string</td>
<td>null</td>
<td>Border radius of the element, defaults to value from theme.</td>
</tr>
<tr>
<td>animation</td>
<td>string</td>
<td>wave</td>
<td>Type of the animation, valid options are "wave" and "none".</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>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-skeleton</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-skeleton-circle</td>
<td>Container element of a determinate progressbar.</td>
</tr>
<tr>
<td>p-skeleton-animation-none</td>
<td>Container element of an indeterminate progressbar.</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>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-skeleton</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-skeleton-circle</td>
<td>Container element of a determinate progressbar.</td>
</tr>
<tr>
<td>p-skeleton-animation-none</td>
<td>Container element of an indeterminate progressbar.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/skeleton" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="SkeletonDemo" :sources="sources" :components="['DataTable', 'Column']" />
</div>
<pre v-code><code><template v-pre>
&lt;div class="card"&gt;
&lt;div class="p-grid p-formgrid"&gt;
&lt;div class="p-field p-col-12 p-md-6"&gt;
&lt;h5&gt;Rectangle&lt;/h5&gt;
&lt;Skeleton class="p-mb-2"&gt;&lt;/Skeleton&gt;
&lt;Skeleton width="10rem" class="p-mb-2"&gt;&lt;/Skeleton&gt;
&lt;Skeleton width="5rem" class="p-mb-2"&gt;&lt;/Skeleton&gt;
&lt;Skeleton height="2rem" class="p-mb-2"&gt;&lt;/Skeleton&gt;
&lt;Skeleton width="10rem" height="4rem"&gt;&lt;/Skeleton&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-6"&gt;
&lt;h5&gt;Rounded&lt;/h5&gt;
&lt;Skeleton class="p-mb-2" borderRadius="16px"&gt;&lt;/Skeleton&gt;
&lt;Skeleton width="10rem" class="p-mb-2" borderRadius="16px"&gt;&lt;/Skeleton&gt;
&lt;Skeleton width="5rem" borderRadius="16px" class="p-mb-2"&gt;&lt;/Skeleton&gt;
&lt;Skeleton height="2rem" class="p-mb-2" borderRadius="16px"&gt;&lt;/Skeleton&gt;
&lt;Skeleton width="10rem" height="4rem" borderRadius="16px"&gt;&lt;/Skeleton&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-6"&gt;
&lt;h5 class="p-mt-3"&gt;Square&lt;/h5&gt;
&lt;div class="p-d-flex p-ai-end"&gt;
&lt;Skeleton size="2rem" class="p-mr-2"&gt;&lt;/Skeleton&gt;
&lt;Skeleton size="3rem" class="p-mr-2"&gt;&lt;/Skeleton&gt;
&lt;Skeleton size="4rem" class="p-mr-2"&gt;&lt;/Skeleton&gt;
&lt;Skeleton size="5rem"&gt;&lt;/Skeleton&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-6"&gt;
&lt;h5 class="p-mt-3"&gt;Circle&lt;/h5&gt;
&lt;div class="p-d-flex p-ai-end"&gt;
&lt;Skeleton shape="circle" size="2rem" class="p-mr-2"&gt;&lt;/Skeleton&gt;
&lt;Skeleton shape="circle" size="3rem" class="p-mr-2"&gt;&lt;/Skeleton&gt;
&lt;Skeleton shape="circle" size="4rem" class="p-mr-2"&gt;&lt;/Skeleton&gt;
&lt;Skeleton shape="circle" size="5rem"&gt;&lt;/Skeleton&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="card"&gt;
&lt;div class="p-grid p-formgrid"&gt;
&lt;div class="p-field p-col-12 p-md-6 p-pr-md-6 p-pr-0"&gt;
&lt;h5&gt;Card&lt;/h5&gt;
&lt;div class="custom-skeleton p-p-4"&gt;
&lt;div class="p-d-flex p-mb-3"&gt;
&lt;Skeleton shape="circle" size="4rem" class="p-mr-2"&gt;&lt;/Skeleton&gt;
&lt;div&gt;
&lt;Skeleton width="10rem" class="p-mb-2"&gt;&lt;/Skeleton&gt;
&lt;Skeleton width="5rem" class="p-mb-2"&gt;&lt;/Skeleton&gt;
&lt;Skeleton height=".5rem"&gt;&lt;/Skeleton&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;Skeleton width="100%" height="150px"&gt;&lt;/Skeleton&gt;
&lt;div class="p-d-flex p-jc-between p-mt-3"&gt;
&lt;Skeleton width="4rem" height="2rem"&gt;&lt;/Skeleton&gt;
&lt;Skeleton width="4rem" height="2rem"&gt;&lt;/Skeleton&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-6"&gt;
&lt;h5&gt;List&lt;/h5&gt;
&lt;div class="custom-skeleton p-p-4"&gt;
&lt;ul class="p-m-0 p-p-0"&gt;
&lt;li class="p-mb-3"&gt;
&lt;div class="p-d-flex"&gt;
&lt;Skeleton shape="circle" size="4rem" class="p-mr-2"&gt;&lt;/Skeleton&gt;
&lt;div style="flex: 1"&gt;
&lt;Skeleton width="100%" class="p-mb-2"&gt;&lt;/Skeleton&gt;
&lt;Skeleton width="75%"&gt;&lt;/Skeleton&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;li class="p-mb-3"&gt;
&lt;div class="p-d-flex"&gt;
&lt;Skeleton shape="circle" size="4rem" class="p-mr-2"&gt;&lt;/Skeleton&gt;
&lt;div style="flex: 1"&gt;
&lt;Skeleton width="100%" class="p-mb-2"&gt;&lt;/Skeleton&gt;
&lt;Skeleton width="75%"&gt;&lt;/Skeleton&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;li class="p-mb-3"&gt;
&lt;div class="p-d-flex"&gt;
&lt;Skeleton shape="circle" size="4rem" class="p-mr-2"&gt;&lt;/Skeleton&gt;
&lt;div style="flex: 1"&gt;
&lt;Skeleton width="100%" class="p-mb-2"&gt;&lt;/Skeleton&gt;
&lt;Skeleton width="75%"&gt;&lt;/Skeleton&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;div class="p-d-flex"&gt;
&lt;Skeleton shape="circle" size="4rem" class="p-mr-2"&gt;&lt;/Skeleton&gt;
&lt;div style="flex: 1"&gt;
&lt;Skeleton width="100%" class="p-mb-2"&gt;&lt;/Skeleton&gt;
&lt;Skeleton width="75%"&gt;&lt;/Skeleton&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h5&gt;DataTable&lt;/h5&gt;
&lt;DataTable :value="products"&gt;
&lt;Column field="code" header="Code"&gt;
&lt;template #body&gt;
&lt;Skeleton&gt;&lt;/Skeleton&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="name" header="Name"&gt;
&lt;template #body&gt;
&lt;Skeleton&gt;&lt;/Skeleton&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="category" header="Category"&gt;
&lt;template #body&gt;
&lt;Skeleton&gt;&lt;/Skeleton&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="quantity" header="Quantity"&gt;
&lt;template #body&gt;
&lt;Skeleton&gt;&lt;/Skeleton&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;/DataTable&gt;
&lt;/div&gt;
</template>
</code></pre>
</TabPanel>
</TabView>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<div class="p-grid p-formgrid">
<div class="p-field p-col-12 p-md-6">
<h5>Rectangle</h5>
<Skeleton class="p-mb-2"></Skeleton>
<Skeleton width="10rem" class="p-mb-2"></Skeleton>
<Skeleton width="5rem" class="p-mb-2"></Skeleton>
<Skeleton height="2rem" class="p-mb-2"></Skeleton>
<Skeleton width="10rem" height="4rem"></Skeleton>
'options-api': {
tabName: 'Source',
content: `
<template>
<div>
<div class="card">
<div class="p-grid p-formgrid">
<div class="p-field p-col-12 p-md-6">
<h5>Rectangle</h5>
<Skeleton class="p-mb-2"></Skeleton>
<Skeleton width="10rem" class="p-mb-2"></Skeleton>
<Skeleton width="5rem" class="p-mb-2"></Skeleton>
<Skeleton height="2rem" class="p-mb-2"></Skeleton>
<Skeleton width="10rem" height="4rem"></Skeleton>
</div>
<div class="p-field p-col-12 p-md-6">
<h5>Rounded</h5>
<Skeleton class="p-mb-2" borderRadius="16px"></Skeleton>
<Skeleton width="10rem" class="p-mb-2" borderRadius="16px"></Skeleton>
<Skeleton width="5rem" borderRadius="16px" class="p-mb-2"></Skeleton>
<Skeleton height="2rem" class="p-mb-2" borderRadius="16px"></Skeleton>
<Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
</div>
<div class="p-field p-col-12 p-md-6">
<h5 class="p-mt-3">Square</h5>
<div class="p-d-flex p-ai-end">
<Skeleton size="2rem" class="p-mr-2"></Skeleton>
<Skeleton size="3rem" class="p-mr-2"></Skeleton>
<Skeleton size="4rem" class="p-mr-2"></Skeleton>
<Skeleton size="5rem"></Skeleton>
</div>
<div class="p-field p-col-12 p-md-6">
<h5>Rounded</h5>
<Skeleton class="p-mb-2" borderRadius="16px"></Skeleton>
<Skeleton width="10rem" class="p-mb-2" borderRadius="16px"></Skeleton>
<Skeleton width="5rem" borderRadius="16px" class="p-mb-2"></Skeleton>
<Skeleton height="2rem" class="p-mb-2" borderRadius="16px"></Skeleton>
<Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
</div>
<div class="p-field p-col-12 p-md-6">
<h5 class="p-mt-3">Circle</h5>
<div class="p-d-flex p-ai-end">
<Skeleton shape="circle" size="2rem" class="p-mr-2"></Skeleton>
<Skeleton shape="circle" size="3rem" class="p-mr-2"></Skeleton>
<Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
<Skeleton shape="circle" size="5rem"></Skeleton>
</div>
<div class="p-field p-col-12 p-md-6">
<h5 class="p-mt-3">Square</h5>
<div class="p-d-flex p-ai-end">
<Skeleton size="2rem" class="p-mr-2"></Skeleton>
<Skeleton size="3rem" class="p-mr-2"></Skeleton>
<Skeleton size="4rem" class="p-mr-2"></Skeleton>
<Skeleton size="5rem"></Skeleton>
</div>
</div>
<div class="p-field p-col-12 p-md-6">
<h5 class="p-mt-3">Circle</h5>
<div class="p-d-flex p-ai-end">
<Skeleton shape="circle" size="2rem" class="p-mr-2"></Skeleton>
<Skeleton shape="circle" size="3rem" class="p-mr-2"></Skeleton>
</div>
</div>
</div>
<div class="card">
<div class="p-grid p-formgrid">
<div class="p-field p-col-12 p-md-6 p-pr-md-6 p-pr-0">
<h5>Card</h5>
<div class="custom-skeleton p-p-4">
<div class="p-d-flex p-mb-3">
<Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
<Skeleton shape="circle" size="5rem"></Skeleton>
<div>
<Skeleton width="10rem" class="p-mb-2"></Skeleton>
<Skeleton width="5rem" class="p-mb-2"></Skeleton>
<Skeleton height=".5rem"></Skeleton>
</div>
</div>
<Skeleton width="100%" height="150px"></Skeleton>
<div class="p-d-flex p-jc-between p-mt-3">
<Skeleton width="4rem" height="2rem"></Skeleton>
<Skeleton width="4rem" height="2rem"></Skeleton>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="p-grid p-formgrid">
<div class="p-field p-col-12 p-md-6 p-pr-md-6 p-pr-0">
<h5>Card</h5>
<div class="custom-skeleton p-p-4">
<div class="p-d-flex p-mb-3">
<Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
<div>
<Skeleton width="10rem" class="p-mb-2"></Skeleton>
<Skeleton width="5rem" class="p-mb-2"></Skeleton>
<Skeleton height=".5rem"></Skeleton>
<div class="p-field p-col-12 p-md-6">
<h5>List</h5>
<div class="custom-skeleton p-p-4">
<ul class="p-m-0 p-p-0">
<li class="p-mb-3">
<div class="p-d-flex">
<Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
<div style="flex: 1">
<Skeleton width="100%" class="p-mb-2"></Skeleton>
<Skeleton width="75%"></Skeleton>
</div>
</div>
</div>
<Skeleton width="100%" height="150px"></Skeleton>
<div class="p-d-flex p-jc-between p-mt-3">
<Skeleton width="4rem" height="2rem"></Skeleton>
<Skeleton width="4rem" height="2rem"></Skeleton>
</div>
</div>
</li>
<li class="p-mb-3">
<div class="p-d-flex">
<Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
<div style="flex: 1">
<Skeleton width="100%" class="p-mb-2"></Skeleton>
<Skeleton width="75%"></Skeleton>
</div>
</div>
</li>
<li class="p-mb-3">
<div class="p-d-flex">
<Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
<div style="flex: 1">
<Skeleton width="100%" class="p-mb-2"></Skeleton>
<Skeleton width="75%"></Skeleton>
</div>
</div>
</li>
<li>
<div class="p-d-flex">
<Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
<div style="flex: 1">
<Skeleton width="100%" class="p-mb-2"></Skeleton>
<Skeleton width="75%"></Skeleton>
</div>
</div>
</li>
</ul>
</div>
<div class="p-field p-col-12 p-md-6">
<h5>List</h5>
<div class="custom-skeleton p-p-4">
<ul class="p-m-0 p-p-0">
<li class="p-mb-3">
<div class="p-d-flex">
<Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
<div style="flex: 1">
<Skeleton width="100%" class="p-mb-2"></Skeleton>
<Skeleton width="75%"></Skeleton>
</div>
</div>
</li>
<li class="p-mb-3">
<div class="p-d-flex">
<Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
<div style="flex: 1">
<Skeleton width="100%" class="p-mb-2"></Skeleton>
<Skeleton width="75%"></Skeleton>
</div>
</div>
</li>
<li class="p-mb-3">
<div class="p-d-flex">
<Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
<div style="flex: 1">
<Skeleton width="100%" class="p-mb-2"></Skeleton>
<Skeleton width="75%"></Skeleton>
</div>
</div>
</li>
<li>
<div class="p-d-flex">
<Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
<div style="flex: 1">
<Skeleton width="100%" class="p-mb-2"></Skeleton>
<Skeleton width="75%"></Skeleton>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<h5>DataTable</h5>
<DataTable :value="products" responsiveLayout="scroll">
<Column field="code" header="Code">
<template #body>
<Skeleton></Skeleton>
</template>
</Column>
<Column field="name" header="Name">
<template #body>
<Skeleton></Skeleton>
</template>
</Column>
<Column field="category" header="Category">
<template #body>
<Skeleton></Skeleton>
</template>
</Column>
<Column field="quantity" header="Quantity">
<template #body>
<Skeleton></Skeleton>
</template>
</Column>
</DataTable>
</div>
</div>
<h5>DataTable</h5>
<DataTable :value="products" responsiveLayout="scroll">
<Column field="code" header="Code">
<template #body>
<Skeleton></Skeleton>
</template>
</Column>
<Column field="name" header="Name">
<template #body>
<Skeleton></Skeleton>
</template>
</Column>
<Column field="category" header="Category">
<template #body>
<Skeleton></Skeleton>
</template>
</Column>
<Column field="quantity" header="Quantity">
<template #body>
<Skeleton></Skeleton>
</template>
</Column>
</DataTable>
</div>
</div>
</template>
@ -423,8 +276,170 @@ export default {
products: new Array(5)
}
}
}`,
style: `<style lang="scss" scoped>
}
<\\/script>
<style lang="scss" scoped>
.custom-skeleton {
border: 1px solid var(--surface-d);
border-radius: 4px;
ul {
list-style: none;
}
}
</style>`
},
'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div>
<div class="card">
<div class="p-grid p-formgrid">
<div class="p-field p-col-12 p-md-6">
<h5>Rectangle</h5>
<Skeleton class="p-mb-2"></Skeleton>
<Skeleton width="10rem" class="p-mb-2"></Skeleton>
<Skeleton width="5rem" class="p-mb-2"></Skeleton>
<Skeleton height="2rem" class="p-mb-2"></Skeleton>
<Skeleton width="10rem" height="4rem"></Skeleton>
</div>
<div class="p-field p-col-12 p-md-6">
<h5>Rounded</h5>
<Skeleton class="p-mb-2" borderRadius="16px"></Skeleton>
<Skeleton width="10rem" class="p-mb-2" borderRadius="16px"></Skeleton>
<Skeleton width="5rem" borderRadius="16px" class="p-mb-2"></Skeleton>
<Skeleton height="2rem" class="p-mb-2" borderRadius="16px"></Skeleton>
<Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
</div>
<div class="p-field p-col-12 p-md-6">
<h5 class="p-mt-3">Square</h5>
<div class="p-d-flex p-ai-end">
<Skeleton size="2rem" class="p-mr-2"></Skeleton>
<Skeleton size="3rem" class="p-mr-2"></Skeleton>
<Skeleton size="4rem" class="p-mr-2"></Skeleton>
<Skeleton size="5rem"></Skeleton>
</div>
</div>
<div class="p-field p-col-12 p-md-6">
<h5 class="p-mt-3">Circle</h5>
<div class="p-d-flex p-ai-end">
<Skeleton shape="circle" size="2rem" class="p-mr-2"></Skeleton>
<Skeleton shape="circle" size="3rem" class="p-mr-2"></Skeleton>
<Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
<Skeleton shape="circle" size="5rem"></Skeleton>
</div>
</div>
</div>
</div>
<div class="card">
<div class="p-grid p-formgrid">
<div class="p-field p-col-12 p-md-6 p-pr-md-6 p-pr-0">
<h5>Card</h5>
<div class="custom-skeleton p-p-4">
<div class="p-d-flex p-mb-3">
<Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
<div>
<Skeleton width="10rem" class="p-mb-2"></Skeleton>
<Skeleton width="5rem" class="p-mb-2"></Skeleton>
<Skeleton height=".5rem"></Skeleton>
</div>
</div>
<Skeleton width="100%" height="150px"></Skeleton>
<div class="p-d-flex p-jc-between p-mt-3">
<Skeleton width="4rem" height="2rem"></Skeleton>
<Skeleton width="4rem" height="2rem"></Skeleton>
</div>
</div>
</div>
<div class="p-field p-col-12 p-md-6">
<h5>List</h5>
<div class="custom-skeleton p-p-4">
<ul class="p-m-0 p-p-0">
<li class="p-mb-3">
<div class="p-d-flex">
<Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
<div style="flex: 1">
<Skeleton width="100%" class="p-mb-2"></Skeleton>
<Skeleton width="75%"></Skeleton>
</div>
</div>
</li>
<li class="p-mb-3">
<div class="p-d-flex">
<Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
<div style="flex: 1">
<Skeleton width="100%" class="p-mb-2"></Skeleton>
<Skeleton width="75%"></Skeleton>
</div>
</div>
</li>
<li class="p-mb-3">
<div class="p-d-flex">
<Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
<div style="flex: 1">
<Skeleton width="100%" class="p-mb-2"></Skeleton>
<Skeleton width="75%"></Skeleton>
</div>
</div>
</li>
<li>
<div class="p-d-flex">
<Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
<div style="flex: 1">
<Skeleton width="100%" class="p-mb-2"></Skeleton>
<Skeleton width="75%"></Skeleton>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<h5>DataTable</h5>
<DataTable :value="products" responsiveLayout="scroll">
<Column field="code" header="Code">
<template #body>
<Skeleton></Skeleton>
</template>
</Column>
<Column field="name" header="Name">
<template #body>
<Skeleton></Skeleton>
</template>
</Column>
<Column field="category" header="Category">
<template #body>
<Skeleton></Skeleton>
</template>
</Column>
<Column field="quantity" header="Quantity">
<template #body>
<Skeleton></Skeleton>
</template>
</Column>
</DataTable>
</div>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const products = ref(new Array(5));
return { products }
}
}
<\\/script>
<style lang="scss" scoped>
.custom-skeleton {
border: 1px solid var(--surface-d);
border-radius: 4px;
@ -437,9 +452,6 @@ export default {
}
}
}
},
components: {
LiveEditor
}
}
</script>

2
src/views/steps/StepsDoc.vue
View File

@ -1,5 +1,5 @@
<template>
<AppDoc :sources="sources" :extPages="pages">
<AppDoc name="StepsDemo" :sources="sources" :extPages="pages">
<h5>Import</h5>
<pre v-code.script><code>
import Steps from 'primevue/steps';

304
src/views/tag/TagDoc.vue
View File

@ -1,39 +1,37 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h5>Import</h5>
<AppDoc name="TagDemo" :sources="sources">
<h5>Import</h5>
<pre v-code.script><code>
import Tag from 'primevue/tag';
</code></pre>
<h5>Getting Started</h5>
<p>Content of the tag is specified using the <i>value</i> property.</p>
<h5>Getting Started</h5>
<p>Content of the tag is specified using the <i>value</i> property.</p>
<pre v-code><code>
&lt;Tag value="New"&gt;&lt;/Tag&gt;
</code></pre>
<h5>Icon</h5>
<p>An icon can also be configured to be displayed next to the value with the <i>icon</i> property.</p>
<h5>Icon</h5>
<p>An icon can also be configured to be displayed next to the value with the <i>icon</i> property.</p>
<pre v-code><code>
&lt;Tag value="New" icon="pi pi-plus"&gt;&lt;/Tag&gt;
</code></pre>
<h5>Severities</h5>
<p>Different color options are available as severity levels.</p>
<h5>Severities</h5>
<p>Different color options are available as severity levels.</p>
<ul>
<li>success</li>
<li>info</li>
<li>warning</li>
<li>danger</li>
</ul>
<ul>
<li>success</li>
<li>info</li>
<li>warning</li>
<li>danger</li>
</ul>
<h5>Templating</h5>
<p>Content can easily be customized with the default slot instead of using the built-in display.</p>
<h5>Templating</h5>
<p>Content can easily be customized with the default slot instead of using the built-in display.</p>
<pre v-code><code>
&lt;Tag&gt;
Content
@ -41,162 +39,158 @@ import Tag from 'primevue/tag';
</code></pre>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<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>value</td>
<td>any</td>
<td>null</td>
<td>Value to display inside the tag.</td>
</tr>
<tr>
<td>severity</td>
<td>string</td>
<td>null</td>
<td>Severity type of the tag.</td>
</tr>
<tr>
<td>rounded</td>
<td>boolean</td>
<td>false</td>
<td>Whether the corners of the tag are rounded.</td>
</tr>
<tr>
<td>icon</td>
<td>string</td>
<td>null</td>
<td>Icon of the tag to display next to the value.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<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>value</td>
<td>any</td>
<td>null</td>
<td>Value to display inside the tag.</td>
</tr>
<tr>
<td>severity</td>
<td>string</td>
<td>null</td>
<td>Severity type of the tag.</td>
</tr>
<tr>
<td>rounded</td>
<td>boolean</td>
<td>false</td>
<td>Whether the corners of the tag are rounded.</td>
</tr>
<tr>
<td>icon</td>
<td>string</td>
<td>null</td>
<td>Icon of the tag to display next to the value.</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>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-tag</td>
<td>Tag element</td>
</tr>
<tr>
<td>p-tag-rounded</td>
<td>Rounded element</td>
</tr>
<tr>
<td>p-tag-icon</td>
<td>Icon of the tag</td>
</tr>
<tr>
<td>p-tag-value</td>
<td>Value of the tag</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>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-tag</td>
<td>Tag element</td>
</tr>
<tr>
<td>p-tag-rounded</td>
<td>Rounded element</td>
</tr>
<tr>
<td>p-tag-icon</td>
<td>Icon of the tag</td>
</tr>
<tr>
<td>p-tag-value</td>
<td>Value of the tag</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/tag" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="TagDemo" :sources="sources" />
</div>
<pre v-code><code><template v-pre>
&lt;h5&gt;Tags&lt;/h5&gt;
&lt;Tag class="p-mr-2" value="Primary"&gt;&lt;/Tag&gt;
&lt;Tag class="p-mr-2" severity="success" value="Success"&gt;&lt;/Tag&gt;
&lt;Tag class="p-mr-2" severity="info" value="Info"&gt;&lt;/Tag&gt;
&lt;Tag class="p-mr-2" severity="warning" value="Warning"&gt;&lt;/Tag&gt;
&lt;Tag severity="danger" value="Danger"&gt;&lt;/Tag&gt;
&lt;h5&gt;Pills&lt;/h5&gt;
&lt;Tag class="p-mr-2" value="Primary" rounded&gt;&lt;/Tag&gt;
&lt;Tag class="p-mr-2" severity="success" value="Success" rounded&gt;&lt;/Tag&gt;
&lt;Tag class="p-mr-2" severity="info" value="Info" rounded&gt;&lt;/Tag&gt;
&lt;Tag class="p-mr-2" severity="warning" value="Warning" rounded&gt;&lt;/Tag&gt;
&lt;Tag severity="danger" value="Danger" rounded&gt;&lt;/Tag&gt;
&lt;h5&gt;Icons&lt;/h5&gt;
&lt;Tag class="p-mr-2" icon="pi pi-user" value="Primary"&gt;&lt;/Tag&gt;
&lt;Tag class="p-mr-2" icon="pi pi-check" severity="success" value="Success"&gt;&lt;/Tag&gt;
&lt;Tag class="p-mr-2" icon="pi pi-info-circle" severity="info" value="Info"&gt;&lt;/Tag&gt;
&lt;Tag class="p-mr-2" icon="pi pi-exclamation-triangle" severity="warning" value="Warning"&gt;&lt;/Tag&gt;
&lt;Tag icon="pi pi-times" severity="danger" value="Danger"&gt;&lt;/Tag&gt;
</template>
</code></pre>
</TabPanel>
</TabView>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<h5>Tags</h5>
<Tag class="p-mr-2" value="Primary"></Tag>
<Tag class="p-mr-2" severity="success" value="Success"></Tag>
<Tag class="p-mr-2" severity="info" value="Info"></Tag>
<Tag class="p-mr-2" severity="warning" value="Warning"></Tag>
<Tag severity="danger" value="Danger"></Tag>
'options-api': {
tabName: 'Source',
content: `
<template>
<div class="card">
<h5>Tags</h5>
<Tag class="p-mr-2" value="Primary"></Tag>
<Tag class="p-mr-2" severity="success" value="Success"></Tag>
<Tag class="p-mr-2" severity="info" value="Info"></Tag>
<Tag class="p-mr-2" severity="warning" value="Warning"></Tag>
<Tag severity="danger" value="Danger"></Tag>
<h5>Pills</h5>
<Tag class="p-mr-2" value="Primary" rounded></Tag>
<Tag class="p-mr-2" severity="success" value="Success" rounded></Tag>
<Tag class="p-mr-2" severity="info" value="Info" rounded></Tag>
<Tag class="p-mr-2" severity="warning" value="Warning" rounded></Tag>
<Tag severity="danger" value="Danger" rounded></Tag>
<h5>Pills</h5>
<Tag class="p-mr-2" value="Primary" rounded></Tag>
<Tag class="p-mr-2" severity="success" value="Success" rounded></Tag>
<Tag class="p-mr-2" severity="info" value="Info" rounded></Tag>
<Tag class="p-mr-2" severity="warning" value="Warning" rounded></Tag>
<Tag severity="danger" value="Danger" rounded></Tag>
<h5>Icons</h5>
<Tag class="p-mr-2" icon="pi pi-user" value="Primary"></Tag>
<Tag class="p-mr-2" icon="pi pi-check" severity="success" value="Success"></Tag>
<Tag class="p-mr-2" icon="pi pi-info-circle" severity="info" value="Info"></Tag>
<Tag class="p-mr-2" icon="pi pi-exclamation-triangle" severity="warning" value="Warning"></Tag>
<Tag icon="pi pi-times" severity="danger" value="Danger"></Tag>
</div>
</div>
<h5>Icons</h5>
<Tag class="p-mr-2" icon="pi pi-user" value="Primary"></Tag>
<Tag class="p-mr-2" icon="pi pi-check" severity="success" value="Success"></Tag>
<Tag class="p-mr-2" icon="pi pi-info-circle" severity="info" value="Info"></Tag>
<Tag class="p-mr-2" icon="pi pi-exclamation-triangle" severity="warning" value="Warning"></Tag>
<Tag icon="pi pi-times" severity="danger" value="Danger"></Tag>
</div>
</template>
<script>
export default {
}`
}
<\\/script>
`
},
'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<h5>Tags</h5>
<Tag class="p-mr-2" value="Primary"></Tag>
<Tag class="p-mr-2" severity="success" value="Success"></Tag>
<Tag class="p-mr-2" severity="info" value="Info"></Tag>
<Tag class="p-mr-2" severity="warning" value="Warning"></Tag>
<Tag severity="danger" value="Danger"></Tag>
<h5>Pills</h5>
<Tag class="p-mr-2" value="Primary" rounded></Tag>
<Tag class="p-mr-2" severity="success" value="Success" rounded></Tag>
<Tag class="p-mr-2" severity="info" value="Info" rounded></Tag>
<Tag class="p-mr-2" severity="warning" value="Warning" rounded></Tag>
<Tag severity="danger" value="Danger" rounded></Tag>
<h5>Icons</h5>
<Tag class="p-mr-2" icon="pi pi-user" value="Primary"></Tag>
<Tag class="p-mr-2" icon="pi pi-check" severity="success" value="Success"></Tag>
<Tag class="p-mr-2" icon="pi pi-info-circle" severity="info" value="Info"></Tag>
<Tag class="p-mr-2" icon="pi pi-exclamation-triangle" severity="warning" value="Warning"></Tag>
<Tag icon="pi pi-times" severity="danger" value="Danger"></Tag>
</div>
</template>
<script>
export default {
}
<\\/script>
`
}
}
}
},
components: {
LiveEditor
}
}
</script>

328
src/views/terminal/TerminalDoc.vue
View File

@ -1,18 +1,16 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h5>Import</h5>
<AppDoc name="TerminalDemo" :sources="sources">
<h5>Import</h5>
<pre v-code.script><code>
import Terminal from 'primevue/terminal';
import TerminalService from 'primevue/terminalservice';
</code></pre>
<h5>Getting Started</h5>
<p>Commands are processed using an EventBus implementation called TerminalService.
Import this service into your component and subscribe to the <i>command</i> event to process the commands by
sending replies with the <i>response</i> event.</p>
<h5>Getting Started</h5>
<p>Commands are processed using an EventBus implementation called TerminalService.
Import this service into your component and subscribe to the <i>command</i> event to process the commands by
sending replies with the <i>response</i> event.</p>
<pre v-code><code>
&lt;Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" /&gt;
@ -58,175 +56,93 @@ export default {
</code></pre>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<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>welcomeMessage</td>
<td>string</td>
<td>null</td>
<td>Initial text to display on terminal.</td>
</tr>
<tr>
<td>prompt</td>
<td>string</td>
<td>null</td>
<td>Prompt text for each command.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<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>welcomeMessage</td>
<td>string</td>
<td>null</td>
<td>Initial text to display on terminal.</td>
</tr>
<tr>
<td>prompt</td>
<td>string</td>
<td>null</td>
<td>Prompt text for each command.</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>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-terminal</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-terminal-content</td>
<td>Content of terminal.</td>
</tr>
<tr>
<td>p-terminal-prompt</td>
<td>Prompt text.</td>
</tr>
<tr>
<td>p-terminal-response</td>
<td>Command response.</td>
</tr>
<tr>
<td>p-terminal-input</td>
<td>Input element to enter commands.</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>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-terminal</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-terminal-content</td>
<td>Content of terminal.</td>
</tr>
<tr>
<td>p-terminal-prompt</td>
<td>Prompt text.</td>
</tr>
<tr>
<td>p-terminal-response</td>
<td>Command response.</td>
</tr>
<tr>
<td>p-terminal-input</td>
<td>Input element to enter commands.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/terminal" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="TerminalDemo" :sources="sources" :terminalService="true" />
</div>
<pre v-code><code>
&lt;p&gt;Enter "date" to display the current date, "greet &#123;0&#125;" for a message and "random" to get a random number.&lt;/p&gt;
&lt;Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" class="dark-demo-terminal" /&gt;
</code></pre>
<pre v-code.script><code>
import TerminalService from 'primevue/terminalservice';
export default {
methods: {
commandHandler(text) {
let response;
let argsIndex = text.indexOf(' ');
let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;
switch(command) {
case "date":
response = 'Today is ' + new Date().toDateString();
break;
case "greet":
response = 'Hola ' + text.substring(argsIndex + 1);
break;
case "random":
response = Math.floor(Math.random() * 100);
break;
default:
response = "Unknown command: " + command;
}
TerminalService.emit('response', response);
}
},
mounted() {
TerminalService.on('command', this.commandHandler);
},
beforeUnmount() {
TerminalService.off('command', this.commandHandler);
}
}
</code></pre>
<pre v-code.css><code>
p {
margin-top: 0;
}
::v-deep(.dark-demo-terminal) {
background-color: #212121;
color: #ffffff;
.p-terminal-command {
color: #80CBC4;
}
.p-terminal-prompt {
color: #FFD54F;
}
.p-terminal-response {
color: #9FA8DA;
}
}
</code></pre>
</TabPanel>
</TabView>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<p>Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.</p>
<Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" class="dark-demo-terminal" />
</div>
</div>
'options-api': {
tabName: 'Source',
content: `
<template>
<div class="card">
<p>Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.</p>
<Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" class="dark-demo-terminal" />
</div>
</template>
<script>
import TerminalService from "primevue/terminalservice";
export default {
methods: {
commandHandler(text) {
@ -260,8 +176,87 @@ export default {
beforeUnmount() {
TerminalService.off('command', this.commandHandler);
}
}`,
style: `<style lang="scss" scoped>
}
<\\/script>
<style lang="scss" scoped>
p {
margin-top: 0;
}
::v-deep(.dark-demo-terminal) {
background-color: #212121;
color: #ffffff;
.p-terminal-command {
color: #80CBC4;
}
.p-terminal-prompt {
color: #FFD54F;
}
.p-terminal-response {
color: #9FA8DA;
}
}
</style>`
},
'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<p>Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.</p>
<Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" class="dark-demo-terminal" />
</div>
</template>
<script>
import { onMounted, onBeforeUnmount } from 'vue';
import TerminalService from "primevue/terminalservice";
export default {
setup() {
onMounted(() => {
TerminalService.on('command', commandHandler);
})
onBeforeUnmount(() => {
TerminalService.off('command', commandHandler);
})
const commandHandler = (text) => {
let response;
let argsIndex = text.indexOf(' ');
let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;
switch(command) {
case "date":
response = 'Today is ' + new Date().toDateString();
break;
case "greet":
response = 'Hola ' + text.substring(argsIndex + 1);
break;
case "random":
response = Math.floor(Math.random() * 100);
break;
default:
response = "Unknown command: " + command;
}
TerminalService.emit('response', response);
}
return { commandHandler }
}
}
<\\/script>
<style lang="scss" scoped>
p {
margin-top: 0;
}
@ -286,9 +281,6 @@ p {
}
}
}
},
components: {
LiveEditor
}
}
</script>

568
src/views/toast/ToastDoc.vue
View File

@ -1,10 +1,8 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h5>ToastService</h5>
<p>Toast messages are dynamically created using a <i>ToastService</i> that needs to be installed globally before the application
instance is created.</p>
<AppDoc name="ToastDemo" :sources="sources">
<h5>ToastService</h5>
<p>Toast messages are dynamically created using a <i>ToastService</i> that needs to be installed globally before the application
instance is created.</p>
<pre v-code.script><code>
import {createApp} from 'vue';
import ToastService from 'primevue/toastservice';
@ -14,18 +12,18 @@ app.use(ToastService);
</code></pre>
<h5>Import</h5>
<h5>Import</h5>
<pre v-code.script><code>
import Toast from 'primevue/toast';
</code></pre>
<h5>Getting Started</h5>
<p>Ideal location of a Toast is the main application template so that it can be used by any component within the application. A single message is represented by the Message interface in PrimeVue that defines various properties such as severity,
summary and detail.</p>
<h5>Getting Started</h5>
<p>Ideal location of a Toast is the main application template so that it can be used by any component within the application. A single message is represented by the Message interface in PrimeVue that defines various properties such as severity,
summary and detail.</p>
<h5>Options API</h5>
<p><i>$toast</i> is available as a property in the application instance.</p>
<h5>Options API</h5>
<p><i>$toast</i> is available as a property in the application instance.</p>
<pre v-code.script><code>
export default {
mounted() {
@ -35,8 +33,8 @@ export default {
</code></pre>
<h5>Composition API</h5>
<p>The toast instance can be injected with the <i>useToast</i> function.</p>
<h5>Composition API</h5>
<p>The toast instance can be injected with the <i>useToast</i> function.</p>
<pre v-code.script><code>
import { defineComponent } from "vue";
import { useToast } from "primevue/usetoast";
@ -50,103 +48,103 @@ export default defineComponent({
</code></pre>
<h5>Message API</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>null</td>
<td>Severity of the message.</td>
</tr>
<tr>
<td>summary</td>
<td>element</td>
<td>null</td>
<td>Summary content of the message.</td>
</tr>
<tr>
<td>detail</td>
<td>element</td>
<td>null</td>
<td>Detail content 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>life</td>
<td>number</td>
<td>null</td>
<td>Delay in milliseconds to close the message automatically.</td>
</tr>
<tr>
<td>group</td>
<td>string</td>
<td>null</td>
<td>Key of the Toast to display the message.</td>
</tr>
</tbody>
</table>
</div>
<h5>Message API</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>null</td>
<td>Severity of the message.</td>
</tr>
<tr>
<td>summary</td>
<td>element</td>
<td>null</td>
<td>Summary content of the message.</td>
</tr>
<tr>
<td>detail</td>
<td>element</td>
<td>null</td>
<td>Detail content 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>life</td>
<td>number</td>
<td>null</td>
<td>Delay in milliseconds to close the message automatically.</td>
</tr>
<tr>
<td>group</td>
<td>string</td>
<td>null</td>
<td>Key of the Toast to display the message.</td>
</tr>
</tbody>
</table>
</div>
<h5>MessageService API</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>add</td>
<td>message: Message instance</td>
<td>Displays the message in a suitable Toast component.</td>
</tr>
<tr>
<td>removeGroup</td>
<td>group: Name of the message group</td>
<td>Clears the messages that belongs to the group.</td>
</tr>
<tr>
<td>removeAllGroup</td>
<td>-</td>
<td>Clears all the messages.</td>
</tr>
</tbody>
</table>
</div>
<h5>MessageService API</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>add</td>
<td>message: Message instance</td>
<td>Displays the message in a suitable Toast component.</td>
</tr>
<tr>
<td>removeGroup</td>
<td>group: Name of the message group</td>
<td>Clears the messages that belongs to the group.</td>
</tr>
<tr>
<td>removeAllGroup</td>
<td>-</td>
<td>Clears all the messages.</td>
</tr>
</tbody>
</table>
</div>
<h5>Severities</h5>
<p>There are four possible values for the severity of a message. Info is the default.</p>
<h5>Severities</h5>
<p>There are four possible values for the severity of a message. Info is the default.</p>
<ul>
<li>success</li>
<li>info</li>
<li>warn</li>
<li>error</li>
</ul>
<ul>
<li>success</li>
<li>info</li>
<li>warn</li>
<li>error</li>
</ul>
<h5>Position</h5>
<p>There are four positions available for the toast container defined by the <i>position</i> property that defaults to "top-right". Other
valid values are "top-left", "top-center", "bottom-left", "botton-center", "bottom-right" and "center".
</p>
<h5>Position</h5>
<p>There are four positions available for the toast container defined by the <i>position</i> property that defaults to "top-right". Other
valid values are "top-left", "top-center", "bottom-left", "botton-center", "bottom-right" and "center".
</p>
<pre v-code><code>
&lt;Toast /&gt;
&lt;Toast position="top-left" /&gt;
@ -159,10 +157,10 @@ export default defineComponent({
</code></pre>
<h5>Groups</h5>
<p>A message can be targeted to a specific Toast component if their group properties match. Messages without a group
are forwarded to the default Toast component that does not have a group defined.
</p>
<h5>Groups</h5>
<p>A message can be targeted to a specific Toast component if their group properties match. Messages without a group
are forwarded to the default Toast component that does not have a group defined.
</p>
<pre v-code><code>
&lt;Toast /&gt;
@ -176,207 +174,130 @@ this.$toast.add({severity:'success', summary: 'Specific Message', group: 'mykey'
</code></pre>
<h5>Clearing Messages</h5>
<p><i>removeGroup(group)</i> clears the messages for a specific Toast whereas <i>removeAllGroups()</i> method clears all messages.</p>
<h5>Clearing Messages</h5>
<p><i>removeGroup(group)</i> clears the messages for a specific Toast whereas <i>removeAllGroups()</i> method clears all messages.</p>
<h5>Properties</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>group</td>
<td>string</td>
<td>null</td>
<td>Unique identifier of a message group.</td>
</tr>
<tr>
<td>position</td>
<td>string</td>
<td>top-right</td>
<td>Position of the toast in viewport.</td>
</tr>
<tr>
<td>autoZIndex</td>
<td>boolean</td>
<td>true</td>
<td>Whether to automatically manage layering.</td>
</tr>
<tr>
<td>baseZIndex</td>
<td>number</td>
<td>0</td>
<td>Base zIndex value to use in layering.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</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>group</td>
<td>string</td>
<td>null</td>
<td>Unique identifier of a message group.</td>
</tr>
<tr>
<td>position</td>
<td>string</td>
<td>top-right</td>
<td>Position of the toast in viewport.</td>
</tr>
<tr>
<td>autoZIndex</td>
<td>boolean</td>
<td>true</td>
<td>Whether to automatically manage layering.</td>
</tr>
<tr>
<td>baseZIndex</td>
<td>number</td>
<td>0</td>
<td>Base zIndex value to use in layering.</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>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-toast</td>
<td>Main container element.</td>
</tr>
<tr>
<td>p-toast-message</td>
<td>Container of a message item.</td>
</tr>
<tr>
<td>p-toast-icon-close</td>
<td>Close icon of a message.</td>
</tr>
<tr>
<td>p-toast-icon</td>
<td>Severity icon.</td>
</tr>
<tr>
<td>p-toast-message-content</td>
<td>Container of message texts.</td>
</tr>
<tr>
<td>p-toast-summary</td>
<td>Summary of the message.</td>
</tr>
<tr>
<td>p-toast-detail</td>
<td>Detail of the message.</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>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-toast</td>
<td>Main container element.</td>
</tr>
<tr>
<td>p-toast-message</td>
<td>Container of a message item.</td>
</tr>
<tr>
<td>p-toast-icon-close</td>
<td>Close icon of a message.</td>
</tr>
<tr>
<td>p-toast-icon</td>
<td>Severity icon.</td>
</tr>
<tr>
<td>p-toast-message-content</td>
<td>Container of message texts.</td>
</tr>
<tr>
<td>p-toast-summary</td>
<td>Summary of the message.</td>
</tr>
<tr>
<td>p-toast-detail</td>
<td>Detail of the message.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/toast" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="ToastDemo" :sources="sources" :toastService="true" :components="['Button']" />
</div>
<pre v-code><code><template v-pre>
&lt;h5&gt;Severities&lt;/h5&gt;
&lt;Button label="Success" class="p-button-success" @click="showSuccess" /&gt;
&lt;Button label="Info" class="p-button-info" @click="showInfo" /&gt;
&lt;Button label="Warn" class="p-button-warning" @click="showWarn" /&gt;
&lt;Button label="Error" class="p-button-danger" @click="showError" /&gt;
&lt;h5&gt;Positions&lt;/h5&gt;
&lt;Button label="Top Left" class="p-mr-2" @click="showTopLeft" /&gt;
&lt;Button label="Bottom Left" class="p-button-warning" @click="showBottomLeft" /&gt;
&lt;Button label="Bottom Right" class="p-button-success" @click="showBottomRight" /&gt;
&lt;h5&gt;Options&lt;/h5&gt;
&lt;Button @click="showMultiple" label="Multiple" class="p-button-warning" /&gt;
&lt;Button @click="showSticky" label="Sticky" /&gt;
&lt;h5&gt;Remove All&lt;/h5&gt;
&lt;Button @click="clear" label="Clear" /&gt;
</template>
</code></pre>
<pre v-code.script><code>
export default {
data() {
return {
messages: [],
}
},
methods: {
showSuccess() {
this.$toast.add({severity:'success', summary: 'Success Message', detail:'Message Content', life: 3000});
},
showInfo() {
this.$toast.add({severity:'info', summary: 'Info Message', detail:'Message Content', life: 3000});
},
showWarn() {
this.$toast.add({severity:'warn', summary: 'Warn Message', detail:'Message Content', life: 3000});
},
showError() {
this.$toast.add({severity:'error', summary: 'Error Message', detail:'Message Content', life: 3000});
},
showTopLeft() {
this.$toast.add({severity: 'info', summary: 'Info Message', detail: 'Message Content', group: 'tl', life: 3000});
},
showBottomLeft() {
this.$toast.add({severity:'warn', summary: 'Warn Message', detail:'Message Content', group: 'bl', life: 3000});
},
showBottomRight() {
this.$toast.add({severity:'success', summary: 'Success Message', detail:'Message Content', group: 'br', life: 3000});
},
showSticky() {
this.$toast.add({severity: 'info', summary: 'Sticky Message', detail: 'Message Content'});
},
showMultiple() {
this.$toast.add({severity:'info', summary:'Message 1', detail:'Message 1 Content', life: 3000});
this.$toast.add({severity:'info', summary:'Message 2', detail:'Message 2 Content', life: 3000});
this.$toast.add({severity:'info', summary:'Message 3', detail:'Message 3 Content', life: 3000});
},
clear() {
this.$toast.removeAllGroups();
}
}
}
</code></pre>
</TabPanel>
</TabView>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: ` <template>
<div class="layout-content">
'options-api': {
tabName: 'Source',
content: `
<template>
<div>
<Toast />
<Toast position="top-left" group="tl" />
<Toast position="bottom-left" group="bl" />
<Toast position="bottom-right" group="br" />
<div class="content-section implementation">
<div class="card">
<h5>Severities</h5>
<Button label="Success" class="p-button-success" @click="showSuccess" />
<Button label="Info" class="p-button-info" @click="showInfo" />
<Button label="Warn" class="p-button-warning" @click="showWarn" />
<Button label="Error" class="p-button-danger" @click="showError" />
<div class="card">
<h5>Severities</h5>
<Button label="Success" class="p-button-success" @click="showSuccess" />
<Button label="Info" class="p-button-info" @click="showInfo" />
<Button label="Warn" class="p-button-warning" @click="showWarn" />
<Button label="Error" class="p-button-danger" @click="showError" />
<h5>Positions</h5>
<Button label="Top Left" class="p-mr-2" @click="showTopLeft" />
<Button label="Bottom Left" class="p-button-warning" @click="showBottomLeft" />
<Button label="Bottom Right" class="p-button-success" @click="showBottomRight" />
<h5>Positions</h5>
<Button label="Top Left" class="p-mr-2" @click="showTopLeft" />
<Button label="Bottom Left" class="p-button-warning" @click="showBottomLeft" />
<Button label="Bottom Right" class="p-button-success" @click="showBottomRight" />
<h5>Options</h5>
<Button @click="showMultiple" label="Multiple" class="p-button-warning" />
<Button @click="showSticky" label="Sticky" />
<h5>Options</h5>
<Button @click="showMultiple" label="Multiple" class="p-button-warning" />
<Button @click="showSticky" label="Sticky" />
<h5>Remove All</h5>
<Button @click="clear" label="Clear" />
</div>
<h5>Remove All</h5>
<Button @click="clear" label="Clear" />
</div>
</div>
</template>
@ -422,8 +343,10 @@ export default {
this.$toast.removeAllGroups();
}
}
}`,
style: `<style lang="scss" scoped>
}
<\\/script>
<style lang="scss" scoped>
button {
min-width: 10rem;
margin-right: .5rem;
@ -437,34 +360,34 @@ button {
}
</style>`
},
'api': {
content: `<template>
<div class="layout-content">
'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div>
<Toast />
<Toast position="top-left" group="tl" />
<Toast position="bottom-left" group="bl" />
<Toast position="bottom-right" group="br" />
<div class="content-section implementation">
<div class="card">
<h5>Severities</h5>
<Button label="Success" class="p-button-success" @click="showSuccess" />
<Button label="Info" class="p-button-info" @click="showInfo" />
<Button label="Warn" class="p-button-warning" @click="showWarn" />
<Button label="Error" class="p-button-danger" @click="showError" />
<div class="card">
<h5>Severities</h5>
<Button label="Success" class="p-button-success" @click="showSuccess" />
<Button label="Info" class="p-button-info" @click="showInfo" />
<Button label="Warn" class="p-button-warning" @click="showWarn" />
<Button label="Error" class="p-button-danger" @click="showError" />
<h5>Positions</h5>
<Button label="Top Left" class="p-mr-2" @click="showTopLeft" />
<Button label="Bottom Left" class="p-button-warning" @click="showBottomLeft" />
<Button label="Bottom Right" class="p-button-success" @click="showBottomRight" />
<h5>Positions</h5>
<Button label="Top Left" class="p-mr-2" @click="showTopLeft" />
<Button label="Bottom Left" class="p-button-warning" @click="showBottomLeft" />
<Button label="Bottom Right" class="p-button-success" @click="showBottomRight" />
<h5>Options</h5>
<Button @click="showMultiple" label="Multiple" class="p-button-warning" />
<Button @click="showSticky" label="Sticky" />
<h5>Options</h5>
<Button @click="showMultiple" label="Multiple" class="p-button-warning" />
<Button @click="showSticky" label="Sticky" />
<h5>Remove All</h5>
<Button @click="clear" label="Clear" />
</div>
<h5>Remove All</h5>
<Button @click="clear" label="Clear" />
</div>
</div>
</template>
@ -509,10 +432,14 @@ export default defineComponent({
const clear = () => {
toast.removeAllGroups();
}
return { showSuccess, showInfo, showWarn, showError, showTopLeft, showBottomLeft, showBottomRight, showSticky, showMultiple, clear };
return { showSuccess, showInfo, showWarn, showError, showTopLeft, showBottomLeft,
showBottomRight, showSticky, showMultiple, clear };
}
});`,
style: `<style lang="scss" scoped>
});
<\\/script>
<style lang="scss" scoped>
button {
min-width: 10rem;
margin-right: .5rem;
@ -528,9 +455,6 @@ button {
}
}
}
},
components: {
LiveEditor
}
}
</script>