csb updated for components
Tuğçe Küçükoğlu
parent
5cbe0eb5a6
commit
e7dab1199c
|
|
@ -1,16 +1,14 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="content-section documentation">
|
<AppDoc name="AvatarDemo" :sources="sources">
|
||||||
<TabView>
|
<h5>Import</h5>
|
||||||
<TabPanel header="Documentation">
|
|
||||||
<h5>Import</h5>
|
|
||||||
<pre v-code.script><code>
|
<pre v-code.script><code>
|
||||||
import Avatar from 'primevue/avatar';
|
import Avatar from 'primevue/avatar';
|
||||||
import AvatarGroup from 'primevue/avatargroup';
|
import AvatarGroup from 'primevue/avatargroup';
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Getting Started</h5>
|
<h5>Getting Started</h5>
|
||||||
<p>Avatar has three built-in display modes; "label", "icon" and "image".</p>
|
<p>Avatar has three built-in display modes; "label", "icon" and "image".</p>
|
||||||
<pre v-code><code>
|
<pre v-code><code>
|
||||||
<Avatar label="P" />
|
<Avatar label="P" />
|
||||||
<Avatar icon="pi pi-search" />
|
<Avatar icon="pi pi-search" />
|
||||||
|
|
@ -18,15 +16,15 @@ import AvatarGroup from 'primevue/avatargroup';
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Sizes</h5>
|
<h5>Sizes</h5>
|
||||||
<p><i>size</i> property defines the size of the Avatar with "large" and "xlarge" as possible values.</p>
|
<p><i>size</i> property defines the size of the Avatar with "large" and "xlarge" as possible values.</p>
|
||||||
<pre v-code><code>
|
<pre v-code><code>
|
||||||
<Avatar label="P" size="large"/>
|
<Avatar label="P" size="large"/>
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>AvatarGroup</h5>
|
<h5>AvatarGroup</h5>
|
||||||
<p>A set of Avatars can be displayed together using the <i>AvatarGroup</i> component.</p>
|
<p>A set of Avatars can be displayed together using the <i>AvatarGroup</i> component.</p>
|
||||||
<pre v-code><code>
|
<pre v-code><code>
|
||||||
<AvatarGroup>
|
<AvatarGroup>
|
||||||
<Avatar label="P" />
|
<Avatar label="P" />
|
||||||
|
|
@ -36,22 +34,22 @@ import AvatarGroup from 'primevue/avatargroup';
|
||||||
</AvatarGroup>
|
</AvatarGroup>
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Shape</h5>
|
<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>
|
<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>
|
<pre v-code><code>
|
||||||
<Avatar label="P" shape="circle"/>
|
<Avatar label="P" shape="circle"/>
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Badge</h5>
|
<h5>Badge</h5>
|
||||||
<p>A badge can be added to an Avatar with the <router-link to="/badge">Badge</router-link> directive.</p>
|
<p>A badge can be added to an Avatar with the <router-link to="/badge">Badge</router-link> directive.</p>
|
||||||
<pre v-code><code>
|
<pre v-code><code>
|
||||||
<Avatar image="user.png" size="xlarge" v-badge.danger="4" />
|
<Avatar image="user.png" size="xlarge" v-badge.danger="4" />
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Templating</h5>
|
<h5>Templating</h5>
|
||||||
<p>Content can easily be customized with the default slot instead of using the built-in modes.</p>
|
<p>Content can easily be customized with the default slot instead of using the built-in modes.</p>
|
||||||
<pre v-code><code>
|
<pre v-code><code>
|
||||||
<Avatar>
|
<Avatar>
|
||||||
Content
|
Content
|
||||||
|
|
@ -59,316 +57,310 @@ import AvatarGroup from 'primevue/avatargroup';
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Properties of Avatar</h5>
|
<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>
|
<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">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
<th>Type</th>
|
<th>Type</th>
|
||||||
<th>Default</th>
|
<th>Default</th>
|
||||||
<th>Description</th>
|
<th>Description</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>label</td>
|
<td>label</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>null</td>
|
<td>null</td>
|
||||||
<td>Defines the text to display.</td>
|
<td>Defines the text to display.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>icon</td>
|
<td>icon</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>null</td>
|
<td>null</td>
|
||||||
<td>Defines the icon to display.</td>
|
<td>Defines the icon to display.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>image</td>
|
<td>image</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>null</td>
|
<td>null</td>
|
||||||
<td>Defines the image to display.</td>
|
<td>Defines the image to display.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>size</td>
|
<td>size</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>null</td>
|
<td>null</td>
|
||||||
<td>Size of the element, valid options are "large" and "xlarge".</td>
|
<td>Size of the element, valid options are "large" and "xlarge".</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>shape</td>
|
<td>shape</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>square</td>
|
<td>square</td>
|
||||||
<td>Shape of the element, valid options are "square" and "circle".</td>
|
<td>Shape of the element, valid options are "square" and "circle".</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Properties of AvatarGroup</h5>
|
<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>
|
<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>
|
<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>
|
<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">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
<th>Element</th>
|
<th>Element</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-avatar</td>
|
<td>p-avatar</td>
|
||||||
<td>Container element.</td>
|
<td>Container element.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-avatar-image</td>
|
<td>p-avatar-image</td>
|
||||||
<td>Container element in image mode.</td>
|
<td>Container element in image mode.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-avatar-circle</td>
|
<td>p-avatar-circle</td>
|
||||||
<td>Container element with a circle shape.</td>
|
<td>Container element with a circle shape.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-avatar-text</td>
|
<td>p-avatar-text</td>
|
||||||
<td>Text of the Avatar.</td>
|
<td>Text of the Avatar.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-avatar-icon</td>
|
<td>p-avatar-icon</td>
|
||||||
<td>Icon of the Avatar.</td>
|
<td>Icon of the Avatar.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-avatar-lg</td>
|
<td>p-avatar-lg</td>
|
||||||
<td>Container element with a large size.</td>
|
<td>Container element with a large size.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-avatar-xl</td>
|
<td>p-avatar-xl</td>
|
||||||
<td>Container element with an xlarge size.</td>
|
<td>Container element with an xlarge size.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Styling of AvatarGroup</h5>
|
<h5>Styling of AvatarGroup</h5>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
<th>Element</th>
|
<th>Element</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-avatar-group</td>
|
<td>p-avatar-group</td>
|
||||||
<td>Container element.</td>
|
<td>Container element.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Dependencies</h5>
|
<h5>Dependencies</h5>
|
||||||
<p>None.</p>
|
<p>None.</p>
|
||||||
</TabPanel>
|
</AppDoc>
|
||||||
|
|
||||||
<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>
|
|
||||||
<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="demo/images/avatar/amyelsner.png" class="p-mr-2" size="xlarge" shape="circle" />
|
|
||||||
<Avatar image="demo/images/avatar/asiyajavayant.png" class="p-mr-2" size="large" shape="circle" />
|
|
||||||
<Avatar image="demo/images/avatar/onyamalimba.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="demo/images/avatar/amyelsner.png" size="large" shape="circle"/>
|
|
||||||
<Avatar image="demo/images/avatar/asiyajavayant.png" size="large" shape="circle"/>
|
|
||||||
<Avatar image="demo/images/avatar/onyamalimba.png" size="large" shape="circle"/>
|
|
||||||
<Avatar image="demo/images/avatar/ionibowcher.png" size="large" shape="circle"/>
|
|
||||||
<Avatar image="demo/images/avatar/xuxuefeng.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="demo/images/organization/walter.jpg" size="xlarge" v-badge.danger="4" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</code></pre>
|
|
||||||
|
|
||||||
</TabPanel>
|
|
||||||
</TabView>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import LiveEditor from '../liveeditor/LiveEditor';
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
sources: {
|
sources: {
|
||||||
'template': {
|
'options-api': {
|
||||||
content: `<template>
|
tabName: 'Source',
|
||||||
<div class="layout-content">
|
content: `
|
||||||
<div class="content-section implementation">
|
<template>
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-12 p-md-4">
|
<div class="p-col-12 p-md-4">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<h5>Label</h5>
|
<h5>Label</h5>
|
||||||
<Avatar label="P" class="p-mr-2" size="xlarge" />
|
<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="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" />
|
<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>
|
||||||
|
</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-grid">
|
||||||
<div class="p-col-12 p-md-4">
|
<div class="p-col-12 p-md-4">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<h5>Icon</h5>
|
<h5>Icon</h5>
|
||||||
<Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" />
|
<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" size="large" style="background-color:#2196F3; color: #ffffff"/>
|
||||||
<Avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; 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>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="p-grid">
|
<div class="p-col-12 p-md-4">
|
||||||
<div class="p-col-12 p-md-4">
|
<div class="card">
|
||||||
<div class="card">
|
<h5>Icon - Circle</h5>
|
||||||
<h5>Image</h5>
|
<Avatar icon="pi pi-user" 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="xlarge" shape="circle" />
|
<Avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" />
|
||||||
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" size="large" shape="circle" />
|
<Avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" />
|
||||||
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" shape="circle" />
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="p-col-12 p-md-4">
|
<div class="p-col-12 p-md-4">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<h5>Avatar Group</h5>
|
<h5>Icon - Badge</h5>
|
||||||
<AvatarGroup class="p-mb-3">
|
<Avatar icon="pi pi-user" size="xlarge" v-badge="4"/>
|
||||||
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
|
</div>
|
||||||
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
|
</div>
|
||||||
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
|
</div>
|
||||||
<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="p-grid">
|
||||||
<div class="card">
|
<div class="p-col-12 p-md-4">
|
||||||
<h5>Image - Badge</h5>
|
<div class="card">
|
||||||
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="xlarge" v-badge.danger="4" />
|
<h5>Image</h5>
|
||||||
</div>
|
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" size="xlarge" shape="circle" />
|
||||||
</div>
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -376,13 +368,11 @@ export default {
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
}`
|
}
|
||||||
|
<\\/script>`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
|
||||||
components: {
|
|
||||||
LiveEditor
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,29 +1,27 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="content-section documentation">
|
<AppDoc name="BadgeDemo" :sources="sources">
|
||||||
<TabView>
|
<h5>Getting Started</h5>
|
||||||
<TabPanel header="Documentation">
|
<p>Badge can either be used as a standalone component or as a directive.</p>
|
||||||
<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>
|
<pre v-code.script><code>
|
||||||
import Badge from 'primevue/badge';
|
import Badge from 'primevue/badge';
|
||||||
|
|
||||||
</code></pre>
|
</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>
|
<pre v-code><code>
|
||||||
<Badge value="2"></Badge>
|
<Badge value="2"></Badge>
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h6>Directive</h6>
|
<h6>Directive</h6>
|
||||||
<pre v-code.script><code>
|
<pre v-code.script><code>
|
||||||
import BadgeDirective from 'primevue/badgedirective';
|
import BadgeDirective from 'primevue/badgedirective';
|
||||||
|
|
||||||
</code></pre>
|
</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>
|
<pre v-code.script><code>
|
||||||
import BadgeDirective from 'primevue/badgedirective';
|
import BadgeDirective from 'primevue/badgedirective';
|
||||||
|
|
||||||
|
|
@ -31,22 +29,22 @@ Vue.directive('badge', BadgeDirective);
|
||||||
|
|
||||||
</code></pre>
|
</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>
|
<pre v-code><code>
|
||||||
<i class="pi pi-bell" v-badge="2"></i>
|
<i class="pi pi-bell" v-badge="2"></i>
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Severities</h5>
|
<h5>Severities</h5>
|
||||||
<p>Different color options are available as severity levels. When used as a component use the <i>severity</i> property
|
<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>
|
to apply a severity and use a <i>modifier</i> as the severity value in directive mode.</p>
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li>success</li>
|
<li>success</li>
|
||||||
<li>info</li>
|
<li>info</li>
|
||||||
<li>warning</li>
|
<li>warning</li>
|
||||||
<li>danger</li>
|
<li>danger</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<pre v-code><code>
|
<pre v-code><code>
|
||||||
<Badge value="2" severity="success"></Badge>
|
<Badge value="2" severity="success"></Badge>
|
||||||
|
|
@ -55,8 +53,8 @@ Vue.directive('badge', BadgeDirective);
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Button Badges</h5>
|
<h5>Button Badges</h5>
|
||||||
<p>Buttons provide integrated badge support with the <i>badge</i> and <i>badgeClass</i> properties.</p>
|
<p>Buttons provide integrated badge support with the <i>badge</i> and <i>badgeClass</i> properties.</p>
|
||||||
|
|
||||||
<pre v-code><code>
|
<pre v-code><code>
|
||||||
<Button type="button" label="Emails" badge="8" />
|
<Button type="button" label="Emails" badge="8" />
|
||||||
|
|
@ -64,9 +62,9 @@ Vue.directive('badge', BadgeDirective);
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Sizes</h5>
|
<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
|
<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>
|
sizes only apply to component mode.</p>
|
||||||
<pre v-code><code>
|
<pre v-code><code>
|
||||||
<Badge value="2"></Badge>
|
<Badge value="2"></Badge>
|
||||||
<Badge value="4" size="large" severity="warning"></Badge>
|
<Badge value="4" size="large" severity="warning"></Badge>
|
||||||
|
|
@ -74,183 +72,178 @@ Vue.directive('badge', BadgeDirective);
|
||||||
|
|
||||||
</code></pre>
|
</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>
|
<pre v-code><code>
|
||||||
<h1>Heading 1 <Badge value="New"></Badge></h1>
|
<h1>Heading 1 <Badge value="New"></Badge></h1>
|
||||||
<h2>Heading 2 <Badge value="New"></Badge></h2>
|
<h2>Heading 2 <Badge value="New"></Badge></h2>
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Properties</h5>
|
<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>
|
<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">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
<th>Type</th>
|
<th>Type</th>
|
||||||
<th>Default</th>
|
<th>Default</th>
|
||||||
<th>Description</th>
|
<th>Description</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>value</td>
|
<td>value</td>
|
||||||
<td>any</td>
|
<td>any</td>
|
||||||
<td>null</td>
|
<td>null</td>
|
||||||
<td>Value to display inside the badge.</td>
|
<td>Value to display inside the badge.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>severity</td>
|
<td>severity</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>null</td>
|
<td>null</td>
|
||||||
<td>Severity type of the badge.</td>
|
<td>Severity type of the badge.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>size</td>
|
<td>size</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>null</td>
|
<td>null</td>
|
||||||
<td>Size of the badge, valid options are "large" and "xlarge".</td>
|
<td>Size of the badge, valid options are "large" and "xlarge".</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Styling</h5>
|
<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>
|
<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">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
<th>Element</th>
|
<th>Element</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-badge</td>
|
<td>p-badge</td>
|
||||||
<td>Badge element</td>
|
<td>Badge element</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-overlay-badge</td>
|
<td>p-overlay-badge</td>
|
||||||
<td>Wrapper of a badge and its target.</td>
|
<td>Wrapper of a badge and its target.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-badge-dot</td>
|
<td>p-badge-dot</td>
|
||||||
<td>Badge element with no value.</td>
|
<td>Badge element with no value.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-badge-success</td>
|
<td>p-badge-success</td>
|
||||||
<td>Badge element with success severity.</td>
|
<td>Badge element with success severity.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-badge-info</td>
|
<td>p-badge-info</td>
|
||||||
<td>Badge element with info severity.</td>
|
<td>Badge element with info severity.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-badge-warning</td>
|
<td>p-badge-warning</td>
|
||||||
<td>Badge element with warning severity.</td>
|
<td>Badge element with warning severity.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-badge-danger</td>
|
<td>p-badge-danger</td>
|
||||||
<td>Badge element with danger severity.</td>
|
<td>Badge element with danger severity.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-badge-lg</td>
|
<td>p-badge-lg</td>
|
||||||
<td>Large badge element</td>
|
<td>Large badge element</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-badge-xl</td>
|
<td>p-badge-xl</td>
|
||||||
<td>Extra large badge element</td>
|
<td>Extra large badge element</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Dependencies</h5>
|
<h5>Dependencies</h5>
|
||||||
<p>None.</p>
|
<p>None.</p>
|
||||||
</TabPanel>
|
</AppDoc>
|
||||||
|
|
||||||
<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>
|
|
||||||
<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>
|
|
||||||
</template>
|
|
||||||
</code></pre>
|
|
||||||
</TabPanel>
|
|
||||||
</TabView>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import LiveEditor from '../liveeditor/LiveEditor';
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
sources: {
|
sources: {
|
||||||
'template': {
|
'options-api': {
|
||||||
content: `<template>
|
tabName: 'Source',
|
||||||
<div class="layout-content">
|
content: `
|
||||||
<div class="content-section implementation">
|
<template>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<h5>Numbers</h5>
|
<h5>Numbers</h5>
|
||||||
<Badge value="2" class="p-mr-2"></Badge>
|
<Badge value="2" class="p-mr-2"></Badge>
|
||||||
<Badge value="8" severity="success" 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="4" severity="info" class="p-mr-2"></Badge>
|
||||||
<Badge value="12" severity="warning" class="p-mr-2"></Badge>
|
<Badge value="12" severity="warning" class="p-mr-2"></Badge>
|
||||||
<Badge value="3" severity="danger"></Badge>
|
<Badge value="3" severity="danger"></Badge>
|
||||||
|
|
||||||
<h5 class="p-mb-4">Positioned Badge</h5>
|
<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-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-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>
|
<i class="pi pi-envelope p-text-secondary" style="font-size: 2rem" v-badge.danger></i>
|
||||||
|
|
||||||
<h5>Button Badge</h5>
|
<h5>Button Badge</h5>
|
||||||
<Button type="button" label="Emails" badge="8" class="p-mr-2" />
|
<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" />
|
<Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
|
||||||
|
|
||||||
<h5>Sizes</h5>
|
<h5>Sizes</h5>
|
||||||
<Badge value="2" class="p-mr-2"></Badge>
|
<Badge value="2" class="p-mr-2"></Badge>
|
||||||
<Badge value="4" class="p-mr-2" size="large" severity="warning"></Badge>
|
<Badge value="4" class="p-mr-2" size="large" severity="warning"></Badge>
|
||||||
<Badge value="6" size="xlarge" severity="success"></Badge>
|
<Badge value="6" size="xlarge" severity="success"></Badge>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
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>
|
</script>
|
||||||
|
|
@ -1,17 +1,15 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="content-section documentation">
|
<AppDoc name="BlockUIDemo" :sources="sources">
|
||||||
<TabView>
|
<h5>Import</h5>
|
||||||
<TabPanel header="Documentation">
|
|
||||||
<h5>Import</h5>
|
|
||||||
<pre v-code.script><code>
|
<pre v-code.script><code>
|
||||||
import BlockUI from 'primevue/blockui';
|
import BlockUI from 'primevue/blockui';
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Getting Started</h5>
|
<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
|
<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.
|
with a mask when blockedPanel is enabled and gets unblock when the bound variable is set to false.
|
||||||
</p>
|
</p>
|
||||||
<pre v-code><code>
|
<pre v-code><code>
|
||||||
<BlockUI :blocked="blockedPanel">
|
<BlockUI :blocked="blockedPanel">
|
||||||
<Panel header="Header">
|
<Panel header="Header">
|
||||||
|
|
@ -40,196 +38,135 @@ export default {
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Full Screen</h5>
|
<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>
|
<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>
|
<pre v-code><code>
|
||||||
<BlockUI :blocked="blockedDocument" :fullScreen="true"></BlockUI>
|
<BlockUI :blocked="blockedDocument" :fullScreen="true"></BlockUI>
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Properties</h5>
|
<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>
|
<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">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
<th>Type</th>
|
<th>Type</th>
|
||||||
<th>Default</th>
|
<th>Default</th>
|
||||||
<th>Description</th>
|
<th>Description</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>blocked</td>
|
<td>blocked</td>
|
||||||
<td>array</td>
|
<td>array</td>
|
||||||
<td>null</td>
|
<td>null</td>
|
||||||
<td>Controls the blocked state.</td>
|
<td>Controls the blocked state.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>fullscreen</td>
|
<td>fullscreen</td>
|
||||||
<td>menuitem</td>
|
<td>menuitem</td>
|
||||||
<td>null</td>
|
<td>null</td>
|
||||||
<td>When enabled, the whole document gets blocked.</td>
|
<td>When enabled, the whole document gets blocked.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>baseZIndex</td>
|
<td>baseZIndex</td>
|
||||||
<td>number</td>
|
<td>number</td>
|
||||||
<td>0</td>
|
<td>0</td>
|
||||||
<td>Base zIndex value to use in layering.</td>
|
<td>Base zIndex value to use in layering.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>autoZIndex</td>
|
<td>autoZIndex</td>
|
||||||
<td>boolean</td>
|
<td>boolean</td>
|
||||||
<td>true</td>
|
<td>true</td>
|
||||||
<td>Whether to automatically manage layering.</td>
|
<td>Whether to automatically manage layering.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Events</h5>
|
<h5>Events</h5>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
<th>Parameters</th>
|
<th>Parameters</th>
|
||||||
<th>Description</th>
|
<th>Description</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>block</td>
|
<td>block</td>
|
||||||
<td>-</td>
|
<td>-</td>
|
||||||
<td>Fired when the element gets blocked.</td>
|
<td>Fired when the element gets blocked.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>unblock</td>
|
<td>unblock</td>
|
||||||
<td>-</td>
|
<td>-</td>
|
||||||
<td>Fired when the element gets unblocked.</td>
|
<td>Fired when the element gets unblocked.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Styling</h5>
|
<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>
|
<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">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
<th>Element</th>
|
<th>Element</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-blockui</td>
|
<td>p-blockui</td>
|
||||||
<td>Mask element.</td>
|
<td>Mask element.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-blockui-document</td>
|
<td>p-blockui-document</td>
|
||||||
<td>Mask element in full screen mode.</td>
|
<td>Mask element in full screen mode.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Dependencies</h5>
|
<h5>Dependencies</h5>
|
||||||
<p>None.</p>
|
<p>None.</p>
|
||||||
</TabPanel>
|
</AppDoc>
|
||||||
|
|
||||||
<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>
|
|
||||||
<h3>Document</h3>
|
|
||||||
<BlockUI :blocked="blockedDocument" :fullScreen="true"></BlockUI>
|
|
||||||
|
|
||||||
<Button type="button" label="Block" @click="blockDocument()"></Button>
|
|
||||||
|
|
||||||
<h3>Panel</h3>
|
|
||||||
<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>
|
|
||||||
|
|
||||||
</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>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import LiveEditor from '../liveeditor/LiveEditor';
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
sources: {
|
sources: {
|
||||||
'template': {
|
'options-api': {
|
||||||
content: `<template>
|
tabName: 'Source',
|
||||||
<div class="layout-content">
|
content: `
|
||||||
<div class="content-section implementation">
|
<template>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<h5>Document</h5>
|
<h5>Document</h5>
|
||||||
<BlockUI :blocked="blockedDocument" :fullScreen="true"></BlockUI>
|
<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>
|
<h5>Panel</h5>
|
||||||
<Button type="button" label="Block" @click="blockPanel()"></Button>
|
<Button type="button" label="Block" @click="blockPanel()"></Button>
|
||||||
<Button type="button" label="Unblock" @click="unblockPanel()"></Button>
|
<Button type="button" label="Unblock" @click="unblockPanel()"></Button>
|
||||||
|
|
||||||
<BlockUI :blocked="blockedPanel">
|
<BlockUI :blocked="blockedPanel">
|
||||||
<Panel header="Godfather I" style="margin-top: 20px">
|
<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.
|
<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.
|
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,
|
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>
|
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
|
||||||
</Panel>
|
</Panel>
|
||||||
</BlockUI>
|
</BlockUI>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -256,8 +193,72 @@ export default {
|
||||||
this.blockedPanel = false;
|
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 {
|
.p-panel p {
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
@ -270,9 +271,6 @@ button {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
components: {
|
|
||||||
LiveEditor
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -1,15 +1,13 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="content-section documentation">
|
<AppDoc name="CarouselDemo" :sources="sources" service="ProductService" data="products-small">
|
||||||
<TabView>
|
<h5>Import</h5>
|
||||||
<TabPanel header="Documentation">
|
|
||||||
<h5>Import</h5>
|
|
||||||
<pre v-code.script><code>
|
<pre v-code.script><code>
|
||||||
import Carousel from 'primevue/carousel';
|
import Carousel from 'primevue/carousel';
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Getting Started</h5>
|
<h5>Getting Started</h5>
|
||||||
<p>Carousel requires a collection of items as its value along with a template to render each item.</p>
|
<p>Carousel requires a collection of items as its value along with a template to render each item.</p>
|
||||||
<pre v-code><code>
|
<pre v-code><code>
|
||||||
<Carousel :value="cars">
|
<Carousel :value="cars">
|
||||||
<template #item="slotProps">
|
<template #item="slotProps">
|
||||||
|
|
@ -18,8 +16,8 @@ import Carousel from 'primevue/carousel';
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Items per page and Scroll Items</h5>
|
<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>
|
<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>
|
<pre v-code><code>
|
||||||
<Carousel :value="cars" :numVisible="3" :numScroll="1">
|
<Carousel :value="cars" :numVisible="3" :numScroll="1">
|
||||||
<template #item="slotProps">
|
<template #item="slotProps">
|
||||||
|
|
@ -28,9 +26,9 @@ import Carousel from 'primevue/carousel';
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Responsive</h5>
|
<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
|
<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>
|
objects whose breakpoint defines the max-width to apply the settings.</p>
|
||||||
<pre v-code><code><template v-pre>
|
<pre v-code><code><template v-pre>
|
||||||
<Carousel :value="cars" :numVisible="4" :numScroll="3" :responsiveOptions="responsiveOptions">
|
<Carousel :value="cars" :numVisible="4" :numScroll="3" :responsiveOptions="responsiveOptions">
|
||||||
<template #header>
|
<template #header>
|
||||||
|
|
@ -83,8 +81,8 @@ data() {
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Header and Footer</h5>
|
<h5>Header and Footer</h5>
|
||||||
<p>Custom content projection is available using the <i>header</i> and <i>footer</i> templates.</p>
|
<p>Custom content projection is available using the <i>header</i> and <i>footer</i> templates.</p>
|
||||||
|
|
||||||
<pre v-code><code>
|
<pre v-code><code>
|
||||||
<Carousel :value="cars" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
|
<Carousel :value="cars" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
|
||||||
|
|
@ -101,8 +99,8 @@ data() {
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Orientation</h5>
|
<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>
|
<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>
|
<pre v-code><code>
|
||||||
<Carousel :value="cars" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" :responsiveOptions="responsiveOptions">
|
<Carousel :value="cars" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" :responsiveOptions="responsiveOptions">
|
||||||
<template #item="slotProps">
|
<template #item="slotProps">
|
||||||
|
|
@ -112,8 +110,8 @@ data() {
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>AutoPlay and Circular</h5>
|
<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>
|
<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>
|
<pre v-code><code>
|
||||||
<Carousel :value="cars" :numVisible="3" :numScroll="1" :circular="true" :autoplayInterval="3000">
|
<Carousel :value="cars" :numVisible="3" :numScroll="1" :circular="true" :autoplayInterval="3000">
|
||||||
<template #header>
|
<template #header>
|
||||||
|
|
@ -126,265 +124,269 @@ data() {
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Properties</h5>
|
<h5>Properties</h5>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
<th>Type</th>
|
<th>Type</th>
|
||||||
<th>Default</th>
|
<th>Default</th>
|
||||||
<th>Description</th>
|
<th>Description</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>value</td>
|
<td>value</td>
|
||||||
<td>array</td>
|
<td>array</td>
|
||||||
<td>null</td>
|
<td>null</td>
|
||||||
<td>An array of objects to display.</td>
|
<td>An array of objects to display.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>page</td>
|
<td>page</td>
|
||||||
<td>number</td>
|
<td>number</td>
|
||||||
<td>null</td>
|
<td>null</td>
|
||||||
<td>Index of the first item.</td>
|
<td>Index of the first item.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>circular</td>
|
<td>circular</td>
|
||||||
<td>boolean</td>
|
<td>boolean</td>
|
||||||
<td>false</td>
|
<td>false</td>
|
||||||
<td>Defines if scrolling would be infinite.</td>
|
<td>Defines if scrolling would be infinite.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>autoplayInterval</td>
|
<td>autoplayInterval</td>
|
||||||
<td>number</td>
|
<td>number</td>
|
||||||
<td>null</td>
|
<td>null</td>
|
||||||
<td>Time in milliseconds to scroll items automatically.</td>
|
<td>Time in milliseconds to scroll items automatically.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>numVisible</td>
|
<td>numVisible</td>
|
||||||
<td>number</td>
|
<td>number</td>
|
||||||
<td>1</td>
|
<td>1</td>
|
||||||
<td>Number of items per page.</td>
|
<td>Number of items per page.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>numScroll</td>
|
<td>numScroll</td>
|
||||||
<td>number</td>
|
<td>number</td>
|
||||||
<td>1</td>
|
<td>1</td>
|
||||||
<td>Number of items to scroll.</td>
|
<td>Number of items to scroll.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>responsiveOptions</td>
|
<td>responsiveOptions</td>
|
||||||
<td>any</td>
|
<td>any</td>
|
||||||
<td>null</td>
|
<td>null</td>
|
||||||
<td>An array of options for responsive design.</td>
|
<td>An array of options for responsive design.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>orientation</td>
|
<td>orientation</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>horizontal</td>
|
<td>horizontal</td>
|
||||||
<td>Specifies the layout of the component, valid values are "horizontal" and "vertical".</td>
|
<td>Specifies the layout of the component, valid values are "horizontal" and "vertical".</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>verticalViewPortHeight</td>
|
<td>verticalViewPortHeight</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>300px</td>
|
<td>300px</td>
|
||||||
<td>Height of the viewport in vertical layout.</td>
|
<td>Height of the viewport in vertical layout.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>contentClass</td>
|
<td>contentClass</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>null</td>
|
<td>null</td>
|
||||||
<td>Style class of main content.</td>
|
<td>Style class of main content.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>containerClass</td>
|
<td>containerClass</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>null</td>
|
<td>null</td>
|
||||||
<td>Style class of the viewport container.</td>
|
<td>Style class of the viewport container.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>indicatorsContentClass</td>
|
<td>indicatorsContentClass</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>null</td>
|
<td>null</td>
|
||||||
<td>Style class of the indicator items.</td>
|
<td>Style class of the indicator items.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Slots</h5>
|
<h5>Slots</h5>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
<th>Parameters</th>
|
<th>Parameters</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>header</td>
|
<td>header</td>
|
||||||
<td>-</td>
|
<td>-</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>item</td>
|
<td>item</td>
|
||||||
<td>data: Data of the component<br />
|
<td>data: Data of the component<br />
|
||||||
index: Index of the item</td>
|
index: Index of the item</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>footer</td>
|
<td>footer</td>
|
||||||
<td>-</td>
|
<td>-</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Styling</h5>
|
<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>
|
<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">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
<th>Element</th>
|
<th>Element</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-carousel</td>
|
<td>p-carousel</td>
|
||||||
<td>Container element.</td>
|
<td>Container element.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-carousel-header</td>
|
<td>p-carousel-header</td>
|
||||||
<td>Header section.</td>
|
<td>Header section.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-carousel-footer</td>
|
<td>p-carousel-footer</td>
|
||||||
<td>Footer section.</td>
|
<td>Footer section.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-carousel-content</td>
|
<td>p-carousel-content</td>
|
||||||
<td>Main content element. It contains the container of the viewport.</td>
|
<td>Main content element. It contains the container of the viewport.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-carousel-container</td>
|
<td>p-carousel-container</td>
|
||||||
<td>Container of the viewport. It contains navigation buttons and viewport.</td>
|
<td>Container of the viewport. It contains navigation buttons and viewport.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-carousel-items-content</td>
|
<td>p-carousel-items-content</td>
|
||||||
<td>Viewport.</td>
|
<td>Viewport.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-carousel-indicators</td>
|
<td>p-carousel-indicators</td>
|
||||||
<td>Container of the indicators.</td>
|
<td>Container of the indicators.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-carousel-indicator</td>
|
<td>p-carousel-indicator</td>
|
||||||
<td>Indicator element.</td>
|
<td>Indicator element.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Dependencies</h5>
|
<h5>Dependencies</h5>
|
||||||
<p>None.</p>
|
<p>None.</p>
|
||||||
</TabPanel>
|
</AppDoc>
|
||||||
|
|
||||||
<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>
|
|
||||||
<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="'demo/images/product/' + slotProps.data.image" :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="'demo/images/product/' + slotProps.data.image" :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="'demo/images/product/' + slotProps.data.image" :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>
|
|
||||||
</template>
|
</template>
|
||||||
</code></pre>
|
|
||||||
|
|
||||||
<pre v-code.script><code>
|
<script>
|
||||||
import ProductService from '../../service/ProductService';
|
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 {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
|
|
@ -417,10 +419,9 @@ export default {
|
||||||
this.productService.getProductsSmall().then(data => this.products = data.slice(0,9));
|
this.productService.getProductsSmall().then(data => this.products = data.slice(0,9));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
<\\/script>
|
||||||
|
|
||||||
</code></pre>
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
<pre v-code.css><code>
|
|
||||||
.product-item {
|
.product-item {
|
||||||
.product-item-content {
|
.product-item-content {
|
||||||
border: 1px solid var(--surface-d);
|
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)
|
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>
|
<div class="card">
|
||||||
</TabPanel>
|
<Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" class="custom-carousel" :circular="true" :autoplayInterval="3000">
|
||||||
</TabView>
|
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import LiveEditor from '../liveeditor/LiveEditor';
|
import { ref, onMounted } from 'vue';
|
||||||
export default {
|
import ProductService from './service/ProductService';
|
||||||
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';
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
setup() {
|
||||||
return {
|
onMounted(() => {
|
||||||
products: null,
|
productService.value.getProductsSmall().then(data => products.value = data.slice(0,9));
|
||||||
responsiveOptions: [
|
})
|
||||||
{
|
const products = ref(null);
|
||||||
breakpoint: '1024px',
|
const productService = ref(new ProductService());
|
||||||
numVisible: 3,
|
const responsiveOptions = ref([
|
||||||
numScroll: 3
|
{
|
||||||
},
|
breakpoint: '1024px',
|
||||||
{
|
numVisible: 3,
|
||||||
breakpoint: '600px',
|
numScroll: 3
|
||||||
numVisible: 2,
|
},
|
||||||
numScroll: 2
|
{
|
||||||
},
|
breakpoint: '600px',
|
||||||
{
|
numVisible: 2,
|
||||||
breakpoint: '480px',
|
numScroll: 2
|
||||||
numVisible: 1,
|
},
|
||||||
numScroll: 1
|
{
|
||||||
}
|
breakpoint: '480px',
|
||||||
]
|
numVisible: 1,
|
||||||
}
|
numScroll: 1
|
||||||
},
|
}
|
||||||
productService: null,
|
]);
|
||||||
created() {
|
|
||||||
this.productService = new ProductService();
|
return {products, productService, responsiveOptions }
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.productService.getProductsSmall().then(data => this.products = data.slice(0,9));
|
|
||||||
}
|
}
|
||||||
}`,
|
}
|
||||||
style: `<style lang="scss" scoped>
|
<\\/script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
.product-item {
|
.product-item {
|
||||||
.product-item-content {
|
.product-item-content {
|
||||||
border: 1px solid var(--surface-d);
|
border: 1px solid var(--surface-d);
|
||||||
|
|
@ -590,9 +580,6 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
|
||||||
components: {
|
|
||||||
LiveEditor
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,13 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="content-section documentation">
|
<AppDoc name="ChipDemo" :sources="sources">
|
||||||
<TabView>
|
<h5>Import</h5>
|
||||||
<TabPanel header="Documentation">
|
|
||||||
<h5>Import</h5>
|
|
||||||
<pre v-code.script><code>
|
<pre v-code.script><code>
|
||||||
import Chip from 'primevue/chip';
|
import Chip from 'primevue/chip';
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Getting Started</h5>
|
<h5>Getting Started</h5>
|
||||||
<p>Chip can display labels, icons and images.</p>
|
<p>Chip can display labels, icons and images.</p>
|
||||||
<pre v-code><code>
|
<pre v-code><code>
|
||||||
<Chip label="Text Only" />
|
<Chip label="Text Only" />
|
||||||
<Chip label="Text with icon" icon="pi pi-check" />
|
<Chip label="Text with icon" icon="pi pi-check" />
|
||||||
|
|
@ -17,16 +15,16 @@ import Chip from 'primevue/chip';
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Removable</h5>
|
<h5>Removable</h5>
|
||||||
<p>Setting <i>removable</i> property displays an icon to close the chip, the optional <i>remove</i>
|
<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>
|
event is available to get notified when a chip is hidden.</p>
|
||||||
<pre v-code><code>
|
<pre v-code><code>
|
||||||
<Chip label="Text" removable />
|
<Chip label="Text" removable />
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Templating</h5>
|
<h5>Templating</h5>
|
||||||
<p>Content can easily be customized with the default slot instead of using the built-in modes.</p>
|
<p>Content can easily be customized with the default slot instead of using the built-in modes.</p>
|
||||||
<pre v-code><code>
|
<pre v-code><code>
|
||||||
<Chip>
|
<Chip>
|
||||||
Content
|
Content
|
||||||
|
|
@ -34,206 +32,210 @@ import Chip from 'primevue/chip';
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Properties</h5>
|
<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>
|
<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">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
<th>Type</th>
|
<th>Type</th>
|
||||||
<th>Default</th>
|
<th>Default</th>
|
||||||
<th>Description</th>
|
<th>Description</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>label</td>
|
<td>label</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>null</td>
|
<td>null</td>
|
||||||
<td>Defines the text to display.</td>
|
<td>Defines the text to display.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>icon</td>
|
<td>icon</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>null</td>
|
<td>null</td>
|
||||||
<td>Defines the icon to display.</td>
|
<td>Defines the icon to display.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>image</td>
|
<td>image</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>null</td>
|
<td>null</td>
|
||||||
<td>Defines the image to display.</td>
|
<td>Defines the image to display.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>removable</td>
|
<td>removable</td>
|
||||||
<td>boolean</td>
|
<td>boolean</td>
|
||||||
<td>false</td>
|
<td>false</td>
|
||||||
<td>Whether to display a remove icon.</td>
|
<td>Whether to display a remove icon.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>removeIconClass</td>
|
<td>removeIconClass</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>pi pi-times-circle</td>
|
<td>pi pi-times-circle</td>
|
||||||
<td>Icon of the remove element.</td>
|
<td>Icon of the remove element.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Events</h5>
|
<h5>Events</h5>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
<th>Parameters</th>
|
<th>Parameters</th>
|
||||||
<th>Description</th>
|
<th>Description</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>remove</td>
|
<td>remove</td>
|
||||||
<td>event: Browser event</td>
|
<td>event: Browser event</td>
|
||||||
<td>Callback to invoke when a chip is removed.</td>
|
<td>Callback to invoke when a chip is removed.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Styling</h5>
|
<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>
|
<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">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
<th>Element</th>
|
<th>Element</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-chip</td>
|
<td>p-chip</td>
|
||||||
<td>Container element.</td>
|
<td>Container element.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-chip-image</td>
|
<td>p-chip-image</td>
|
||||||
<td>Container element in image mode.</td>
|
<td>Container element in image mode.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-chip-text</td>
|
<td>p-chip-text</td>
|
||||||
<td>Text of the chip.</td>
|
<td>Text of the chip.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>pi-chip-remove-icon</td>
|
<td>pi-chip-remove-icon</td>
|
||||||
<td>Remove icon.</td>
|
<td>Remove icon.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Dependencies</h5>
|
<h5>Dependencies</h5>
|
||||||
<p>None.</p>
|
<p>None.</p>
|
||||||
</TabPanel>
|
</AppDoc>
|
||||||
|
|
||||||
<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>
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<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>Image</h5>
|
|
||||||
<div class="p-d-flex p-ai-center">
|
|
||||||
<Chip label="Amy Elsner" image="demo/images/avatar/amyelsner.png" class="p-mr-2" />
|
|
||||||
<Chip label="Asiya Javayant" image="demo/images/avatar/asiyajavayant.png" class="p-mr-2" />
|
|
||||||
<Chip label="Onyama Limba" image="demo/images/avatar/onyamalimba.png" class="p-mr-2" />
|
|
||||||
<Chip label="Xuxue Feng" image="demo/images/avatar/xuxuefeng.png" 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="demo/images/avatar/onyamalimba.png" class="p-mr-2 custom-chip" />
|
|
||||||
<Chip label="Xuxue Feng" image="demo/images/avatar/xuxuefeng.png" class="custom-chip" removable />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</code></pre>
|
|
||||||
|
|
||||||
</TabPanel>
|
|
||||||
</TabView>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import LiveEditor from '../liveeditor/LiveEditor';
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
sources: {
|
sources: {
|
||||||
'template': {
|
'options-api': {
|
||||||
content: `<template>
|
tabName: 'Source',
|
||||||
<div class="layout-content">
|
content: `
|
||||||
<div class="content-section implementation">
|
<template>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<h5>Basic</h5>
|
<h5>Basic</h5>
|
||||||
<div class="p-d-flex p-ai-center">
|
<div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
|
||||||
<Chip label="Action" class="p-mr-2" />
|
<Chip label="Action" class="p-mr-2 p-mb-2" />
|
||||||
<Chip label="Comedy" class="p-mr-2" />
|
<Chip label="Comedy" class="p-mr-2 p-mb-2" />
|
||||||
<Chip label="Mystery" class="p-mr-2" />
|
<Chip label="Mystery" class="p-mr-2 p-mb-2" />
|
||||||
<Chip label="Thriller" removable />
|
<Chip label="Thriller" class="p-mb-2" removable />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Icon</h5>
|
<h5>Icon</h5>
|
||||||
<div class="p-d-flex p-ai-center">
|
<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" />
|
<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" />
|
<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" />
|
<Chip label="Google" icon="pi pi-google" class="p-mr-2 p-mb-2" />
|
||||||
<Chip label="Microsoft" icon="pi pi-microsoft" removable />
|
<Chip label="Microsoft" icon="pi pi-microsoft" class="p-mb-2" removable />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Image</h5>
|
<h5>Image</h5>
|
||||||
<div class="p-d-flex p-ai-center">
|
<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" />
|
<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" />
|
<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" />
|
<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" removable />
|
<Chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mb-2" removable />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Styling</h5>
|
<h5>Styling</h5>
|
||||||
<div class="p-d-flex p-ai-center">
|
<div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
|
||||||
<Chip label="Action" class="p-mr-2 custom-chip" />
|
<Chip label="Action" class="p-mr-2 p-mb-2 custom-chip" />
|
||||||
<Chip label="Apple" icon="pi pi-apple" class="p-mr-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 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" removable />
|
<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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
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 {
|
.p-chip.custom-chip {
|
||||||
background: var(--primary-color);
|
background: var(--primary-color);
|
||||||
color: var(--primary-color-text);
|
color: var(--primary-color-text);
|
||||||
|
|
@ -242,9 +244,6 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
|
||||||
components: {
|
|
||||||
LiveEditor
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -1,8 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="content-section documentation">
|
<AppDoc name="InplaceDemo" :sources="sources" service="ProductService" data="products-small" >
|
||||||
<TabView>
|
<h5>Import</h5>
|
||||||
<TabPanel header="Documentation">
|
|
||||||
<h5>Import</h5>
|
|
||||||
<pre v-code.script><code>
|
<pre v-code.script><code>
|
||||||
import Inplace from 'primevue/inplace';
|
import Inplace from 'primevue/inplace';
|
||||||
|
|
||||||
|
|
@ -184,134 +182,59 @@ export default {
|
||||||
|
|
||||||
<h5>Dependencies</h5>
|
<h5>Dependencies</h5>
|
||||||
<p>None.</p>
|
<p>None.</p>
|
||||||
</TabPanel>
|
</AppDoc>
|
||||||
|
|
||||||
<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>
|
|
||||||
<h3>Input</h3>
|
|
||||||
<Inplace :closable="true">
|
|
||||||
<template #display>
|
|
||||||
{{text || 'Click to Edit'}}
|
|
||||||
</template>
|
|
||||||
<template #content>
|
|
||||||
<InputText v-model="text" autoFocus />
|
|
||||||
</template>
|
|
||||||
</Inplace>
|
|
||||||
|
|
||||||
<h3>Image</h3>
|
|
||||||
<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="demo/images/nature/nature1.jpg" />
|
|
||||||
</template>
|
|
||||||
</Inplace>
|
|
||||||
|
|
||||||
<h3>Lazy Data</h3>
|
|
||||||
<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>
|
|
||||||
</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>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import LiveEditor from '../liveeditor/LiveEditor';
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
sources: {
|
sources: {
|
||||||
'template': {
|
'options-api': {
|
||||||
content: `<template>
|
tabName: 'Source',
|
||||||
<div class="layout-content">
|
content: `
|
||||||
<div class="content-section implementation">
|
<template>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<h5>Input</h5>
|
<h5>Input</h5>
|
||||||
<Inplace :closable="true">
|
<Inplace :closable="true">
|
||||||
<template #display>
|
<template #display>
|
||||||
{{text || 'Click to Edit'}}
|
{{text || 'Click to Edit'}}
|
||||||
</template>
|
</template>
|
||||||
<template #content>
|
<template #content>
|
||||||
<InputText v-model="text" autoFocus />
|
<InputText v-model="text" autoFocus />
|
||||||
</template>
|
</template>
|
||||||
</Inplace>
|
</Inplace>
|
||||||
|
|
||||||
<h5>Image</h5>
|
<h5>Image</h5>
|
||||||
<Inplace>
|
<Inplace>
|
||||||
<template #display>
|
<template #display>
|
||||||
<span class="pi pi-search" style="vertical-align: middle"></span>
|
<span class="pi pi-search" style="vertical-align: middle"></span>
|
||||||
<span style="margin-left:.5rem; vertical-align: middle">View Picture</span>
|
<span style="margin-left:.5rem; vertical-align: middle">View Picture</span>
|
||||||
</template>
|
</template>
|
||||||
<template #content>
|
<template #content>
|
||||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/12/primevue-min.png" width="200" />
|
<img src="https://www.primefaces.org/wp-content/uploads/2020/12/primevue-min.png" width="200" />
|
||||||
</template>
|
</template>
|
||||||
</Inplace>
|
</Inplace>
|
||||||
|
|
||||||
<h5>Lazy Data</h5>
|
<h5>Lazy Data</h5>
|
||||||
<Inplace @open="loadData">
|
<Inplace @open="loadData">
|
||||||
<template #display>
|
<template #display>
|
||||||
View Data
|
View Data
|
||||||
</template>
|
</template>
|
||||||
<template #content>
|
<template #content>
|
||||||
<DataTable :value="products">
|
<DataTable :value="products" responsiveLayout="scroll" >
|
||||||
<Column field="code" header="Code"></Column>
|
<Column field="code" header="Code"></Column>
|
||||||
<Column field="name" header="Name"></Column>
|
<Column field="name" header="Name"></Column>
|
||||||
<Column field="category" header="Category"></Column>
|
<Column field="category" header="Category"></Column>
|
||||||
<Column field="quantity" header="Quantity"></Column>
|
<Column field="quantity" header="Quantity"></Column>
|
||||||
</DataTable>
|
</DataTable>
|
||||||
</template>
|
</template>
|
||||||
</Inplace>
|
</Inplace>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import ProductService from '../service/ProductService';
|
import ProductService from './service/ProductService';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
|
|
@ -329,13 +252,73 @@ export default {
|
||||||
this.productService.getProductsSmall().then(data => this.products = data);
|
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>
|
</script>
|
||||||
|
|
@ -198,6 +198,7 @@ import Avatar from 'primevue/avatar';
|
||||||
import AvatarGroup from 'primevue/avatargroup';
|
import AvatarGroup from 'primevue/avatargroup';
|
||||||
import Badge from 'primevue/badge';
|
import Badge from 'primevue/badge';
|
||||||
import BadgeDirective from "primevue/badgedirective";
|
import BadgeDirective from "primevue/badgedirective";
|
||||||
|
import BlockUI from 'primevue/blockui';
|
||||||
import Button from 'primevue/button';
|
import Button from 'primevue/button';
|
||||||
import Breadcrumb from 'primevue/breadcrumb';
|
import Breadcrumb from 'primevue/breadcrumb';
|
||||||
import Calendar from 'primevue/calendar';
|
import Calendar from 'primevue/calendar';
|
||||||
|
|
@ -247,6 +248,7 @@ import PanelMenu from 'primevue/panelmenu';
|
||||||
import Password from 'primevue/password';
|
import Password from 'primevue/password';
|
||||||
import PickList from 'primevue/picklist';
|
import PickList from 'primevue/picklist';
|
||||||
import ProgressBar from 'primevue/progressbar';
|
import ProgressBar from 'primevue/progressbar';
|
||||||
|
import ProgressSpinner from 'primevue/progressspinner';
|
||||||
import Rating from 'primevue/rating';
|
import Rating from 'primevue/rating';
|
||||||
import RadioButton from 'primevue/radiobutton';
|
import RadioButton from 'primevue/radiobutton';
|
||||||
import Ripple from 'primevue/ripple';
|
import Ripple from 'primevue/ripple';
|
||||||
|
|
@ -269,6 +271,7 @@ import Toolbar from 'primevue/toolbar';
|
||||||
import TabView from 'primevue/tabview';
|
import TabView from 'primevue/tabview';
|
||||||
import TabPanel from 'primevue/tabpanel';
|
import TabPanel from 'primevue/tabpanel';
|
||||||
import Tag from 'primevue/tag';
|
import Tag from 'primevue/tag';
|
||||||
|
import Terminal from 'primevue/terminal';
|
||||||
import Timeline from 'primevue/timeline';
|
import Timeline from 'primevue/timeline';
|
||||||
import ToggleButton from 'primevue/togglebutton';
|
import ToggleButton from 'primevue/togglebutton';
|
||||||
import Tooltip from 'primevue/tooltip';
|
import Tooltip from 'primevue/tooltip';
|
||||||
|
|
@ -299,6 +302,7 @@ app.component('AutoComplete', AutoComplete);
|
||||||
app.component('Avatar', Avatar);
|
app.component('Avatar', Avatar);
|
||||||
app.component('AvatarGroup', AvatarGroup);
|
app.component('AvatarGroup', AvatarGroup);
|
||||||
app.component('Badge', Badge);
|
app.component('Badge', Badge);
|
||||||
|
app.component('BlockUI', BlockUI);
|
||||||
app.component('Breadcrumb', Breadcrumb);
|
app.component('Breadcrumb', Breadcrumb);
|
||||||
app.component('Button', Button);
|
app.component('Button', Button);
|
||||||
app.component('Calendar', Calendar);
|
app.component('Calendar', Calendar);
|
||||||
|
|
@ -347,6 +351,7 @@ app.component('PanelMenu', PanelMenu);
|
||||||
app.component('Password', Password);
|
app.component('Password', Password);
|
||||||
app.component('PickList', PickList);
|
app.component('PickList', PickList);
|
||||||
app.component('ProgressBar', ProgressBar);
|
app.component('ProgressBar', ProgressBar);
|
||||||
|
app.component('ProgressSpinner', ProgressSpinner);
|
||||||
app.component('RadioButton', RadioButton);
|
app.component('RadioButton', RadioButton);
|
||||||
app.component('Rating', Rating);
|
app.component('Rating', Rating);
|
||||||
app.component('SelectButton', SelectButton);
|
app.component('SelectButton', SelectButton);
|
||||||
|
|
@ -364,6 +369,7 @@ app.component('TabView', TabView);
|
||||||
app.component('TabPanel', TabPanel);
|
app.component('TabPanel', TabPanel);
|
||||||
app.component('Tag', Tag);
|
app.component('Tag', Tag);
|
||||||
app.component('Textarea', Textarea);
|
app.component('Textarea', Textarea);
|
||||||
|
app.component('Terminal', Terminal);
|
||||||
app.component('TieredMenu', TieredMenu);
|
app.component('TieredMenu', TieredMenu);
|
||||||
app.component('Timeline', Timeline);
|
app.component('Timeline', Timeline);
|
||||||
app.component('Toast', Toast);
|
app.component('Toast', Toast);
|
||||||
|
|
|
||||||
|
|
@ -1,21 +1,19 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="content-section documentation">
|
<AppDoc name="MessageDemo" :sources="sources">
|
||||||
<TabView>
|
<h5>Import</h5>
|
||||||
<TabPanel header="Documentation">
|
|
||||||
<h5>Import</h5>
|
|
||||||
<pre v-code.script><code>
|
<pre v-code.script><code>
|
||||||
import Message from 'primevue/message';
|
import Message from 'primevue/message';
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Getting Started</h5>
|
<h5>Getting Started</h5>
|
||||||
<p>Message component requires a content to display.</p>
|
<p>Message component requires a content to display.</p>
|
||||||
<pre v-code><code>
|
<pre v-code><code>
|
||||||
<Message>Welcome to PrimeVue</Message>
|
<Message>Welcome to PrimeVue</Message>
|
||||||
|
|
||||||
</code></pre>
|
</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>
|
<pre v-code><code><template v-pre>
|
||||||
<Message v-for="msg of messages" :severity="msg.severity" :key="msg.content">{{msg.content}}</Message>
|
<Message v-for="msg of messages" :severity="msg.severity" :key="msg.content">{{msg.content}}</Message>
|
||||||
|
|
@ -35,38 +33,38 @@ data() {
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Severities</h5>
|
<h5>Severities</h5>
|
||||||
<p>There are four possible values for the severity of a message. Default one is "info".</p>
|
<p>There are four possible values for the severity of a message. Default one is "info".</p>
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li>success</li>
|
<li>success</li>
|
||||||
<li>info</li>
|
<li>info</li>
|
||||||
<li>warn</li>
|
<li>warn</li>
|
||||||
<li>error</li>
|
<li>error</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<h5>Closable</h5>
|
<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>
|
<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>
|
<pre v-code><code>
|
||||||
<Message severity="success" :closable="false">Order Submitted</Message>
|
<Message severity="success" :closable="false">Order Submitted</Message>
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Sticky</h5>
|
<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
|
<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>
|
should be displayed which is 3000 ms by default.</p>
|
||||||
<pre v-code><code>
|
<pre v-code><code>
|
||||||
<Message severity="warn" :life="5000" :sticky="false">This message will hide in 5 seconds.</Message>
|
<Message severity="warn" :life="5000" :sticky="false">This message will hide in 5 seconds.</Message>
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Inline Message Component</h5>
|
<h5>Inline Message Component</h5>
|
||||||
<pre v-code.script><code>
|
<pre v-code.script><code>
|
||||||
import InlineMessage from 'primevue/inlinemessage';
|
import InlineMessage from 'primevue/inlinemessage';
|
||||||
|
|
||||||
</code></pre>
|
</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>
|
<pre v-code><code>
|
||||||
<InputText placeholder="Username" class="p-invalid" />
|
<InputText placeholder="Username" class="p-invalid" />
|
||||||
<InlineMessage>Field is required</InlineMessage>
|
<InlineMessage>Field is required</InlineMessage>
|
||||||
|
|
@ -74,328 +72,236 @@ import InlineMessage from 'primevue/inlinemessage';
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
|
|
||||||
<h5>Properties of Message</h5>
|
<h5>Properties of Message</h5>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
<th>Type</th>
|
<th>Type</th>
|
||||||
<th>Default</th>
|
<th>Default</th>
|
||||||
<th>Description</th>
|
<th>Description</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>severity</td>
|
<td>severity</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>info</td>
|
<td>info</td>
|
||||||
<td>Severity level of the message.</td>
|
<td>Severity level of the message.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>closable</td>
|
<td>closable</td>
|
||||||
<td>boolean</td>
|
<td>boolean</td>
|
||||||
<td>true</td>
|
<td>true</td>
|
||||||
<td>Whether the message can be closed manually using the close icon.</td>
|
<td>Whether the message can be closed manually using the close icon.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>sticky</td>
|
<td>sticky</td>
|
||||||
<td>element</td>
|
<td>element</td>
|
||||||
<td>null</td>
|
<td>null</td>
|
||||||
<td>When enabled, message is not removed automatically.</td>
|
<td>When enabled, message is not removed automatically.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>life</td>
|
<td>life</td>
|
||||||
<td>number</td>
|
<td>number</td>
|
||||||
<td>3000</td>
|
<td>3000</td>
|
||||||
<td>Delay in milliseconds to close the message automatically.</td>
|
<td>Delay in milliseconds to close the message automatically.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Properties of ValidationMessage</h5>
|
<h5>Properties of ValidationMessage</h5>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
<th>Type</th>
|
<th>Type</th>
|
||||||
<th>Default</th>
|
<th>Default</th>
|
||||||
<th>Description</th>
|
<th>Description</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>severity</td>
|
<td>severity</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>info</td>
|
<td>info</td>
|
||||||
<td>Severity level of the message.</td>
|
<td>Severity level of the message.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Events of Message</h5>
|
<h5>Events of Message</h5>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
<th>Parameters</th>
|
<th>Parameters</th>
|
||||||
<th>Description</th>
|
<th>Description</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>close</td>
|
<td>close</td>
|
||||||
<td>event: Browser event</td>
|
<td>event: Browser event</td>
|
||||||
<td>Callback to invoke when a message is closed.</td>
|
<td>Callback to invoke when a message is closed.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Styling</h5>
|
<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>
|
<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>
|
<strong>Message</strong>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
<th>Element</th>
|
<th>Element</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-messages</td>
|
<td>p-messages</td>
|
||||||
<td>Container element.</td>
|
<td>Container element.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-messages-info</td>
|
<td>p-messages-info</td>
|
||||||
<td>Container element when displaying info messages.</td>
|
<td>Container element when displaying info messages.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-messages-warn</td>
|
<td>p-messages-warn</td>
|
||||||
<td>Container element when displaying warning messages.</td>
|
<td>Container element when displaying warning messages.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-messages-error</td>
|
<td>p-messages-error</td>
|
||||||
<td>Container element when displaying error messages.</td>
|
<td>Container element when displaying error messages.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-messages-success</td>
|
<td>p-messages-success</td>
|
||||||
<td>Container element when displaying success messages.</td>
|
<td>Container element when displaying success messages.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-messages-close</td>
|
<td>p-messages-close</td>
|
||||||
<td>Close icon.</td>
|
<td>Close icon.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-messages-icon</td>
|
<td>p-messages-icon</td>
|
||||||
<td>Severity icon.</td>
|
<td>Severity icon.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-messages-text</td>
|
<td>p-messages-text</td>
|
||||||
<td>Content of a message.</td>
|
<td>Content of a message.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<strong>InlineMessage</strong>
|
<strong>InlineMessage</strong>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
<th>Element</th>
|
<th>Element</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-inline-message</td>
|
<td>p-inline-message</td>
|
||||||
<td>Container element.</td>
|
<td>Container element.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-inline-message-info</td>
|
<td>p-inline-message-info</td>
|
||||||
<td>Container element when displaying info messages.</td>
|
<td>Container element when displaying info messages.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-inline-message-warn</td>
|
<td>p-inline-message-warn</td>
|
||||||
<td>Container element when displaying warning messages.</td>
|
<td>Container element when displaying warning messages.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-inline-message-error</td>
|
<td>p-inline-message-error</td>
|
||||||
<td>Container element when displaying error messages.</td>
|
<td>Container element when displaying error messages.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-inline-message-success</td>
|
<td>p-inline-message-success</td>
|
||||||
<td>Container element when displaying success messages.</td>
|
<td>Container element when displaying success messages.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-inline-message-icon</td>
|
<td>p-inline-message-icon</td>
|
||||||
<td>Severity icon.</td>
|
<td>Severity icon.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-inline-message-text</td>
|
<td>p-inline-message-text</td>
|
||||||
<td>Content of a message.</td>
|
<td>Content of a message.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Dependencies</h5>
|
<h5>Dependencies</h5>
|
||||||
<p>None.</p>
|
<p>None.</p>
|
||||||
</TabPanel>
|
</AppDoc>
|
||||||
|
|
||||||
<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>
|
|
||||||
<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>Auto Dismiss</h5>
|
|
||||||
<Message severity="warn" :life="3000" :sticky="false">This message will hide in 3 seconds.</Message>
|
|
||||||
|
|
||||||
<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>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>
|
|
||||||
</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>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import LiveEditor from '../liveeditor/LiveEditor';
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
sources: {
|
sources: {
|
||||||
'template': {
|
'options-api': {
|
||||||
content: `<template>
|
tabName: 'Source',
|
||||||
<div class="layout-content">
|
content: `
|
||||||
<div class="content-section implementation">
|
<template>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<h5>Severities</h5>
|
<h5>Severities</h5>
|
||||||
<Message severity="success">Success Message Content</Message>
|
<Message severity="success">Success Message Content</Message>
|
||||||
<Message severity="info">Info Message Content</Message>
|
<Message severity="info">Info Message Content</Message>
|
||||||
<Message severity="warn">Warning Message Content</Message>
|
<Message severity="warn">Warning Message Content</Message>
|
||||||
<Message severity="error">Error Message Content</Message>
|
<Message severity="error">Error Message Content</Message>
|
||||||
|
|
||||||
<h5>Dynamic</h5>
|
<h5>Dynamic</h5>
|
||||||
<Button label="Show" @click="addMessages()" />
|
<Button label="Show" @click="addMessages()" />
|
||||||
<transition-group name="p-message" tag="div">
|
<transition-group name="p-message" tag="div">
|
||||||
<Message v-for="msg of messages" :severity="msg.severity" :key="msg.id">{{msg.content}}</Message>
|
<Message v-for="msg of messages" :severity="msg.severity" :key="msg.id">{{msg.content}}</Message>
|
||||||
</transition-group>
|
</transition-group>
|
||||||
|
|
||||||
<h5>Inline Messages</h5>
|
<h5>Inline Messages</h5>
|
||||||
<p>Message component is used to display inline messages mostly within forms.</p>
|
<p>Message component is used to display inline messages mostly within forms.</p>
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-12 p-md-3">
|
<div class="p-col-12 p-md-3">
|
||||||
<InlineMessage severity="info">Message Content</InlineMessage>
|
<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>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</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 {
|
button.p-button {
|
||||||
margin-right: .5rem;
|
margin-right: .5rem;
|
||||||
}
|
}
|
||||||
|
|
@ -430,9 +419,6 @@ button.p-button {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
|
||||||
components: {
|
|
||||||
LiveEditor
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -1,15 +1,13 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="content-section documentation">
|
<AppDoc name="ProgressBarDemo" :sources="sources">
|
||||||
<TabView>
|
<h5>Import</h5>
|
||||||
<TabPanel header="Documentation">
|
|
||||||
<h5>Import</h5>
|
|
||||||
<pre v-code.script><code>
|
<pre v-code.script><code>
|
||||||
import ProgressBar from 'primevue/progressbar';
|
import ProgressBar from 'primevue/progressbar';
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Getting Started</h5>
|
<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>
|
<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>
|
<pre v-code><code>
|
||||||
<ProgressBar :value="value" />
|
<ProgressBar :value="value" />
|
||||||
|
|
||||||
|
|
@ -23,14 +21,14 @@ data() {
|
||||||
|
|
||||||
</code></pre>
|
</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>
|
<pre v-code><code>
|
||||||
<ProgressBar mode="indeterminate"/>
|
<ProgressBar mode="indeterminate"/>
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Slot</h5>
|
<h5>Slot</h5>
|
||||||
<p>A custom label can be placed inside the progress bar via the default slot.</p>
|
<p>A custom label can be placed inside the progress bar via the default slot.</p>
|
||||||
<pre v-code><code><template v-pre>
|
<pre v-code><code><template v-pre>
|
||||||
<ProgressBar :value="value">
|
<ProgressBar :value="value">
|
||||||
Percent Complete: {{value}}%
|
Percent Complete: {{value}}%
|
||||||
|
|
@ -38,158 +36,99 @@ data() {
|
||||||
</template>
|
</template>
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Properties</h5>
|
<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>
|
<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">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
<th>Type</th>
|
<th>Type</th>
|
||||||
<th>Default</th>
|
<th>Default</th>
|
||||||
<th>Description</th>
|
<th>Description</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>value</td>
|
<td>value</td>
|
||||||
<td>number</td>
|
<td>number</td>
|
||||||
<td>null</td>
|
<td>null</td>
|
||||||
<td>Current value of the progress.</td>
|
<td>Current value of the progress.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>mode</td>
|
<td>mode</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>determinate</td>
|
<td>determinate</td>
|
||||||
<td>Defines the mode of the progress, valid values are "determinate" and "indeterminate".</td>
|
<td>Defines the mode of the progress, valid values are "determinate" and "indeterminate".</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>showValue</td>
|
<td>showValue</td>
|
||||||
<td>boolean</td>
|
<td>boolean</td>
|
||||||
<td>true</td>
|
<td>true</td>
|
||||||
<td>Whether to display the progress bar value.</td>
|
<td>Whether to display the progress bar value.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Styling</h5>
|
<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>
|
<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">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
<th>Element</th>
|
<th>Element</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-progressbar</td>
|
<td>p-progressbar</td>
|
||||||
<td>Container element.</td>
|
<td>Container element.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-progressbar-determinate</td>
|
<td>p-progressbar-determinate</td>
|
||||||
<td>Container element of a determinate progressbar.</td>
|
<td>Container element of a determinate progressbar.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-progressbar-indeterminate</td>
|
<td>p-progressbar-indeterminate</td>
|
||||||
<td>Container element of an indeterminate progressbar.</td>
|
<td>Container element of an indeterminate progressbar.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-progressbar-value</td>
|
<td>p-progressbar-value</td>
|
||||||
<td>Element whose width changes according to value.</td>
|
<td>Element whose width changes according to value.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-progressbar-label</td>
|
<td>p-progressbar-label</td>
|
||||||
<td>Label element that displays the current value.</td>
|
<td>Label element that displays the current value.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Dependencies</h5>
|
<h5>Dependencies</h5>
|
||||||
<p>None.</p>
|
<p>None.</p>
|
||||||
</TabPanel>
|
</AppDoc>
|
||||||
|
|
||||||
<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>
|
|
||||||
<h3>Dynamic</h3>
|
|
||||||
<ProgressBar :value="value1" />
|
|
||||||
|
|
||||||
<h3>Static</h3>
|
|
||||||
<ProgressBar :value="value2" :showValue="false" />
|
|
||||||
|
|
||||||
<h3>Indeterminate</h3>
|
|
||||||
<ProgressBar mode="indeterminate" style="height: .5em" />
|
|
||||||
</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>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import LiveEditor from '../liveeditor/LiveEditor';
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
sources: {
|
sources: {
|
||||||
'template': {
|
'options-api': {
|
||||||
content: `<template>
|
tabName: 'Source',
|
||||||
<div class="layout-content">
|
content: `
|
||||||
<div class="content-section implementation">
|
<template>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<h5>Dynamic</h5>
|
<h5>Dynamic</h5>
|
||||||
<ProgressBar :value="value1" />
|
<ProgressBar :value="value1" />
|
||||||
|
|
||||||
<h5>Static</h5>
|
<h5>Static</h5>
|
||||||
<ProgressBar :value="value2" :showValue="false" />
|
<ProgressBar :value="value2" :showValue="false" />
|
||||||
|
|
||||||
<h5>Indeterminate</h5>
|
<h5>Indeterminate</h5>
|
||||||
<ProgressBar mode="indeterminate" style="height: .5em" />
|
<ProgressBar mode="indeterminate" style="height: .5em" />
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -223,13 +162,63 @@ export default {
|
||||||
beforeUnmount() {
|
beforeUnmount() {
|
||||||
this.endProgress();
|
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>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,22 +1,20 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="content-section documentation">
|
<AppDoc name="ProgressSpinnerDemo" :sources="sources">
|
||||||
<TabView>
|
<h5>Import</h5>
|
||||||
<TabPanel header="Documentation">
|
|
||||||
<h5>Import</h5>
|
|
||||||
<pre v-code.script><code>
|
<pre v-code.script><code>
|
||||||
import ProgressSpinner from 'primevue/progressspinner';
|
import ProgressSpinner from 'primevue/progressspinner';
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Getting Started</h5>
|
<h5>Getting Started</h5>
|
||||||
<p>ProgressSpinner is defined using ProgressSpinner element.</p>
|
<p>ProgressSpinner is defined using ProgressSpinner element.</p>
|
||||||
<pre v-code><code><template v-pre>
|
<pre v-code><code><template v-pre>
|
||||||
<ProgressSpinner />
|
<ProgressSpinner />
|
||||||
</template>
|
</template>
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Colors</h5>
|
<h5>Colors</h5>
|
||||||
<p>Colors of the spinner can be changed by overriding the keyframes animation.</p>
|
<p>Colors of the spinner can be changed by overriding the keyframes animation.</p>
|
||||||
<pre v-code.css><code>
|
<pre v-code.css><code>
|
||||||
@keyframes p-progress-spinner-color {
|
@keyframes p-progress-spinner-color {
|
||||||
100%,
|
100%,
|
||||||
|
|
@ -37,122 +35,118 @@ import ProgressSpinner from 'primevue/progressspinner';
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Properties</h5>
|
<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>
|
<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">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
<th>Type</th>
|
<th>Type</th>
|
||||||
<th>Default</th>
|
<th>Default</th>
|
||||||
<th>Description</th>
|
<th>Description</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>strokeWidth</td>
|
<td>strokeWidth</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>2</td>
|
<td>2</td>
|
||||||
<td>Width of the circle stroke.</td>
|
<td>Width of the circle stroke.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>fill</td>
|
<td>fill</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>null</td>
|
<td>null</td>
|
||||||
<td>Color for the background of the circle.</td>
|
<td>Color for the background of the circle.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>animationDuration</td>
|
<td>animationDuration</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>2s</td>
|
<td>2s</td>
|
||||||
<td>Duration of the rotate animation.</td>
|
<td>Duration of the rotate animation.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Styling</h5>
|
<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>
|
<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">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
<th>Element</th>
|
<th>Element</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-progress-spinner</td>
|
<td>p-progress-spinner</td>
|
||||||
<td>Container element.</td>
|
<td>Container element.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-progress-circle</td>
|
<td>p-progress-circle</td>
|
||||||
<td>SVG element.</td>
|
<td>SVG element.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-progress-path</td>
|
<td>p-progress-path</td>
|
||||||
<td>Circle element.</td>
|
<td>Circle element.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Dependencies</h5>
|
<h5>Dependencies</h5>
|
||||||
<p>None.</p>
|
<p>None.</p>
|
||||||
</TabPanel>
|
</AppDoc>
|
||||||
|
|
||||||
<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>
|
|
||||||
<h3>Basic</h3>
|
|
||||||
<ProgressSpinner />
|
|
||||||
|
|
||||||
<h3>Custom</h3>
|
|
||||||
<ProgressSpinner style="width:50px;height:50px" strokeWidth="8" fill="#EEEEEE" animationDuration=".5s"/>
|
|
||||||
</template>
|
|
||||||
</code></pre>
|
|
||||||
</TabPanel>
|
|
||||||
</TabView>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import LiveEditor from '../liveeditor/LiveEditor';
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
sources: {
|
sources: {
|
||||||
'template': {
|
'options-api': {
|
||||||
content: `<template>
|
tabName: 'Source',
|
||||||
<div class="layout-content">
|
content: `
|
||||||
<div class="content-section implementation">
|
<template>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<h5>Basic</h5>
|
<h5>Basic</h5>
|
||||||
<ProgressSpinner />
|
<ProgressSpinner />
|
||||||
|
|
||||||
<h5>Custom</h5>
|
<h5>Custom</h5>
|
||||||
<ProgressSpinner style="width:50px;height:50px" strokeWidth="8" fill="#EEEEEE" animationDuration=".5s"/>
|
<ProgressSpinner style="width:50px;height:50px" strokeWidth="8" fill="#EEEEEE" animationDuration=".5s"/>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
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>
|
</script>
|
||||||
|
|
@ -1,11 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="content-section documentation">
|
<AppDoc name="RippleDemo" :sources="sources">
|
||||||
<TabView>
|
<h5>Getting Started</h5>
|
||||||
<TabPanel header="Documentation">
|
<h5>Ripple</h5>
|
||||||
<h5>Getting Started</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
|
||||||
<h5>Ripple</h5>
|
your app's entry file (e.g. main.js) during the PrimeVue setup.</p>
|
||||||
<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>
|
<pre v-code.script><code>
|
||||||
import {createApp} from 'vue';
|
import {createApp} from 'vue';
|
||||||
import PrimeVue from 'primevue/config';
|
import PrimeVue from 'primevue/config';
|
||||||
|
|
@ -15,10 +13,10 @@ app.use(PrimeVue, {ripple: true});
|
||||||
|
|
||||||
</code></pre>
|
</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>
|
<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>
|
<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>
|
<pre v-code.script><code>
|
||||||
import Ripple from 'primevue/ripple';
|
import Ripple from 'primevue/ripple';
|
||||||
|
|
||||||
|
|
@ -26,7 +24,7 @@ Vue.directive('ripple', Ripple);
|
||||||
|
|
||||||
</code></pre>
|
</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>
|
<pre v-code.script><code>
|
||||||
directives: {
|
directives: {
|
||||||
'ripple': Ripple
|
'ripple': Ripple
|
||||||
|
|
@ -34,14 +32,14 @@ directives: {
|
||||||
|
|
||||||
</code></pre>
|
</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>
|
<pre v-code><code><template v-pre>
|
||||||
<div class="p-ripple" v-ripple></div>
|
<div class="p-ripple" v-ripple></div>
|
||||||
</template>
|
</template>
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Styling</h5>
|
<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>
|
<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>
|
<pre v-code><code><template v-pre>
|
||||||
<div class="p-ripple purple" v-ripple></div>
|
<div class="p-ripple purple" v-ripple></div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -55,59 +53,62 @@ directives: {
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
|
|
||||||
<h5>Styling</h5>
|
<h5>Styling</h5>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
<th>Element</th>
|
<th>Element</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-ripple</td>
|
<td>p-ripple</td>
|
||||||
<td>Host element.</td>
|
<td>Host element.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-ink</td>
|
<td>p-ink</td>
|
||||||
<td>Ripple element.</td>
|
<td>Ripple element.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-ink-active</td>
|
<td>p-ink-active</td>
|
||||||
<td>Ripple element during animating.</td>
|
<td>Ripple element during animating.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Dependencies</h5>
|
<h5>Dependencies</h5>
|
||||||
<p>None.</p>
|
<p>None.</p>
|
||||||
</TabPanel>
|
</AppDoc>
|
||||||
|
|
||||||
<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>
|
|
||||||
<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>
|
|
||||||
</template>
|
</template>
|
||||||
</code></pre>
|
|
||||||
|
|
||||||
<pre v-code.script><code>
|
<script>
|
||||||
export default {}
|
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) {
|
::v-deep(.card-container) {
|
||||||
.card {
|
.card {
|
||||||
width: 75px;
|
width: 75px;
|
||||||
|
|
@ -118,6 +119,11 @@ export default {}
|
||||||
margin-right: 1rem;
|
margin-right: 1rem;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
padding: 0;
|
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 {
|
&.primary-box {
|
||||||
background-color: var(--primary-color);
|
background-color: var(--primary-color);
|
||||||
|
|
@ -148,37 +154,28 @@ export default {}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
</style>`
|
||||||
</code></pre>
|
},
|
||||||
</TabPanel>
|
'composition-api': {
|
||||||
</TabView>
|
tabName: 'Composition API',
|
||||||
</div>
|
content: `
|
||||||
</template>
|
<template>
|
||||||
|
<div>
|
||||||
<script>
|
<div class="card-container p-d-flex">
|
||||||
import LiveEditor from '../liveeditor/LiveEditor';
|
<div class="card primary-box p-ripple" v-ripple>Default</div>
|
||||||
export default {
|
<div class="card styled-box-green p-ripple" v-ripple>Green</div>
|
||||||
data() {
|
<div class="card styled-box-orange p-ripple" v-ripple>Orange</div>
|
||||||
return {
|
<div class="card styled-box-purple p-ripple" v-ripple>Purple</div>
|
||||||
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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
}`,
|
}
|
||||||
style: `<style lang="scss" scoped>
|
<\\/script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
::v-deep(.card-container) {
|
::v-deep(.card-container) {
|
||||||
.card {
|
.card {
|
||||||
width: 75px;
|
width: 75px;
|
||||||
|
|
@ -189,6 +186,11 @@ export default {
|
||||||
margin-right: 1rem;
|
margin-right: 1rem;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
padding: 0;
|
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 {
|
&.primary-box {
|
||||||
background-color: var(--primary-color);
|
background-color: var(--primary-color);
|
||||||
|
|
@ -223,9 +225,6 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
|
||||||
components: {
|
|
||||||
LiveEditor
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -1,30 +1,28 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="content-section documentation">
|
<AppDoc name="ScrollTopDemo" :sources="sources">
|
||||||
<TabView>
|
<h5>Import</h5>
|
||||||
<TabPanel header="Documentation">
|
|
||||||
<h5>Import</h5>
|
|
||||||
<pre v-code.script><code>
|
<pre v-code.script><code>
|
||||||
import ScrollTop from 'primevue/scrolltop';
|
import ScrollTop from 'primevue/scrolltop';
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Getting Started</h5>
|
<h5>Getting Started</h5>
|
||||||
<p>Without any configuration, ScrollTop listens window scroll.</p>
|
<p>Without any configuration, ScrollTop listens window scroll.</p>
|
||||||
<pre v-code><code>
|
<pre v-code><code>
|
||||||
<ScrollTop />
|
<ScrollTop />
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Threshold</h5>
|
<h5>Threshold</h5>
|
||||||
<p>When the vertical scroll position reaches a certain value, ScrollTop gets displayed. This value is
|
<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>
|
defined with the <i>threshold</i> property that defaults to 400.</p>
|
||||||
<pre v-code><code>
|
<pre v-code><code>
|
||||||
<ScrollTop :threshold="200" />
|
<ScrollTop :threshold="200" />
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Target Element</h5>
|
<h5>Target Element</h5>
|
||||||
<p>ScrollTop can also be assigned to its parent element by setting <i>target</i> as "parent".</p>
|
<p>ScrollTop can also be assigned to its parent element by setting <i>target</i> as "parent".</p>
|
||||||
<pre v-code><code>
|
<pre v-code><code>
|
||||||
<div style="height: 400px; overflow: auto">
|
<div style="height: 400px; overflow: auto">
|
||||||
Content that overflows to container
|
Content that overflows to container
|
||||||
|
|
@ -33,113 +31,122 @@ import ScrollTop from 'primevue/scrolltop';
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Properties</h5>
|
<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>
|
<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">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
<th>Type</th>
|
<th>Type</th>
|
||||||
<th>Default</th>
|
<th>Default</th>
|
||||||
<th>Description</th>
|
<th>Description</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>target</td>
|
<td>target</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>window</td>
|
<td>window</td>
|
||||||
<td>Target of the ScrollTop, valid values are "window" and "parent".</td>
|
<td>Target of the ScrollTop, valid values are "window" and "parent".</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>threshold</td>
|
<td>threshold</td>
|
||||||
<td>number</td>
|
<td>number</td>
|
||||||
<td>400</td>
|
<td>400</td>
|
||||||
<td>Defines the threshold value of the vertical scroll position of the target to toggle the visibility.</td>
|
<td>Defines the threshold value of the vertical scroll position of the target to toggle the visibility.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>icon</td>
|
<td>icon</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>pi pi-chevron-up</td>
|
<td>pi pi-chevron-up</td>
|
||||||
<td>Icon to display.</td>
|
<td>Icon to display.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>behavior</td>
|
<td>behavior</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>smooth</td>
|
<td>smooth</td>
|
||||||
<td>Defines the scrolling behavi, "smooth" adds an animation and "auto" scrolls with a jump.</td>
|
<td>Defines the scrolling behavi, "smooth" adds an animation and "auto" scrolls with a jump.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Styling</h5>
|
<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>
|
<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">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
<th>Element</th>
|
<th>Element</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-scrolltop</td>
|
<td>p-scrolltop</td>
|
||||||
<td>Container element.</td>
|
<td>Container element.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-scrolltop-sticky</td>
|
<td>p-scrolltop-sticky</td>
|
||||||
<td>Container element when attached to its parent.</td>
|
<td>Container element when attached to its parent.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Dependencies</h5>
|
<h5>Dependencies</h5>
|
||||||
<p>None.</p>
|
<p>None.</p>
|
||||||
</TabPanel>
|
</AppDoc>
|
||||||
|
|
||||||
<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>
|
|
||||||
<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>
|
|
||||||
</template>
|
</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) {
|
::v-deep(.custom-scrolltop) {
|
||||||
width: 2rem;
|
width: 2rem;
|
||||||
height: 2rem;
|
height: 2rem;
|
||||||
|
border-radius: 4px;
|
||||||
background-color: var(--primary-color);
|
background-color: var(--primary-color);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: var(--primary-color);
|
background-color: var(--primary-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -148,54 +155,43 @@ import ScrollTop from 'primevue/scrolltop';
|
||||||
color: var(--primary-color-text);
|
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>
|
<h5>Element</h5>
|
||||||
</TabPanel>
|
<ScrollPanel style="width: 250px; height: 200px">
|
||||||
</TabView>
|
<p>
|
||||||
</div>
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||||
</template>
|
Vitae et leo duis ut diam.
|
||||||
|
Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut.
|
||||||
<script>
|
Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna.
|
||||||
import LiveEditor from '../liveeditor/LiveEditor';
|
Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris.
|
||||||
export default {
|
Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales.
|
||||||
data() {
|
Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus.
|
||||||
return {
|
Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas.
|
||||||
sources: {
|
Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.
|
||||||
'template': {
|
Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.
|
||||||
content: `<template>
|
Mattis aliquam faucibus purus in massa tempor nec.
|
||||||
<div class="layout-content">
|
</p>
|
||||||
<div class="content-section implementation">
|
<ScrollTop target="parent" :threshold="100" class="custom-scrolltop" icon="pi pi-arrow-up" />
|
||||||
<div class="card">
|
</ScrollPanel>
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
} `,
|
}
|
||||||
style: `<style lang="scss" scoped>
|
<\\/script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
::v-deep(.custom-scrolltop) {
|
::v-deep(.custom-scrolltop) {
|
||||||
width: 2rem;
|
width: 2rem;
|
||||||
height: 2rem;
|
height: 2rem;
|
||||||
|
|
@ -215,9 +211,6 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
|
||||||
components: {
|
|
||||||
LiveEditor
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -1,417 +1,270 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="content-section documentation">
|
<AppDoc name="SkeletonDemo" :sources="sources">
|
||||||
<TabView>
|
<h5>Import</h5>
|
||||||
<TabPanel header="Documentation">
|
|
||||||
<h5>Import</h5>
|
|
||||||
<pre v-code.script><code>
|
<pre v-code.script><code>
|
||||||
import Skeleton from 'primevue/skeleton';
|
import Skeleton from 'primevue/skeleton';
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Getting Started</h5>
|
<h5>Getting Started</h5>
|
||||||
<p>Skeleton displays a rectangle in its simplest form.</p>
|
<p>Skeleton displays a rectangle in its simplest form.</p>
|
||||||
<pre v-code><code>
|
<pre v-code><code>
|
||||||
<Skeleton />
|
<Skeleton />
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Circle</h5>
|
<h5>Circle</h5>
|
||||||
<p>The other option is the circle by setting <i>shape</i> property as "circle".</p>
|
<p>The other option is the circle by setting <i>shape</i> property as "circle".</p>
|
||||||
<pre v-code><code>
|
<pre v-code><code>
|
||||||
<Skeleton shape="circle"/>
|
<Skeleton shape="circle"/>
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Size</h5>
|
<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>
|
<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>
|
<pre v-code><code>
|
||||||
<Skeleton width="100%" height="2rem" />
|
<Skeleton width="100%" height="2rem" />
|
||||||
<Skeleton shape="circle" size="50px" />
|
<Skeleton shape="circle" size="50px" />
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Border Radius</h5>
|
<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>
|
<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>
|
<pre v-code><code>
|
||||||
<Skeleton borderRadius="16px" />
|
<Skeleton borderRadius="16px" />
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Animation</h5>
|
<h5>Animation</h5>
|
||||||
<p>Animation can be turned of by setting <i>animation</i> to "none".</p>
|
<p>Animation can be turned of by setting <i>animation</i> to "none".</p>
|
||||||
<pre v-code><code>
|
<pre v-code><code>
|
||||||
<Skeleton animation="none" />
|
<Skeleton animation="none" />
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Properties</h5>
|
<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>
|
<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">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
<th>Type</th>
|
<th>Type</th>
|
||||||
<th>Default</th>
|
<th>Default</th>
|
||||||
<th>Description</th>
|
<th>Description</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>shape</td>
|
<td>shape</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>rectangle</td>
|
<td>rectangle</td>
|
||||||
<td>Shape of the element, options are "rectangle" and "circle".</td>
|
<td>Shape of the element, options are "rectangle" and "circle".</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>size</td>
|
<td>size</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>null</td>
|
<td>null</td>
|
||||||
<td>Size of the Circle or Square.</td>
|
<td>Size of the Circle or Square.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>width</td>
|
<td>width</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>100%</td>
|
<td>100%</td>
|
||||||
<td>Width of the element.</td>
|
<td>Width of the element.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>height</td>
|
<td>height</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>1rem</td>
|
<td>1rem</td>
|
||||||
<td>Height of the element.</td>
|
<td>Height of the element.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>borderRadius</td>
|
<td>borderRadius</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>null</td>
|
<td>null</td>
|
||||||
<td>Border radius of the element, defaults to value from theme.</td>
|
<td>Border radius of the element, defaults to value from theme.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>animation</td>
|
<td>animation</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>wave</td>
|
<td>wave</td>
|
||||||
<td>Type of the animation, valid options are "wave" and "none".</td>
|
<td>Type of the animation, valid options are "wave" and "none".</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Styling</h5>
|
<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>
|
<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">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
<th>Element</th>
|
<th>Element</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-skeleton</td>
|
<td>p-skeleton</td>
|
||||||
<td>Container element.</td>
|
<td>Container element.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-skeleton-circle</td>
|
<td>p-skeleton-circle</td>
|
||||||
<td>Container element of a determinate progressbar.</td>
|
<td>Container element of a determinate progressbar.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-skeleton-animation-none</td>
|
<td>p-skeleton-animation-none</td>
|
||||||
<td>Container element of an indeterminate progressbar.</td>
|
<td>Container element of an indeterminate progressbar.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Dependencies</h5>
|
<h5>Dependencies</h5>
|
||||||
<p>None.</p>
|
<p>None.</p>
|
||||||
</TabPanel>
|
</AppDoc>
|
||||||
|
|
||||||
<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>
|
|
||||||
<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">
|
|
||||||
<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>
|
|
||||||
</template>
|
|
||||||
</code></pre>
|
|
||||||
|
|
||||||
</TabPanel>
|
|
||||||
</TabView>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import LiveEditor from '../liveeditor/LiveEditor';
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
sources: {
|
sources: {
|
||||||
'template': {
|
'options-api': {
|
||||||
content: `<template>
|
tabName: 'Source',
|
||||||
<div class="layout-content">
|
content: `
|
||||||
<div class="content-section implementation">
|
<template>
|
||||||
<div class="card">
|
<div>
|
||||||
<div class="p-grid p-formgrid">
|
<div class="card">
|
||||||
<div class="p-field p-col-12 p-md-6">
|
<div class="p-grid p-formgrid">
|
||||||
<h5>Rectangle</h5>
|
<div class="p-field p-col-12 p-md-6">
|
||||||
<Skeleton class="p-mb-2"></Skeleton>
|
<h5>Rectangle</h5>
|
||||||
<Skeleton width="10rem" class="p-mb-2"></Skeleton>
|
<Skeleton class="p-mb-2"></Skeleton>
|
||||||
<Skeleton width="5rem" class="p-mb-2"></Skeleton>
|
<Skeleton width="10rem" class="p-mb-2"></Skeleton>
|
||||||
<Skeleton height="2rem" class="p-mb-2"></Skeleton>
|
<Skeleton width="5rem" class="p-mb-2"></Skeleton>
|
||||||
<Skeleton width="10rem" height="4rem"></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">
|
</div>
|
||||||
<h5>Rounded</h5>
|
<div class="p-field p-col-12 p-md-6">
|
||||||
<Skeleton class="p-mb-2" borderRadius="16px"></Skeleton>
|
<h5 class="p-mt-3">Circle</h5>
|
||||||
<Skeleton width="10rem" class="p-mb-2" borderRadius="16px"></Skeleton>
|
<div class="p-d-flex p-ai-end">
|
||||||
<Skeleton width="5rem" borderRadius="16px" class="p-mb-2"></Skeleton>
|
<Skeleton shape="circle" size="2rem" class="p-mr-2"></Skeleton>
|
||||||
<Skeleton height="2rem" class="p-mb-2" borderRadius="16px"></Skeleton>
|
<Skeleton shape="circle" size="3rem" class="p-mr-2"></Skeleton>
|
||||||
<Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
|
<Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
|
||||||
|
<Skeleton shape="circle" size="5rem"></Skeleton>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-field p-col-12 p-md-6">
|
</div>
|
||||||
<h5 class="p-mt-3">Square</h5>
|
</div>
|
||||||
<div class="p-d-flex p-ai-end">
|
</div>
|
||||||
<Skeleton size="2rem" class="p-mr-2"></Skeleton>
|
|
||||||
<Skeleton size="3rem" class="p-mr-2"></Skeleton>
|
<div class="card">
|
||||||
<Skeleton size="4rem" class="p-mr-2"></Skeleton>
|
<div class="p-grid p-formgrid">
|
||||||
<Skeleton size="5rem"></Skeleton>
|
<div class="p-field p-col-12 p-md-6 p-pr-md-6 p-pr-0">
|
||||||
</div>
|
<h5>Card</h5>
|
||||||
</div>
|
<div class="custom-skeleton p-p-4">
|
||||||
<div class="p-field p-col-12 p-md-6">
|
<div class="p-d-flex p-mb-3">
|
||||||
<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="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>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card">
|
<div class="p-field p-col-12 p-md-6">
|
||||||
<div class="p-grid p-formgrid">
|
<h5>List</h5>
|
||||||
<div class="p-field p-col-12 p-md-6 p-pr-md-6 p-pr-0">
|
<div class="custom-skeleton p-p-4">
|
||||||
<h5>Card</h5>
|
<ul class="p-m-0 p-p-0">
|
||||||
<div class="custom-skeleton p-p-4">
|
<li class="p-mb-3">
|
||||||
<div class="p-d-flex p-mb-3">
|
<div class="p-d-flex">
|
||||||
<Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
|
<Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
|
||||||
<div>
|
<div style="flex: 1">
|
||||||
<Skeleton width="10rem" class="p-mb-2"></Skeleton>
|
<Skeleton width="100%" class="p-mb-2"></Skeleton>
|
||||||
<Skeleton width="5rem" class="p-mb-2"></Skeleton>
|
<Skeleton width="75%"></Skeleton>
|
||||||
<Skeleton height=".5rem"></Skeleton>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</li>
|
||||||
<Skeleton width="100%" height="150px"></Skeleton>
|
<li class="p-mb-3">
|
||||||
<div class="p-d-flex p-jc-between p-mt-3">
|
<div class="p-d-flex">
|
||||||
<Skeleton width="4rem" height="2rem"></Skeleton>
|
<Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
|
||||||
<Skeleton width="4rem" height="2rem"></Skeleton>
|
<div style="flex: 1">
|
||||||
</div>
|
<Skeleton width="100%" class="p-mb-2"></Skeleton>
|
||||||
</div>
|
<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>
|
||||||
<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>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -423,8 +276,170 @@ export default {
|
||||||
products: new Array(5)
|
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 {
|
.custom-skeleton {
|
||||||
border: 1px solid var(--surface-d);
|
border: 1px solid var(--surface-d);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
|
@ -437,9 +452,6 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
|
||||||
components: {
|
|
||||||
LiveEditor
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<AppDoc :sources="sources" :extPages="pages">
|
<AppDoc name="StepsDemo" :sources="sources" :extPages="pages">
|
||||||
<h5>Import</h5>
|
<h5>Import</h5>
|
||||||
<pre v-code.script><code>
|
<pre v-code.script><code>
|
||||||
import Steps from 'primevue/steps';
|
import Steps from 'primevue/steps';
|
||||||
|
|
|
||||||
|
|
@ -1,39 +1,37 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="content-section documentation">
|
<AppDoc name="TagDemo" :sources="sources">
|
||||||
<TabView>
|
<h5>Import</h5>
|
||||||
<TabPanel header="Documentation">
|
|
||||||
<h5>Import</h5>
|
|
||||||
<pre v-code.script><code>
|
<pre v-code.script><code>
|
||||||
import Tag from 'primevue/tag';
|
import Tag from 'primevue/tag';
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Getting Started</h5>
|
<h5>Getting Started</h5>
|
||||||
<p>Content of the tag is specified using the <i>value</i> property.</p>
|
<p>Content of the tag is specified using the <i>value</i> property.</p>
|
||||||
<pre v-code><code>
|
<pre v-code><code>
|
||||||
<Tag value="New"></Tag>
|
<Tag value="New"></Tag>
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Icon</h5>
|
<h5>Icon</h5>
|
||||||
<p>An icon can also be configured to be displayed next to the value with the <i>icon</i> property.</p>
|
<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>
|
<pre v-code><code>
|
||||||
<Tag value="New" icon="pi pi-plus"></Tag>
|
<Tag value="New" icon="pi pi-plus"></Tag>
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Severities</h5>
|
<h5>Severities</h5>
|
||||||
<p>Different color options are available as severity levels.</p>
|
<p>Different color options are available as severity levels.</p>
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li>success</li>
|
<li>success</li>
|
||||||
<li>info</li>
|
<li>info</li>
|
||||||
<li>warning</li>
|
<li>warning</li>
|
||||||
<li>danger</li>
|
<li>danger</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<h5>Templating</h5>
|
<h5>Templating</h5>
|
||||||
<p>Content can easily be customized with the default slot instead of using the built-in display.</p>
|
<p>Content can easily be customized with the default slot instead of using the built-in display.</p>
|
||||||
<pre v-code><code>
|
<pre v-code><code>
|
||||||
<Tag>
|
<Tag>
|
||||||
Content
|
Content
|
||||||
|
|
@ -41,162 +39,158 @@ import Tag from 'primevue/tag';
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Properties</h5>
|
<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>
|
<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">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
<th>Type</th>
|
<th>Type</th>
|
||||||
<th>Default</th>
|
<th>Default</th>
|
||||||
<th>Description</th>
|
<th>Description</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>value</td>
|
<td>value</td>
|
||||||
<td>any</td>
|
<td>any</td>
|
||||||
<td>null</td>
|
<td>null</td>
|
||||||
<td>Value to display inside the tag.</td>
|
<td>Value to display inside the tag.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>severity</td>
|
<td>severity</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>null</td>
|
<td>null</td>
|
||||||
<td>Severity type of the tag.</td>
|
<td>Severity type of the tag.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>rounded</td>
|
<td>rounded</td>
|
||||||
<td>boolean</td>
|
<td>boolean</td>
|
||||||
<td>false</td>
|
<td>false</td>
|
||||||
<td>Whether the corners of the tag are rounded.</td>
|
<td>Whether the corners of the tag are rounded.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>icon</td>
|
<td>icon</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>null</td>
|
<td>null</td>
|
||||||
<td>Icon of the tag to display next to the value.</td>
|
<td>Icon of the tag to display next to the value.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Styling</h5>
|
<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>
|
<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">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
<th>Element</th>
|
<th>Element</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-tag</td>
|
<td>p-tag</td>
|
||||||
<td>Tag element</td>
|
<td>Tag element</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-tag-rounded</td>
|
<td>p-tag-rounded</td>
|
||||||
<td>Rounded element</td>
|
<td>Rounded element</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-tag-icon</td>
|
<td>p-tag-icon</td>
|
||||||
<td>Icon of the tag</td>
|
<td>Icon of the tag</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-tag-value</td>
|
<td>p-tag-value</td>
|
||||||
<td>Value of the tag</td>
|
<td>Value of the tag</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Dependencies</h5>
|
<h5>Dependencies</h5>
|
||||||
<p>None.</p>
|
<p>None.</p>
|
||||||
</TabPanel>
|
</AppDoc>
|
||||||
|
|
||||||
<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>
|
|
||||||
<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>
|
|
||||||
</template>
|
|
||||||
</code></pre>
|
|
||||||
</TabPanel>
|
|
||||||
</TabView>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import LiveEditor from '../liveeditor/LiveEditor';
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
sources: {
|
sources: {
|
||||||
'template': {
|
'options-api': {
|
||||||
content: `<template>
|
tabName: 'Source',
|
||||||
<div class="layout-content">
|
content: `
|
||||||
<div class="content-section implementation">
|
<template>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<h5>Tags</h5>
|
<h5>Tags</h5>
|
||||||
<Tag class="p-mr-2" value="Primary"></Tag>
|
<Tag class="p-mr-2" value="Primary"></Tag>
|
||||||
<Tag class="p-mr-2" severity="success" value="Success"></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="info" value="Info"></Tag>
|
||||||
<Tag class="p-mr-2" severity="warning" value="Warning"></Tag>
|
<Tag class="p-mr-2" severity="warning" value="Warning"></Tag>
|
||||||
<Tag severity="danger" value="Danger"></Tag>
|
<Tag severity="danger" value="Danger"></Tag>
|
||||||
|
|
||||||
<h5>Pills</h5>
|
<h5>Pills</h5>
|
||||||
<Tag class="p-mr-2" value="Primary" rounded></Tag>
|
<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="success" value="Success" rounded></Tag>
|
||||||
<Tag class="p-mr-2" severity="info" value="Info" 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 class="p-mr-2" severity="warning" value="Warning" rounded></Tag>
|
||||||
<Tag severity="danger" value="Danger" rounded></Tag>
|
<Tag severity="danger" value="Danger" rounded></Tag>
|
||||||
|
|
||||||
<h5>Icons</h5>
|
<h5>Icons</h5>
|
||||||
<Tag class="p-mr-2" icon="pi pi-user" value="Primary"></Tag>
|
<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-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-info-circle" severity="info" value="Info"></Tag>
|
||||||
<Tag class="p-mr-2" icon="pi pi-exclamation-triangle" severity="warning" value="Warning"></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>
|
<Tag icon="pi pi-times" severity="danger" value="Danger"></Tag>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
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>
|
</script>
|
||||||
|
|
@ -1,18 +1,16 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="content-section documentation">
|
<AppDoc name="TerminalDemo" :sources="sources">
|
||||||
<TabView>
|
<h5>Import</h5>
|
||||||
<TabPanel header="Documentation">
|
|
||||||
<h5>Import</h5>
|
|
||||||
<pre v-code.script><code>
|
<pre v-code.script><code>
|
||||||
import Terminal from 'primevue/terminal';
|
import Terminal from 'primevue/terminal';
|
||||||
import TerminalService from 'primevue/terminalservice';
|
import TerminalService from 'primevue/terminalservice';
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Getting Started</h5>
|
<h5>Getting Started</h5>
|
||||||
<p>Commands are processed using an EventBus implementation called TerminalService.
|
<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
|
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>
|
sending replies with the <i>response</i> event.</p>
|
||||||
<pre v-code><code>
|
<pre v-code><code>
|
||||||
<Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" />
|
<Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" />
|
||||||
|
|
||||||
|
|
@ -58,175 +56,93 @@ export default {
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Properties</h5>
|
<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>
|
<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">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
<th>Type</th>
|
<th>Type</th>
|
||||||
<th>Default</th>
|
<th>Default</th>
|
||||||
<th>Description</th>
|
<th>Description</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>welcomeMessage</td>
|
<td>welcomeMessage</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>null</td>
|
<td>null</td>
|
||||||
<td>Initial text to display on terminal.</td>
|
<td>Initial text to display on terminal.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>prompt</td>
|
<td>prompt</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>null</td>
|
<td>null</td>
|
||||||
<td>Prompt text for each command.</td>
|
<td>Prompt text for each command.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Styling</h5>
|
<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>
|
<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">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
<th>Element</th>
|
<th>Element</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-terminal</td>
|
<td>p-terminal</td>
|
||||||
<td>Container element.</td>
|
<td>Container element.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-terminal-content</td>
|
<td>p-terminal-content</td>
|
||||||
<td>Content of terminal.</td>
|
<td>Content of terminal.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-terminal-prompt</td>
|
<td>p-terminal-prompt</td>
|
||||||
<td>Prompt text.</td>
|
<td>Prompt text.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-terminal-response</td>
|
<td>p-terminal-response</td>
|
||||||
<td>Command response.</td>
|
<td>Command response.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-terminal-input</td>
|
<td>p-terminal-input</td>
|
||||||
<td>Input element to enter commands.</td>
|
<td>Input element to enter commands.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Dependencies</h5>
|
<h5>Dependencies</h5>
|
||||||
<p>None.</p>
|
<p>None.</p>
|
||||||
</TabPanel>
|
</AppDoc>
|
||||||
|
|
||||||
<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>
|
|
||||||
<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" />
|
|
||||||
|
|
||||||
</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>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import LiveEditor from '../liveeditor/LiveEditor';
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
sources: {
|
sources: {
|
||||||
'template': {
|
'options-api': {
|
||||||
content: `<template>
|
tabName: 'Source',
|
||||||
<div class="layout-content">
|
content: `
|
||||||
<div class="content-section implementation">
|
<template>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<p>Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.</p>
|
<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" />
|
<Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" class="dark-demo-terminal" />
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import TerminalService from "primevue/terminalservice";
|
import TerminalService from "primevue/terminalservice";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
methods: {
|
methods: {
|
||||||
commandHandler(text) {
|
commandHandler(text) {
|
||||||
|
|
@ -260,8 +176,87 @@ export default {
|
||||||
beforeUnmount() {
|
beforeUnmount() {
|
||||||
TerminalService.off('command', this.commandHandler);
|
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 {
|
p {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
@ -286,9 +281,6 @@ p {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
|
||||||
components: {
|
|
||||||
LiveEditor
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -1,10 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="content-section documentation">
|
<AppDoc name="ToastDemo" :sources="sources">
|
||||||
<TabView>
|
<h5>ToastService</h5>
|
||||||
<TabPanel header="Documentation">
|
<p>Toast messages are dynamically created using a <i>ToastService</i> that needs to be installed globally before the application
|
||||||
<h5>ToastService</h5>
|
instance is created.</p>
|
||||||
<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>
|
<pre v-code.script><code>
|
||||||
import {createApp} from 'vue';
|
import {createApp} from 'vue';
|
||||||
import ToastService from 'primevue/toastservice';
|
import ToastService from 'primevue/toastservice';
|
||||||
|
|
@ -14,18 +12,18 @@ app.use(ToastService);
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Import</h5>
|
<h5>Import</h5>
|
||||||
<pre v-code.script><code>
|
<pre v-code.script><code>
|
||||||
import Toast from 'primevue/toast';
|
import Toast from 'primevue/toast';
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Getting Started</h5>
|
<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,
|
<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>
|
summary and detail.</p>
|
||||||
|
|
||||||
<h5>Options API</h5>
|
<h5>Options API</h5>
|
||||||
<p><i>$toast</i> is available as a property in the application instance.</p>
|
<p><i>$toast</i> is available as a property in the application instance.</p>
|
||||||
<pre v-code.script><code>
|
<pre v-code.script><code>
|
||||||
export default {
|
export default {
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
@ -35,8 +33,8 @@ export default {
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Composition API</h5>
|
<h5>Composition API</h5>
|
||||||
<p>The toast instance can be injected with the <i>useToast</i> function.</p>
|
<p>The toast instance can be injected with the <i>useToast</i> function.</p>
|
||||||
<pre v-code.script><code>
|
<pre v-code.script><code>
|
||||||
import { defineComponent } from "vue";
|
import { defineComponent } from "vue";
|
||||||
import { useToast } from "primevue/usetoast";
|
import { useToast } from "primevue/usetoast";
|
||||||
|
|
@ -50,103 +48,103 @@ export default defineComponent({
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Message API</h5>
|
<h5>Message API</h5>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
<th>Type</th>
|
<th>Type</th>
|
||||||
<th>Default</th>
|
<th>Default</th>
|
||||||
<th>Description</th>
|
<th>Description</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>severity</td>
|
<td>severity</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>null</td>
|
<td>null</td>
|
||||||
<td>Severity of the message.</td>
|
<td>Severity of the message.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>summary</td>
|
<td>summary</td>
|
||||||
<td>element</td>
|
<td>element</td>
|
||||||
<td>null</td>
|
<td>null</td>
|
||||||
<td>Summary content of the message.</td>
|
<td>Summary content of the message.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>detail</td>
|
<td>detail</td>
|
||||||
<td>element</td>
|
<td>element</td>
|
||||||
<td>null</td>
|
<td>null</td>
|
||||||
<td>Detail content of the message.</td>
|
<td>Detail content of the message.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>closable</td>
|
<td>closable</td>
|
||||||
<td>boolean</td>
|
<td>boolean</td>
|
||||||
<td>true</td>
|
<td>true</td>
|
||||||
<td>Whether the message can be closed manually using the close icon.</td>
|
<td>Whether the message can be closed manually using the close icon.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>life</td>
|
<td>life</td>
|
||||||
<td>number</td>
|
<td>number</td>
|
||||||
<td>null</td>
|
<td>null</td>
|
||||||
<td>Delay in milliseconds to close the message automatically.</td>
|
<td>Delay in milliseconds to close the message automatically.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>group</td>
|
<td>group</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>null</td>
|
<td>null</td>
|
||||||
<td>Key of the Toast to display the message.</td>
|
<td>Key of the Toast to display the message.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>MessageService API</h5>
|
<h5>MessageService API</h5>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
<th>Type</th>
|
<th>Type</th>
|
||||||
<th>Default</th>
|
<th>Default</th>
|
||||||
<th>Description</th>
|
<th>Description</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>add</td>
|
<td>add</td>
|
||||||
<td>message: Message instance</td>
|
<td>message: Message instance</td>
|
||||||
<td>Displays the message in a suitable Toast component.</td>
|
<td>Displays the message in a suitable Toast component.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>removeGroup</td>
|
<td>removeGroup</td>
|
||||||
<td>group: Name of the message group</td>
|
<td>group: Name of the message group</td>
|
||||||
<td>Clears the messages that belongs to the group.</td>
|
<td>Clears the messages that belongs to the group.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>removeAllGroup</td>
|
<td>removeAllGroup</td>
|
||||||
<td>-</td>
|
<td>-</td>
|
||||||
<td>Clears all the messages.</td>
|
<td>Clears all the messages.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Severities</h5>
|
<h5>Severities</h5>
|
||||||
<p>There are four possible values for the severity of a message. Info is the default.</p>
|
<p>There are four possible values for the severity of a message. Info is the default.</p>
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li>success</li>
|
<li>success</li>
|
||||||
<li>info</li>
|
<li>info</li>
|
||||||
<li>warn</li>
|
<li>warn</li>
|
||||||
<li>error</li>
|
<li>error</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<h5>Position</h5>
|
<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
|
<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".
|
valid values are "top-left", "top-center", "bottom-left", "botton-center", "bottom-right" and "center".
|
||||||
</p>
|
</p>
|
||||||
<pre v-code><code>
|
<pre v-code><code>
|
||||||
<Toast />
|
<Toast />
|
||||||
<Toast position="top-left" />
|
<Toast position="top-left" />
|
||||||
|
|
@ -159,10 +157,10 @@ export default defineComponent({
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Groups</h5>
|
<h5>Groups</h5>
|
||||||
<p>A message can be targeted to a specific Toast component if their group properties match. Messages without a group
|
<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.
|
are forwarded to the default Toast component that does not have a group defined.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<pre v-code><code>
|
<pre v-code><code>
|
||||||
<Toast />
|
<Toast />
|
||||||
|
|
@ -176,207 +174,130 @@ this.$toast.add({severity:'success', summary: 'Specific Message', group: 'mykey'
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Clearing Messages</h5>
|
<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>
|
<p><i>removeGroup(group)</i> clears the messages for a specific Toast whereas <i>removeAllGroups()</i> method clears all messages.</p>
|
||||||
|
|
||||||
<h5>Properties</h5>
|
<h5>Properties</h5>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
<th>Type</th>
|
<th>Type</th>
|
||||||
<th>Default</th>
|
<th>Default</th>
|
||||||
<th>Description</th>
|
<th>Description</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>group</td>
|
<td>group</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>null</td>
|
<td>null</td>
|
||||||
<td>Unique identifier of a message group.</td>
|
<td>Unique identifier of a message group.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>position</td>
|
<td>position</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>top-right</td>
|
<td>top-right</td>
|
||||||
<td>Position of the toast in viewport.</td>
|
<td>Position of the toast in viewport.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>autoZIndex</td>
|
<td>autoZIndex</td>
|
||||||
<td>boolean</td>
|
<td>boolean</td>
|
||||||
<td>true</td>
|
<td>true</td>
|
||||||
<td>Whether to automatically manage layering.</td>
|
<td>Whether to automatically manage layering.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>baseZIndex</td>
|
<td>baseZIndex</td>
|
||||||
<td>number</td>
|
<td>number</td>
|
||||||
<td>0</td>
|
<td>0</td>
|
||||||
<td>Base zIndex value to use in layering.</td>
|
<td>Base zIndex value to use in layering.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Styling</h5>
|
<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>
|
<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">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
<th>Element</th>
|
<th>Element</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-toast</td>
|
<td>p-toast</td>
|
||||||
<td>Main container element.</td>
|
<td>Main container element.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-toast-message</td>
|
<td>p-toast-message</td>
|
||||||
<td>Container of a message item.</td>
|
<td>Container of a message item.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-toast-icon-close</td>
|
<td>p-toast-icon-close</td>
|
||||||
<td>Close icon of a message.</td>
|
<td>Close icon of a message.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-toast-icon</td>
|
<td>p-toast-icon</td>
|
||||||
<td>Severity icon.</td>
|
<td>Severity icon.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-toast-message-content</td>
|
<td>p-toast-message-content</td>
|
||||||
<td>Container of message texts.</td>
|
<td>Container of message texts.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-toast-summary</td>
|
<td>p-toast-summary</td>
|
||||||
<td>Summary of the message.</td>
|
<td>Summary of the message.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-toast-detail</td>
|
<td>p-toast-detail</td>
|
||||||
<td>Detail of the message.</td>
|
<td>Detail of the message.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Dependencies</h5>
|
<h5>Dependencies</h5>
|
||||||
<p>None.</p>
|
<p>None.</p>
|
||||||
</TabPanel>
|
</AppDoc>
|
||||||
|
|
||||||
<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>
|
|
||||||
<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>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" />
|
|
||||||
</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>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import LiveEditor from '../liveeditor/LiveEditor';
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
sources: {
|
sources: {
|
||||||
'template': {
|
'options-api': {
|
||||||
content: ` <template>
|
tabName: 'Source',
|
||||||
<div class="layout-content">
|
content: `
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
<Toast />
|
<Toast />
|
||||||
<Toast position="top-left" group="tl" />
|
<Toast position="top-left" group="tl" />
|
||||||
<Toast position="bottom-left" group="bl" />
|
<Toast position="bottom-left" group="bl" />
|
||||||
<Toast position="bottom-right" group="br" />
|
<Toast position="bottom-right" group="br" />
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="card">
|
||||||
<div class="card">
|
<h5>Severities</h5>
|
||||||
<h5>Severities</h5>
|
<Button label="Success" class="p-button-success" @click="showSuccess" />
|
||||||
<Button label="Success" class="p-button-success" @click="showSuccess" />
|
<Button label="Info" class="p-button-info" @click="showInfo" />
|
||||||
<Button label="Info" class="p-button-info" @click="showInfo" />
|
<Button label="Warn" class="p-button-warning" @click="showWarn" />
|
||||||
<Button label="Warn" class="p-button-warning" @click="showWarn" />
|
<Button label="Error" class="p-button-danger" @click="showError" />
|
||||||
<Button label="Error" class="p-button-danger" @click="showError" />
|
|
||||||
|
|
||||||
<h5>Positions</h5>
|
<h5>Positions</h5>
|
||||||
<Button label="Top Left" class="p-mr-2" @click="showTopLeft" />
|
<Button label="Top Left" class="p-mr-2" @click="showTopLeft" />
|
||||||
<Button label="Bottom Left" class="p-button-warning" @click="showBottomLeft" />
|
<Button label="Bottom Left" class="p-button-warning" @click="showBottomLeft" />
|
||||||
<Button label="Bottom Right" class="p-button-success" @click="showBottomRight" />
|
<Button label="Bottom Right" class="p-button-success" @click="showBottomRight" />
|
||||||
|
|
||||||
<h5>Options</h5>
|
<h5>Options</h5>
|
||||||
<Button @click="showMultiple" label="Multiple" class="p-button-warning" />
|
<Button @click="showMultiple" label="Multiple" class="p-button-warning" />
|
||||||
<Button @click="showSticky" label="Sticky" />
|
<Button @click="showSticky" label="Sticky" />
|
||||||
|
|
||||||
<h5>Remove All</h5>
|
<h5>Remove All</h5>
|
||||||
<Button @click="clear" label="Clear" />
|
<Button @click="clear" label="Clear" />
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -422,8 +343,10 @@ export default {
|
||||||
this.$toast.removeAllGroups();
|
this.$toast.removeAllGroups();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}`,
|
}
|
||||||
style: `<style lang="scss" scoped>
|
<\\/script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
button {
|
button {
|
||||||
min-width: 10rem;
|
min-width: 10rem;
|
||||||
margin-right: .5rem;
|
margin-right: .5rem;
|
||||||
|
|
@ -437,34 +360,34 @@ button {
|
||||||
}
|
}
|
||||||
</style>`
|
</style>`
|
||||||
},
|
},
|
||||||
'api': {
|
'composition-api': {
|
||||||
content: `<template>
|
tabName: 'Composition API',
|
||||||
<div class="layout-content">
|
content: `
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
<Toast />
|
<Toast />
|
||||||
<Toast position="top-left" group="tl" />
|
<Toast position="top-left" group="tl" />
|
||||||
<Toast position="bottom-left" group="bl" />
|
<Toast position="bottom-left" group="bl" />
|
||||||
<Toast position="bottom-right" group="br" />
|
<Toast position="bottom-right" group="br" />
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="card">
|
||||||
<div class="card">
|
<h5>Severities</h5>
|
||||||
<h5>Severities</h5>
|
<Button label="Success" class="p-button-success" @click="showSuccess" />
|
||||||
<Button label="Success" class="p-button-success" @click="showSuccess" />
|
<Button label="Info" class="p-button-info" @click="showInfo" />
|
||||||
<Button label="Info" class="p-button-info" @click="showInfo" />
|
<Button label="Warn" class="p-button-warning" @click="showWarn" />
|
||||||
<Button label="Warn" class="p-button-warning" @click="showWarn" />
|
<Button label="Error" class="p-button-danger" @click="showError" />
|
||||||
<Button label="Error" class="p-button-danger" @click="showError" />
|
|
||||||
|
|
||||||
<h5>Positions</h5>
|
<h5>Positions</h5>
|
||||||
<Button label="Top Left" class="p-mr-2" @click="showTopLeft" />
|
<Button label="Top Left" class="p-mr-2" @click="showTopLeft" />
|
||||||
<Button label="Bottom Left" class="p-button-warning" @click="showBottomLeft" />
|
<Button label="Bottom Left" class="p-button-warning" @click="showBottomLeft" />
|
||||||
<Button label="Bottom Right" class="p-button-success" @click="showBottomRight" />
|
<Button label="Bottom Right" class="p-button-success" @click="showBottomRight" />
|
||||||
|
|
||||||
<h5>Options</h5>
|
<h5>Options</h5>
|
||||||
<Button @click="showMultiple" label="Multiple" class="p-button-warning" />
|
<Button @click="showMultiple" label="Multiple" class="p-button-warning" />
|
||||||
<Button @click="showSticky" label="Sticky" />
|
<Button @click="showSticky" label="Sticky" />
|
||||||
|
|
||||||
<h5>Remove All</h5>
|
<h5>Remove All</h5>
|
||||||
<Button @click="clear" label="Clear" />
|
<Button @click="clear" label="Clear" />
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -509,10 +432,14 @@ export default defineComponent({
|
||||||
const clear = () => {
|
const clear = () => {
|
||||||
toast.removeAllGroups();
|
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 {
|
button {
|
||||||
min-width: 10rem;
|
min-width: 10rem;
|
||||||
margin-right: .5rem;
|
margin-right: .5rem;
|
||||||
|
|
@ -528,9 +455,6 @@ button {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
|
||||||
components: {
|
|
||||||
LiveEditor
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue