csb updated for components
Tuğçe Küçükoğlu
parent
5cbe0eb5a6
commit
e7dab1199c
|
|
@ -1,7 +1,5 @@
|
|||
<template>
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Documentation">
|
||||
<AppDoc name="AvatarDemo" :sources="sources">
|
||||
<h5>Import</h5>
|
||||
<pre v-code.script><code>
|
||||
import Avatar from 'primevue/avatar';
|
||||
|
|
@ -172,119 +170,18 @@ import AvatarGroup from 'primevue/avatargroup';
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel header="Source">
|
||||
<div class="p-d-flex p-jc-between">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/avatar" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<LiveEditor name="AvatarDemo" :sources="sources" :directives="['Badge']" :components="['AvatarGroup']" />
|
||||
</div>
|
||||
<pre v-code><code><template v-pre>
|
||||
<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>
|
||||
</AppDoc>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LiveEditor from '../liveeditor/LiveEditor';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sources: {
|
||||
'template': {
|
||||
content: `<template>
|
||||
<div class="layout-content">
|
||||
<div class="content-section implementation">
|
||||
'options-api': {
|
||||
tabName: 'Source',
|
||||
content: `
|
||||
<template>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="card">
|
||||
|
|
@ -370,19 +267,112 @@ export default {
|
|||
</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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
}`
|
||||
}
|
||||
<\\/script>`
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
LiveEditor
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
<template>
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Documentation">
|
||||
<AppDoc name="BadgeDemo" :sources="sources">
|
||||
<h5>Getting Started</h5>
|
||||
<p>Badge can either be used as a standalone component or as a directive.</p>
|
||||
|
||||
|
|
@ -169,53 +167,18 @@ Vue.directive('badge', BadgeDirective);
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel header="Source">
|
||||
<div class="p-d-flex p-jc-between">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/badge" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<LiveEditor name="BadgeDemo" :sources="sources" :directives="['Badge']" :components="['Button']" />
|
||||
</div>
|
||||
<pre v-code><code><template v-pre>
|
||||
<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>
|
||||
</AppDoc>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LiveEditor from '../liveeditor/LiveEditor';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sources: {
|
||||
'template': {
|
||||
content: `<template>
|
||||
<div class="layout-content">
|
||||
<div class="content-section implementation">
|
||||
'options-api': {
|
||||
tabName: 'Source',
|
||||
content: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<h5>Numbers</h5>
|
||||
<Badge value="2" class="p-mr-2"></Badge>
|
||||
|
|
@ -238,19 +201,49 @@ export default {
|
|||
<Badge value="4" class="p-mr-2" size="large" severity="warning"></Badge>
|
||||
<Badge value="6" size="xlarge" severity="success"></Badge>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
}
|
||||
<\\/script>
|
||||
`
|
||||
},
|
||||
'composition-api': {
|
||||
tabName: 'Composition API',
|
||||
content: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<h5>Numbers</h5>
|
||||
<Badge value="2" class="p-mr-2"></Badge>
|
||||
<Badge value="8" severity="success" class="p-mr-2"></Badge>
|
||||
<Badge value="4" severity="info" class="p-mr-2"></Badge>
|
||||
<Badge value="12" severity="warning" class="p-mr-2"></Badge>
|
||||
<Badge value="3" severity="danger"></Badge>
|
||||
|
||||
<h5 class="p-mb-4">Positioned Badge</h5>
|
||||
<i class="pi pi-bell p-mr-4 p-text-secondary" style="font-size: 2rem" v-badge="2"></i>
|
||||
<i class="pi pi-calendar p-mr-4 p-text-secondary" style="font-size: 2rem" v-badge.danger="'10+'"></i>
|
||||
<i class="pi pi-envelope p-text-secondary" style="font-size: 2rem" v-badge.danger></i>
|
||||
|
||||
<h5>Button Badge</h5>
|
||||
<Button type="button" label="Emails" badge="8" class="p-mr-2" />
|
||||
<Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
|
||||
|
||||
<h5>Sizes</h5>
|
||||
<Badge value="2" class="p-mr-2"></Badge>
|
||||
<Badge value="4" class="p-mr-2" size="large" severity="warning"></Badge>
|
||||
<Badge value="6" size="xlarge" severity="success"></Badge>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
}`
|
||||
}
|
||||
<\\/script>`
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
LiveEditor
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,7 +1,5 @@
|
|||
<template>
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Documentation">
|
||||
<AppDoc name="BlockUIDemo" :sources="sources">
|
||||
<h5>Import</h5>
|
||||
<pre v-code.script><code>
|
||||
import BlockUI from 'primevue/blockui';
|
||||
|
|
@ -139,77 +137,18 @@ export default {
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel header="Source">
|
||||
<div class="p-d-flex p-jc-between">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/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>
|
||||
</AppDoc>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LiveEditor from '../liveeditor/LiveEditor';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sources: {
|
||||
'template': {
|
||||
content: `<template>
|
||||
<div class="layout-content">
|
||||
<div class="content-section implementation">
|
||||
'options-api': {
|
||||
tabName: 'Source',
|
||||
content: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<h5>Document</h5>
|
||||
<BlockUI :blocked="blockedDocument" :fullScreen="true"></BlockUI>
|
||||
|
|
@ -229,8 +168,6 @@ export default {
|
|||
</Panel>
|
||||
</BlockUI>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -256,8 +193,72 @@ export default {
|
|||
this.blockedPanel = false;
|
||||
}
|
||||
}
|
||||
}`,
|
||||
style: `<style lang="scss" scoped>
|
||||
}
|
||||
<\\/script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.p-panel p {
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
</style>`
|
||||
},
|
||||
'composition-api': {
|
||||
tabName: 'Composition API',
|
||||
content: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<h5>Document</h5>
|
||||
<BlockUI :blocked="blockedDocument" :fullScreen="true"></BlockUI>
|
||||
|
||||
<Button type="button" label="Block" @click="blockDocument()"></Button>
|
||||
|
||||
<h5>Panel</h5>
|
||||
<Button type="button" label="Block" @click="blockPanel()"></Button>
|
||||
<Button type="button" label="Unblock" @click="unblockPanel()"></Button>
|
||||
|
||||
<BlockUI :blocked="blockedPanel">
|
||||
<Panel header="Godfather I" style="margin-top: 20px">
|
||||
<p>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
||||
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
||||
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
||||
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
|
||||
</Panel>
|
||||
</BlockUI>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
const blockedPanel = ref(false);
|
||||
const blockedDocument = ref(false);
|
||||
const blockDocument = () => {
|
||||
blockedDocument.value = true;
|
||||
|
||||
setTimeout(() => {
|
||||
blockedDocument.value = false;
|
||||
}, 3000);
|
||||
};
|
||||
const blockPanel = () => {
|
||||
blockedPanel.value = true;
|
||||
};
|
||||
const unblockPanel = () => {
|
||||
blockedPanel.value = false;
|
||||
};
|
||||
|
||||
return { blockedPanel, blockedDocument, blockDocument, blockPanel, unblockPanel }
|
||||
}
|
||||
}
|
||||
<\\/script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.p-panel p {
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
|
|
@ -270,9 +271,6 @@ button {
|
|||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
LiveEditor
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,7 +1,5 @@
|
|||
<template>
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Documentation">
|
||||
<AppDoc name="CarouselDemo" :sources="sources" service="ProductService" data="products-small">
|
||||
<h5>Import</h5>
|
||||
<pre v-code.script><code>
|
||||
import Carousel from 'primevue/carousel';
|
||||
|
|
@ -290,168 +288,19 @@ data() {
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel header="Source">
|
||||
<div class="p-d-flex p-jc-between">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/carousel" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<LiveEditor name="CarouselDemo" :sources="sources" service="ProductService" data="products-small" :components="['Button']" />
|
||||
</div>
|
||||
<pre v-code><code><template v-pre>
|
||||
<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>
|
||||
</code></pre>
|
||||
|
||||
<pre v-code.script><code>
|
||||
import ProductService from '../../service/ProductService';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
products: null,
|
||||
responsiveOptions: [
|
||||
{
|
||||
breakpoint: '1024px',
|
||||
numVisible: 3,
|
||||
numScroll: 3
|
||||
},
|
||||
{
|
||||
breakpoint: '600px',
|
||||
numVisible: 2,
|
||||
numScroll: 2
|
||||
},
|
||||
{
|
||||
breakpoint: '480px',
|
||||
numVisible: 1,
|
||||
numScroll: 1
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
productService: null,
|
||||
created() {
|
||||
this.productService = new ProductService();
|
||||
},
|
||||
mounted() {
|
||||
this.productService.getProductsSmall().then(data => this.products = data.slice(0,9));
|
||||
}
|
||||
}
|
||||
|
||||
</code></pre>
|
||||
|
||||
<pre v-code.css><code>
|
||||
.product-item {
|
||||
.product-item-content {
|
||||
border: 1px solid var(--surface-d);
|
||||
border-radius: 3px;
|
||||
margin: .3rem;
|
||||
text-align: center;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
width: 50%;
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
|
||||
}
|
||||
}
|
||||
|
||||
</code></pre>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</AppDoc>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LiveEditor from '../liveeditor/LiveEditor';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sources: {
|
||||
'template': {
|
||||
content: `<template>
|
||||
<div class="layout-content">
|
||||
<div class="content-section implementation">
|
||||
'options-api': {
|
||||
tabName: 'Source',
|
||||
content: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="card">
|
||||
<Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
|
||||
<template #header>
|
||||
|
|
@ -507,7 +356,7 @@ export default {
|
|||
</div>
|
||||
|
||||
<div class="card">
|
||||
<Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="352px"
|
||||
<Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="500px"
|
||||
style="max-width: 400px; margin-top: 2em">
|
||||
<template #header>
|
||||
<h5>Vertical</h5>
|
||||
|
|
@ -534,11 +383,10 @@ export default {
|
|||
</Carousel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProductService from '../service/ProductService';
|
||||
import ProductService from './service/ProductService';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -570,8 +418,150 @@ export default {
|
|||
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-content {
|
||||
border: 1px solid var(--surface-d);
|
||||
border-radius: 3px;
|
||||
margin: .3rem;
|
||||
text-align: center;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
width: 50%;
|
||||
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>
|
||||
|
||||
<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 { ref, onMounted } from 'vue';
|
||||
import ProductService from './service/ProductService';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
onMounted(() => {
|
||||
productService.value.getProductsSmall().then(data => products.value = data.slice(0,9));
|
||||
})
|
||||
const products = ref(null);
|
||||
const productService = ref(new ProductService());
|
||||
const responsiveOptions = ref([
|
||||
{
|
||||
breakpoint: '1024px',
|
||||
numVisible: 3,
|
||||
numScroll: 3
|
||||
},
|
||||
{
|
||||
breakpoint: '600px',
|
||||
numVisible: 2,
|
||||
numScroll: 2
|
||||
},
|
||||
{
|
||||
breakpoint: '480px',
|
||||
numVisible: 1,
|
||||
numScroll: 1
|
||||
}
|
||||
]);
|
||||
|
||||
return {products, productService, responsiveOptions }
|
||||
}
|
||||
}
|
||||
<\\/script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.product-item {
|
||||
.product-item-content {
|
||||
border: 1px solid var(--surface-d);
|
||||
|
|
@ -590,9 +580,6 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
LiveEditor
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
<template>
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Documentation">
|
||||
<AppDoc name="ChipDemo" :sources="sources">
|
||||
<h5>Import</h5>
|
||||
<pre v-code.script><code>
|
||||
import Chip from 'primevue/chip';
|
||||
|
|
@ -134,106 +132,110 @@ import Chip from 'primevue/chip';
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel header="Source">
|
||||
<div class="p-d-flex p-jc-between">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/chip" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<LiveEditor name="ChipDemo" :sources="sources" />
|
||||
</div>
|
||||
<pre v-code><code><template v-pre>
|
||||
<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>
|
||||
</AppDoc>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LiveEditor from '../liveeditor/LiveEditor';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sources: {
|
||||
'template': {
|
||||
content: `<template>
|
||||
<div class="layout-content">
|
||||
<div class="content-section implementation">
|
||||
'options-api': {
|
||||
tabName: 'Source',
|
||||
content: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<h5>Basic</h5>
|
||||
<div class="p-d-flex p-ai-center">
|
||||
<Chip label="Action" class="p-mr-2" />
|
||||
<Chip label="Comedy" class="p-mr-2" />
|
||||
<Chip label="Mystery" class="p-mr-2" />
|
||||
<Chip label="Thriller" removable />
|
||||
<div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
|
||||
<Chip label="Action" class="p-mr-2 p-mb-2" />
|
||||
<Chip label="Comedy" class="p-mr-2 p-mb-2" />
|
||||
<Chip label="Mystery" class="p-mr-2 p-mb-2" />
|
||||
<Chip label="Thriller" class="p-mb-2" removable />
|
||||
</div>
|
||||
|
||||
<h5>Icon</h5>
|
||||
<div class="p-d-flex p-ai-center">
|
||||
<Chip label="Apple" icon="pi pi-apple" class="p-mr-2" />
|
||||
<Chip label="Facebook" icon="pi pi-facebook" class="p-mr-2" />
|
||||
<Chip label="Google" icon="pi pi-google" class="p-mr-2" />
|
||||
<Chip label="Microsoft" icon="pi pi-microsoft" removable />
|
||||
<div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
|
||||
<Chip label="Apple" icon="pi pi-apple" class="p-mr-2 p-mb-2" />
|
||||
<Chip label="Facebook" icon="pi pi-facebook" class="p-mr-2 p-mb-2" />
|
||||
<Chip label="Google" icon="pi pi-google" class="p-mr-2 p-mb-2" />
|
||||
<Chip label="Microsoft" icon="pi pi-microsoft" class="p-mb-2" removable />
|
||||
</div>
|
||||
|
||||
<h5>Image</h5>
|
||||
<div class="p-d-flex p-ai-center">
|
||||
<Chip label="Amy Elsner" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" />
|
||||
<Chip label="Asiya Javayant" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" />
|
||||
<Chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" />
|
||||
<Chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" removable />
|
||||
<div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
|
||||
<Chip label="Amy Elsner" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2" />
|
||||
<Chip label="Asiya Javayant" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2" />
|
||||
<Chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2" />
|
||||
<Chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mb-2" removable />
|
||||
</div>
|
||||
|
||||
<h5>Styling</h5>
|
||||
<div class="p-d-flex p-ai-center">
|
||||
<Chip label="Action" class="p-mr-2 custom-chip" />
|
||||
<Chip label="Apple" icon="pi pi-apple" class="p-mr-2 custom-chip" />
|
||||
<Chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 custom-chip" />
|
||||
<Chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="custom-chip" removable />
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
|
||||
<Chip label="Action" class="p-mr-2 p-mb-2 custom-chip" />
|
||||
<Chip label="Apple" icon="pi pi-apple" class="p-mr-2 p-mb-2 custom-chip" />
|
||||
<Chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2 custom-chip" />
|
||||
<Chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="custom-chip p-mb-2" removable />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
}`,
|
||||
style: `<style lang="scss" scoped>
|
||||
}
|
||||
<\\/script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.p-chip.custom-chip {
|
||||
background: var(--primary-color);
|
||||
color: var(--primary-color-text);
|
||||
}
|
||||
</style>`
|
||||
},
|
||||
'composition-api': {
|
||||
tabName: 'Composition API',
|
||||
content: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<h5>Basic</h5>
|
||||
<div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
|
||||
<Chip label="Action" class="p-mr-2 p-mb-2" />
|
||||
<Chip label="Comedy" class="p-mr-2 p-mb-2" />
|
||||
<Chip label="Mystery" class="p-mr-2 p-mb-2" />
|
||||
<Chip label="Thriller" class="p-mb-2" removable />
|
||||
</div>
|
||||
|
||||
<h5>Icon</h5>
|
||||
<div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
|
||||
<Chip label="Apple" icon="pi pi-apple" class="p-mr-2 p-mb-2" />
|
||||
<Chip label="Facebook" icon="pi pi-facebook" class="p-mr-2 p-mb-2" />
|
||||
<Chip label="Google" icon="pi pi-google" class="p-mr-2 p-mb-2" />
|
||||
<Chip label="Microsoft" icon="pi pi-microsoft" class="p-mb-2" removable />
|
||||
</div>
|
||||
|
||||
<h5>Image</h5>
|
||||
<div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
|
||||
<Chip label="Amy Elsner" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2" />
|
||||
<Chip label="Asiya Javayant" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2" />
|
||||
<Chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2" />
|
||||
<Chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mb-2" removable />
|
||||
</div>
|
||||
|
||||
<h5>Styling</h5>
|
||||
<div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
|
||||
<Chip label="Action" class="p-mr-2 p-mb-2 custom-chip" />
|
||||
<Chip label="Apple" icon="pi pi-apple" class="p-mr-2 p-mb-2 custom-chip" />
|
||||
<Chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2 custom-chip" />
|
||||
<Chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="custom-chip p-mb-2" removable />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
}
|
||||
<\\/script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.p-chip.custom-chip {
|
||||
background: var(--primary-color);
|
||||
color: var(--primary-color-text);
|
||||
|
|
@ -242,9 +244,6 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
LiveEditor
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,7 +1,5 @@
|
|||
<template>
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Documentation">
|
||||
<AppDoc name="InplaceDemo" :sources="sources" service="ProductService" data="products-small" >
|
||||
<h5>Import</h5>
|
||||
<pre v-code.script><code>
|
||||
import Inplace from 'primevue/inplace';
|
||||
|
|
@ -184,91 +182,18 @@ export default {
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel header="Source">
|
||||
<div class="p-d-flex p-jc-between">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/inplace" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<LiveEditor name="InplaceDemo" :sources="sources" service="ProductService" data="products-small" :components="['InputText', 'DataTable', 'Column']" />
|
||||
</div>
|
||||
<pre v-code><code><template v-pre>
|
||||
<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>
|
||||
</AppDoc>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LiveEditor from '../liveeditor/LiveEditor';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sources: {
|
||||
'template': {
|
||||
content: `<template>
|
||||
<div class="layout-content">
|
||||
<div class="content-section implementation">
|
||||
'options-api': {
|
||||
tabName: 'Source',
|
||||
content: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<h5>Input</h5>
|
||||
<Inplace :closable="true">
|
||||
|
|
@ -297,7 +222,7 @@ export default {
|
|||
View Data
|
||||
</template>
|
||||
<template #content>
|
||||
<DataTable :value="products">
|
||||
<DataTable :value="products" responsiveLayout="scroll" >
|
||||
<Column field="code" header="Code"></Column>
|
||||
<Column field="name" header="Name"></Column>
|
||||
<Column field="category" header="Category"></Column>
|
||||
|
|
@ -306,12 +231,10 @@ export default {
|
|||
</template>
|
||||
</Inplace>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProductService from '../service/ProductService';
|
||||
import ProductService from './service/ProductService';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -329,13 +252,73 @@ export default {
|
|||
this.productService.getProductsSmall().then(data => this.products = data);
|
||||
}
|
||||
}
|
||||
}`
|
||||
}
|
||||
}
|
||||
}
|
||||
<\\/script>
|
||||
`
|
||||
},
|
||||
components: {
|
||||
LiveEditor
|
||||
'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>`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -198,6 +198,7 @@ import Avatar from 'primevue/avatar';
|
|||
import AvatarGroup from 'primevue/avatargroup';
|
||||
import Badge from 'primevue/badge';
|
||||
import BadgeDirective from "primevue/badgedirective";
|
||||
import BlockUI from 'primevue/blockui';
|
||||
import Button from 'primevue/button';
|
||||
import Breadcrumb from 'primevue/breadcrumb';
|
||||
import Calendar from 'primevue/calendar';
|
||||
|
|
@ -247,6 +248,7 @@ import PanelMenu from 'primevue/panelmenu';
|
|||
import Password from 'primevue/password';
|
||||
import PickList from 'primevue/picklist';
|
||||
import ProgressBar from 'primevue/progressbar';
|
||||
import ProgressSpinner from 'primevue/progressspinner';
|
||||
import Rating from 'primevue/rating';
|
||||
import RadioButton from 'primevue/radiobutton';
|
||||
import Ripple from 'primevue/ripple';
|
||||
|
|
@ -269,6 +271,7 @@ import Toolbar from 'primevue/toolbar';
|
|||
import TabView from 'primevue/tabview';
|
||||
import TabPanel from 'primevue/tabpanel';
|
||||
import Tag from 'primevue/tag';
|
||||
import Terminal from 'primevue/terminal';
|
||||
import Timeline from 'primevue/timeline';
|
||||
import ToggleButton from 'primevue/togglebutton';
|
||||
import Tooltip from 'primevue/tooltip';
|
||||
|
|
@ -299,6 +302,7 @@ app.component('AutoComplete', AutoComplete);
|
|||
app.component('Avatar', Avatar);
|
||||
app.component('AvatarGroup', AvatarGroup);
|
||||
app.component('Badge', Badge);
|
||||
app.component('BlockUI', BlockUI);
|
||||
app.component('Breadcrumb', Breadcrumb);
|
||||
app.component('Button', Button);
|
||||
app.component('Calendar', Calendar);
|
||||
|
|
@ -347,6 +351,7 @@ app.component('PanelMenu', PanelMenu);
|
|||
app.component('Password', Password);
|
||||
app.component('PickList', PickList);
|
||||
app.component('ProgressBar', ProgressBar);
|
||||
app.component('ProgressSpinner', ProgressSpinner);
|
||||
app.component('RadioButton', RadioButton);
|
||||
app.component('Rating', Rating);
|
||||
app.component('SelectButton', SelectButton);
|
||||
|
|
@ -364,6 +369,7 @@ app.component('TabView', TabView);
|
|||
app.component('TabPanel', TabPanel);
|
||||
app.component('Tag', Tag);
|
||||
app.component('Textarea', Textarea);
|
||||
app.component('Terminal', Terminal);
|
||||
app.component('TieredMenu', TieredMenu);
|
||||
app.component('Timeline', Timeline);
|
||||
app.component('Toast', Toast);
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
<template>
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Documentation">
|
||||
<AppDoc name="MessageDemo" :sources="sources">
|
||||
<h5>Import</h5>
|
||||
<pre v-code.script><code>
|
||||
import Message from 'primevue/message';
|
||||
|
|
@ -249,108 +247,18 @@ import InlineMessage from 'primevue/inlinemessage';
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel header="Source">
|
||||
<div class="p-d-flex p-jc-between">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/message" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<LiveEditor name="MessageDemo" :sources="sources" :components="['InlineMessage', 'Button']" />
|
||||
</div>
|
||||
<pre v-code><code><template v-pre>
|
||||
<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>
|
||||
</AppDoc>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LiveEditor from '../liveeditor/LiveEditor';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sources: {
|
||||
'template': {
|
||||
content: `<template>
|
||||
<div class="layout-content">
|
||||
<div class="content-section implementation">
|
||||
'options-api': {
|
||||
tabName: 'Source',
|
||||
content: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<h5>Severities</h5>
|
||||
<Message severity="success">Success Message Content</Message>
|
||||
|
|
@ -396,8 +304,6 @@ export default {
|
|||
<InlineMessage />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -417,8 +323,91 @@ export default {
|
|||
]
|
||||
}
|
||||
}
|
||||
}`,
|
||||
style: `<style scoped>
|
||||
}
|
||||
<\\/script>
|
||||
|
||||
<style scoped>
|
||||
button.p-button {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
.p-inputtext {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
</style>`
|
||||
},
|
||||
'composition-api': {
|
||||
tabName: 'Composition API',
|
||||
content: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<h5>Severities</h5>
|
||||
<Message severity="success">Success Message Content</Message>
|
||||
<Message severity="info">Info Message Content</Message>
|
||||
<Message severity="warn">Warning Message Content</Message>
|
||||
<Message severity="error">Error Message Content</Message>
|
||||
|
||||
<h5>Dynamic</h5>
|
||||
<Button label="Show" @click="addMessages()" />
|
||||
<transition-group name="p-message" tag="div">
|
||||
<Message v-for="msg of messages" :severity="msg.severity" :key="msg.id">{{msg.content}}</Message>
|
||||
</transition-group>
|
||||
|
||||
<h5>Inline Messages</h5>
|
||||
<p>Message component is used to display inline messages mostly within forms.</p>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-3">
|
||||
<InlineMessage severity="info">Message Content</InlineMessage>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-3">
|
||||
<InlineMessage severity="success">Message Content</InlineMessage>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-3">
|
||||
<InlineMessage severity="warn">Message Content</InlineMessage>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-3">
|
||||
<InlineMessage severity="error">Message Content</InlineMessage>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Auto Dismiss</h5>
|
||||
<Message severity="warn" :life="3000" :sticky="false">This message will hide in 3 seconds.</Message>
|
||||
|
||||
<h5>Validation Message</h5>
|
||||
<div class="p-formgroup-inline" style="margin-bottom:.5rem">
|
||||
<label for="username" class="p-sr-only">Username</label>
|
||||
<InputText id="username" placeholder="Username" class="p-invalid" />
|
||||
<InlineMessage>Username is required</InlineMessage>
|
||||
</div>
|
||||
<div class="p-formgroup-inline">
|
||||
<label for="email" class="p-sr-only">email</label>
|
||||
<InputText id="email" placeholder="Email" class="p-invalid" />
|
||||
<InlineMessage />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const messages = ref([]);
|
||||
const count = ref(0);
|
||||
const addMessages = () => {
|
||||
messages.value = [
|
||||
{severity: 'info', content: 'Dynamic Info Message', id: count.value++},
|
||||
{severity: 'success', content: 'Dynamic Success Message', id: count.value++},
|
||||
{severity: 'warn', content: 'Dynamic Warning Message', id: count.value++}
|
||||
]
|
||||
};
|
||||
|
||||
return { messages, count, addMessages }
|
||||
}
|
||||
}
|
||||
<\\/script>
|
||||
|
||||
<style scoped>
|
||||
button.p-button {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
|
@ -430,9 +419,6 @@ button.p-button {
|
|||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
LiveEditor
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,7 +1,5 @@
|
|||
<template>
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Documentation">
|
||||
<AppDoc name="ProgressBarDemo" :sources="sources">
|
||||
<h5>Import</h5>
|
||||
<pre v-code.script><code>
|
||||
import ProgressBar from 'primevue/progressbar';
|
||||
|
|
@ -110,75 +108,18 @@ data() {
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel header="Source">
|
||||
<div class="p-d-flex p-jc-between">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/progressbar" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<LiveEditor name="ProgressBarDemo" :sources="sources" />
|
||||
</div>
|
||||
<pre v-code><code><template v-pre>
|
||||
<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>
|
||||
</AppDoc>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LiveEditor from '../liveeditor/LiveEditor';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sources: {
|
||||
'template': {
|
||||
content: `<template>
|
||||
<div class="layout-content">
|
||||
<div class="content-section implementation">
|
||||
'options-api': {
|
||||
tabName: 'Source',
|
||||
content: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<h5>Dynamic</h5>
|
||||
<ProgressBar :value="value1" />
|
||||
|
|
@ -189,8 +130,6 @@ export default {
|
|||
<h5>Indeterminate</h5>
|
||||
<ProgressBar mode="indeterminate" style="height: .5em" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -223,13 +162,63 @@ export default {
|
|||
beforeUnmount() {
|
||||
this.endProgress();
|
||||
}
|
||||
}`
|
||||
}
|
||||
}
|
||||
}
|
||||
<\\/script>
|
||||
`
|
||||
},
|
||||
components: {
|
||||
LiveEditor
|
||||
'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>`
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
<template>
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Documentation">
|
||||
<AppDoc name="ProgressSpinnerDemo" :sources="sources">
|
||||
<h5>Import</h5>
|
||||
<pre v-code.script><code>
|
||||
import ProgressSpinner from 'primevue/progressspinner';
|
||||
|
|
@ -101,38 +99,18 @@ import ProgressSpinner from 'primevue/progressspinner';
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel header="Source">
|
||||
<div class="p-d-flex p-jc-between">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/progressspinner" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<LiveEditor name="ProgressSpinnerDemo" :sources="sources" />
|
||||
</div>
|
||||
<pre v-code><code><template v-pre>
|
||||
<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>
|
||||
</AppDoc>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LiveEditor from '../liveeditor/LiveEditor';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sources: {
|
||||
'template': {
|
||||
content: `<template>
|
||||
<div class="layout-content">
|
||||
<div class="content-section implementation">
|
||||
'options-api': {
|
||||
tabName: 'Source',
|
||||
content: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<h5>Basic</h5>
|
||||
<ProgressSpinner />
|
||||
|
|
@ -140,19 +118,35 @@ export default {
|
|||
<h5>Custom</h5>
|
||||
<ProgressSpinner style="width:50px;height:50px" strokeWidth="8" fill="#EEEEEE" animationDuration=".5s"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
}
|
||||
<\\/script>
|
||||
`
|
||||
},
|
||||
'composition-api': {
|
||||
tabName: 'Composition API',
|
||||
content: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<h5>Basic</h5>
|
||||
<ProgressSpinner />
|
||||
|
||||
<h5>Custom</h5>
|
||||
<ProgressSpinner style="width:50px;height:50px" strokeWidth="8" fill="#EEEEEE" animationDuration=".5s"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
}`
|
||||
}
|
||||
<\\/script>`
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
LiveEditor
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,7 +1,5 @@
|
|||
<template>
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Documentation">
|
||||
<AppDoc name="RippleDemo" :sources="sources">
|
||||
<h5>Getting Started</h5>
|
||||
<h5>Ripple</h5>
|
||||
<p>Ripple is an optional animation for the supported components such as buttons. It is disabled by default and needs to be enabled at
|
||||
|
|
@ -83,31 +81,34 @@ directives: {
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel header="Source">
|
||||
<div class="p-d-flex p-jc-between">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/ripple" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<LiveEditor name="RippleDemo" :sources="sources" />
|
||||
</div>
|
||||
<pre v-code><code><template v-pre>
|
||||
<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>
|
||||
</AppDoc>
|
||||
</template>
|
||||
</code></pre>
|
||||
|
||||
<pre v-code.script><code>
|
||||
export default {}
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sources: {
|
||||
'options-api': {
|
||||
tabName: 'Source',
|
||||
content: `
|
||||
<template>
|
||||
<div>
|
||||
<div class="card-container p-d-flex">
|
||||
<div class="card primary-box p-ripple" v-ripple>Default</div>
|
||||
<div class="card styled-box-green p-ripple" v-ripple>Green</div>
|
||||
<div class="card styled-box-orange p-ripple" v-ripple>Orange</div>
|
||||
<div class="card styled-box-purple p-ripple" v-ripple>Purple</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</code></pre>
|
||||
<script>
|
||||
export default {
|
||||
}
|
||||
<\\/script>
|
||||
|
||||
<pre v-code.css><code>
|
||||
<style lang="scss" scoped>
|
||||
::v-deep(.card-container) {
|
||||
.card {
|
||||
width: 75px;
|
||||
|
|
@ -118,6 +119,11 @@ export default {}
|
|||
margin-right: 1rem;
|
||||
user-select: none;
|
||||
padding: 0;
|
||||
background: #ffffff;
|
||||
padding: 2rem;
|
||||
box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
|
||||
border-radius: 4px;
|
||||
margin-bottom: 2rem;
|
||||
|
||||
&.primary-box {
|
||||
background-color: var(--primary-color);
|
||||
|
|
@ -148,23 +154,13 @@ export default {}
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
</code></pre>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LiveEditor from '../liveeditor/LiveEditor';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sources: {
|
||||
'template': {
|
||||
content: `<template>
|
||||
<div class="layout-content">
|
||||
<div class="content-section implementation">
|
||||
</style>`
|
||||
},
|
||||
'composition-api': {
|
||||
tabName: 'Composition API',
|
||||
content: `
|
||||
<template>
|
||||
<div>
|
||||
<div class="card-container p-d-flex">
|
||||
<div class="card primary-box p-ripple" v-ripple>Default</div>
|
||||
<div class="card styled-box-green p-ripple" v-ripple>Green</div>
|
||||
|
|
@ -172,13 +168,14 @@ export default {
|
|||
<div class="card styled-box-purple p-ripple" v-ripple>Purple</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
}`,
|
||||
style: `<style lang="scss" scoped>
|
||||
}
|
||||
<\\/script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep(.card-container) {
|
||||
.card {
|
||||
width: 75px;
|
||||
|
|
@ -189,6 +186,11 @@ export default {
|
|||
margin-right: 1rem;
|
||||
user-select: none;
|
||||
padding: 0;
|
||||
background: #ffffff;
|
||||
padding: 2rem;
|
||||
box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
|
||||
border-radius: 4px;
|
||||
margin-bottom: 2rem;
|
||||
|
||||
&.primary-box {
|
||||
background-color: var(--primary-color);
|
||||
|
|
@ -223,9 +225,6 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
LiveEditor
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,7 +1,5 @@
|
|||
<template>
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Documentation">
|
||||
<AppDoc name="ScrollTopDemo" :sources="sources">
|
||||
<h5>Import</h5>
|
||||
<pre v-code.script><code>
|
||||
import ScrollTop from 'primevue/scrolltop';
|
||||
|
|
@ -99,72 +97,18 @@ import ScrollTop from 'primevue/scrolltop';
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel header="Source">
|
||||
<div class="p-d-flex p-jc-between">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/scrolltop" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<LiveEditor name="ScrollTopDemo" :sources="sources" :components="['ScrollPanel']" />
|
||||
</div>
|
||||
<pre v-code><code><template v-pre>
|
||||
<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>
|
||||
</code></pre>
|
||||
|
||||
<pre v-code.css><code>
|
||||
::v-deep(.custom-scrolltop) {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
background-color: var(--primary-color);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.p-scrolltop-icon {
|
||||
font-size: 1rem;
|
||||
color: var(--primary-color-text);
|
||||
}
|
||||
}
|
||||
|
||||
</code></pre>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</AppDoc>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LiveEditor from '../liveeditor/LiveEditor';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sources: {
|
||||
'template': {
|
||||
content: `<template>
|
||||
<div class="layout-content">
|
||||
<div class="content-section implementation">
|
||||
'options-api': {
|
||||
tabName: 'Source',
|
||||
content: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<h5>Window</h5>
|
||||
<p>Scroll down the page to display the ScrollTo component.</p>
|
||||
|
|
@ -188,14 +132,66 @@ export default {
|
|||
<ScrollTop target="parent" :threshold="100" class="custom-scrolltop" icon="pi pi-arrow-up" />
|
||||
</ScrollPanel>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
}
|
||||
<\\/script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep(.custom-scrolltop) {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 4px;
|
||||
background-color: var(--primary-color);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.p-scrolltop-icon {
|
||||
font-size: 1rem;
|
||||
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 />
|
||||
|
||||
<h5>Element</h5>
|
||||
<ScrollPanel style="width: 250px; height: 200px">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
Vitae et leo duis ut diam.
|
||||
Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut.
|
||||
Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna.
|
||||
Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris.
|
||||
Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales.
|
||||
Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus.
|
||||
Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas.
|
||||
Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.
|
||||
Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.
|
||||
Mattis aliquam faucibus purus in massa tempor nec.
|
||||
</p>
|
||||
<ScrollTop target="parent" :threshold="100" class="custom-scrolltop" icon="pi pi-arrow-up" />
|
||||
</ScrollPanel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
} `,
|
||||
style: `<style lang="scss" scoped>
|
||||
}
|
||||
<\\/script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep(.custom-scrolltop) {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
|
|
@ -215,9 +211,6 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
LiveEditor
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,7 +1,5 @@
|
|||
<template>
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Documentation">
|
||||
<AppDoc name="SkeletonDemo" :sources="sources">
|
||||
<h5>Import</h5>
|
||||
<pre v-code.script><code>
|
||||
import Skeleton from 'primevue/skeleton';
|
||||
|
|
@ -126,163 +124,19 @@ import Skeleton from 'primevue/skeleton';
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel header="Source">
|
||||
<div class="p-d-flex p-jc-between">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/skeleton" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<LiveEditor name="SkeletonDemo" :sources="sources" :components="['DataTable', 'Column']" />
|
||||
</div>
|
||||
<pre v-code><code><template v-pre>
|
||||
<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>
|
||||
</AppDoc>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LiveEditor from '../liveeditor/LiveEditor';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sources: {
|
||||
'template': {
|
||||
content: `<template>
|
||||
<div class="layout-content">
|
||||
<div class="content-section implementation">
|
||||
'options-api': {
|
||||
tabName: 'Source',
|
||||
content: `
|
||||
<template>
|
||||
<div>
|
||||
<div class="card">
|
||||
<div class="p-grid p-formgrid">
|
||||
<div class="p-field p-col-12 p-md-6">
|
||||
|
|
@ -413,7 +267,6 @@ export default {
|
|||
</DataTable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -423,8 +276,170 @@ export default {
|
|||
products: new Array(5)
|
||||
}
|
||||
}
|
||||
}`,
|
||||
style: `<style lang="scss" scoped>
|
||||
}
|
||||
<\\/script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.custom-skeleton {
|
||||
border: 1px solid var(--surface-d);
|
||||
border-radius: 4px;
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
</style>`
|
||||
},
|
||||
'composition-api': {
|
||||
tabName: 'Composition API',
|
||||
content: `
|
||||
<template>
|
||||
<div>
|
||||
<div class="card">
|
||||
<div class="p-grid p-formgrid">
|
||||
<div class="p-field p-col-12 p-md-6">
|
||||
<h5>Rectangle</h5>
|
||||
<Skeleton class="p-mb-2"></Skeleton>
|
||||
<Skeleton width="10rem" class="p-mb-2"></Skeleton>
|
||||
<Skeleton width="5rem" class="p-mb-2"></Skeleton>
|
||||
<Skeleton height="2rem" class="p-mb-2"></Skeleton>
|
||||
<Skeleton width="10rem" height="4rem"></Skeleton>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-6">
|
||||
<h5>Rounded</h5>
|
||||
<Skeleton class="p-mb-2" borderRadius="16px"></Skeleton>
|
||||
<Skeleton width="10rem" class="p-mb-2" borderRadius="16px"></Skeleton>
|
||||
<Skeleton width="5rem" borderRadius="16px" class="p-mb-2"></Skeleton>
|
||||
<Skeleton height="2rem" class="p-mb-2" borderRadius="16px"></Skeleton>
|
||||
<Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-6">
|
||||
<h5 class="p-mt-3">Square</h5>
|
||||
<div class="p-d-flex p-ai-end">
|
||||
<Skeleton size="2rem" class="p-mr-2"></Skeleton>
|
||||
<Skeleton size="3rem" class="p-mr-2"></Skeleton>
|
||||
<Skeleton size="4rem" class="p-mr-2"></Skeleton>
|
||||
<Skeleton size="5rem"></Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-6">
|
||||
<h5 class="p-mt-3">Circle</h5>
|
||||
<div class="p-d-flex p-ai-end">
|
||||
<Skeleton shape="circle" size="2rem" class="p-mr-2"></Skeleton>
|
||||
<Skeleton shape="circle" size="3rem" class="p-mr-2"></Skeleton>
|
||||
<Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
|
||||
<Skeleton shape="circle" size="5rem"></Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="p-grid p-formgrid">
|
||||
<div class="p-field p-col-12 p-md-6 p-pr-md-6 p-pr-0">
|
||||
<h5>Card</h5>
|
||||
<div class="custom-skeleton p-p-4">
|
||||
<div class="p-d-flex p-mb-3">
|
||||
<Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
|
||||
<div>
|
||||
<Skeleton width="10rem" class="p-mb-2"></Skeleton>
|
||||
<Skeleton width="5rem" class="p-mb-2"></Skeleton>
|
||||
<Skeleton height=".5rem"></Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
<Skeleton width="100%" height="150px"></Skeleton>
|
||||
<div class="p-d-flex p-jc-between p-mt-3">
|
||||
<Skeleton width="4rem" height="2rem"></Skeleton>
|
||||
<Skeleton width="4rem" height="2rem"></Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-field p-col-12 p-md-6">
|
||||
<h5>List</h5>
|
||||
<div class="custom-skeleton p-p-4">
|
||||
<ul class="p-m-0 p-p-0">
|
||||
<li class="p-mb-3">
|
||||
<div class="p-d-flex">
|
||||
<Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
|
||||
<div style="flex: 1">
|
||||
<Skeleton width="100%" class="p-mb-2"></Skeleton>
|
||||
<Skeleton width="75%"></Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="p-mb-3">
|
||||
<div class="p-d-flex">
|
||||
<Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
|
||||
<div style="flex: 1">
|
||||
<Skeleton width="100%" class="p-mb-2"></Skeleton>
|
||||
<Skeleton width="75%"></Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="p-mb-3">
|
||||
<div class="p-d-flex">
|
||||
<Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
|
||||
<div style="flex: 1">
|
||||
<Skeleton width="100%" class="p-mb-2"></Skeleton>
|
||||
<Skeleton width="75%"></Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="p-d-flex">
|
||||
<Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
|
||||
<div style="flex: 1">
|
||||
<Skeleton width="100%" class="p-mb-2"></Skeleton>
|
||||
<Skeleton width="75%"></Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>DataTable</h5>
|
||||
<DataTable :value="products" responsiveLayout="scroll">
|
||||
<Column field="code" header="Code">
|
||||
<template #body>
|
||||
<Skeleton></Skeleton>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="name" header="Name">
|
||||
<template #body>
|
||||
<Skeleton></Skeleton>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="category" header="Category">
|
||||
<template #body>
|
||||
<Skeleton></Skeleton>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="quantity" header="Quantity">
|
||||
<template #body>
|
||||
<Skeleton></Skeleton>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const products = ref(new Array(5));
|
||||
|
||||
return { products }
|
||||
}
|
||||
}
|
||||
<\\/script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.custom-skeleton {
|
||||
border: 1px solid var(--surface-d);
|
||||
border-radius: 4px;
|
||||
|
|
@ -437,9 +452,6 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
LiveEditor
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<AppDoc :sources="sources" :extPages="pages">
|
||||
<AppDoc name="StepsDemo" :sources="sources" :extPages="pages">
|
||||
<h5>Import</h5>
|
||||
<pre v-code.script><code>
|
||||
import Steps from 'primevue/steps';
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
<template>
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Documentation">
|
||||
<AppDoc name="TagDemo" :sources="sources">
|
||||
<h5>Import</h5>
|
||||
<pre v-code.script><code>
|
||||
import Tag from 'primevue/tag';
|
||||
|
|
@ -115,53 +113,18 @@ import Tag from 'primevue/tag';
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel header="Source">
|
||||
<div class="p-d-flex p-jc-between">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/tag" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<LiveEditor name="TagDemo" :sources="sources" />
|
||||
</div>
|
||||
<pre v-code><code><template v-pre>
|
||||
<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>
|
||||
</AppDoc>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LiveEditor from '../liveeditor/LiveEditor';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sources: {
|
||||
'template': {
|
||||
content: `<template>
|
||||
<div class="layout-content">
|
||||
<div class="content-section implementation">
|
||||
'options-api': {
|
||||
tabName: 'Source',
|
||||
content: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<h5>Tags</h5>
|
||||
<Tag class="p-mr-2" value="Primary"></Tag>
|
||||
|
|
@ -184,19 +147,50 @@ export default {
|
|||
<Tag class="p-mr-2" icon="pi pi-exclamation-triangle" severity="warning" value="Warning"></Tag>
|
||||
<Tag icon="pi pi-times" severity="danger" value="Danger"></Tag>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
}
|
||||
<\\/script>
|
||||
`
|
||||
},
|
||||
'composition-api': {
|
||||
tabName: 'Composition API',
|
||||
content: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<h5>Tags</h5>
|
||||
<Tag class="p-mr-2" value="Primary"></Tag>
|
||||
<Tag class="p-mr-2" severity="success" value="Success"></Tag>
|
||||
<Tag class="p-mr-2" severity="info" value="Info"></Tag>
|
||||
<Tag class="p-mr-2" severity="warning" value="Warning"></Tag>
|
||||
<Tag severity="danger" value="Danger"></Tag>
|
||||
|
||||
<h5>Pills</h5>
|
||||
<Tag class="p-mr-2" value="Primary" rounded></Tag>
|
||||
<Tag class="p-mr-2" severity="success" value="Success" rounded></Tag>
|
||||
<Tag class="p-mr-2" severity="info" value="Info" rounded></Tag>
|
||||
<Tag class="p-mr-2" severity="warning" value="Warning" rounded></Tag>
|
||||
<Tag severity="danger" value="Danger" rounded></Tag>
|
||||
|
||||
<h5>Icons</h5>
|
||||
<Tag class="p-mr-2" icon="pi pi-user" value="Primary"></Tag>
|
||||
<Tag class="p-mr-2" icon="pi pi-check" severity="success" value="Success"></Tag>
|
||||
<Tag class="p-mr-2" icon="pi pi-info-circle" severity="info" value="Info"></Tag>
|
||||
<Tag class="p-mr-2" icon="pi pi-exclamation-triangle" severity="warning" value="Warning"></Tag>
|
||||
<Tag icon="pi pi-times" severity="danger" value="Danger"></Tag>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
}`
|
||||
}
|
||||
<\\/script>
|
||||
`
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
LiveEditor
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,7 +1,5 @@
|
|||
<template>
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Documentation">
|
||||
<AppDoc name="TerminalDemo" :sources="sources">
|
||||
<h5>Import</h5>
|
||||
<pre v-code.script><code>
|
||||
import Terminal from 'primevue/terminal';
|
||||
|
|
@ -124,23 +122,26 @@ export default {
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</TabPanel>
|
||||
</AppDoc>
|
||||
</template>
|
||||
|
||||
<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" />
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sources: {
|
||||
'options-api': {
|
||||
tabName: 'Source',
|
||||
content: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<p>Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.</p>
|
||||
<Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" class="dark-demo-terminal" />
|
||||
</div>
|
||||
<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" />
|
||||
</template>
|
||||
|
||||
</code></pre>
|
||||
|
||||
<pre v-code.script><code>
|
||||
import TerminalService from 'primevue/terminalservice';
|
||||
<script>
|
||||
import TerminalService from "primevue/terminalservice";
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
|
|
@ -176,10 +177,9 @@ export default {
|
|||
TerminalService.off('command', this.commandHandler);
|
||||
}
|
||||
}
|
||||
<\\/script>
|
||||
|
||||
</code></pre>
|
||||
|
||||
<pre v-code.css><code>
|
||||
<style lang="scss" scoped>
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
|
@ -200,36 +200,33 @@ p {
|
|||
color: #9FA8DA;
|
||||
}
|
||||
}
|
||||
|
||||
</code></pre>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LiveEditor from '../liveeditor/LiveEditor';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sources: {
|
||||
'template': {
|
||||
content: `<template>
|
||||
<div class="layout-content">
|
||||
<div class="content-section implementation">
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { onMounted, onBeforeUnmount } from 'vue';
|
||||
import TerminalService from "primevue/terminalservice";
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
commandHandler(text) {
|
||||
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;
|
||||
|
|
@ -253,15 +250,13 @@ export default {
|
|||
|
||||
TerminalService.emit('response', response);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
TerminalService.on('command', this.commandHandler);
|
||||
},
|
||||
beforeUnmount() {
|
||||
TerminalService.off('command', this.commandHandler);
|
||||
|
||||
return { commandHandler }
|
||||
}
|
||||
}`,
|
||||
style: `<style lang="scss" scoped>
|
||||
}
|
||||
<\\/script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
|
@ -286,9 +281,6 @@ p {
|
|||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
LiveEditor
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,7 +1,5 @@
|
|||
<template>
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Documentation">
|
||||
<AppDoc name="ToastDemo" :sources="sources">
|
||||
<h5>ToastService</h5>
|
||||
<p>Toast messages are dynamically created using a <i>ToastService</i> that needs to be installed globally before the application
|
||||
instance is created.</p>
|
||||
|
|
@ -264,100 +262,24 @@ this.$toast.add({severity:'success', summary: 'Specific Message', group: 'mykey'
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel header="Source">
|
||||
<div class="p-d-flex p-jc-between">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/toast" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<LiveEditor name="ToastDemo" :sources="sources" :toastService="true" :components="['Button']" />
|
||||
</div>
|
||||
<pre v-code><code><template v-pre>
|
||||
<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>
|
||||
</AppDoc>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LiveEditor from '../liveeditor/LiveEditor';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sources: {
|
||||
'template': {
|
||||
content: ` <template>
|
||||
<div class="layout-content">
|
||||
'options-api': {
|
||||
tabName: 'Source',
|
||||
content: `
|
||||
<template>
|
||||
<div>
|
||||
<Toast />
|
||||
<Toast position="top-left" group="tl" />
|
||||
<Toast position="bottom-left" group="bl" />
|
||||
<Toast position="bottom-right" group="br" />
|
||||
|
||||
<div class="content-section implementation">
|
||||
<div class="card">
|
||||
<h5>Severities</h5>
|
||||
<Button label="Success" class="p-button-success" @click="showSuccess" />
|
||||
|
|
@ -378,7 +300,6 @@ export default {
|
|||
<Button @click="clear" label="Clear" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -422,8 +343,10 @@ export default {
|
|||
this.$toast.removeAllGroups();
|
||||
}
|
||||
}
|
||||
}`,
|
||||
style: `<style lang="scss" scoped>
|
||||
}
|
||||
<\\/script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
button {
|
||||
min-width: 10rem;
|
||||
margin-right: .5rem;
|
||||
|
|
@ -437,15 +360,16 @@ button {
|
|||
}
|
||||
</style>`
|
||||
},
|
||||
'api': {
|
||||
content: `<template>
|
||||
<div class="layout-content">
|
||||
'composition-api': {
|
||||
tabName: 'Composition API',
|
||||
content: `
|
||||
<template>
|
||||
<div>
|
||||
<Toast />
|
||||
<Toast position="top-left" group="tl" />
|
||||
<Toast position="bottom-left" group="bl" />
|
||||
<Toast position="bottom-right" group="br" />
|
||||
|
||||
<div class="content-section implementation">
|
||||
<div class="card">
|
||||
<h5>Severities</h5>
|
||||
<Button label="Success" class="p-button-success" @click="showSuccess" />
|
||||
|
|
@ -466,7 +390,6 @@ button {
|
|||
<Button @click="clear" label="Clear" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -509,10 +432,14 @@ export default defineComponent({
|
|||
const clear = () => {
|
||||
toast.removeAllGroups();
|
||||
}
|
||||
return { showSuccess, showInfo, showWarn, showError, showTopLeft, showBottomLeft, showBottomRight, showSticky, showMultiple, clear };
|
||||
|
||||
return { showSuccess, showInfo, showWarn, showError, showTopLeft, showBottomLeft,
|
||||
showBottomRight, showSticky, showMultiple, clear };
|
||||
}
|
||||
});`,
|
||||
style: `<style lang="scss" scoped>
|
||||
});
|
||||
<\\/script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
button {
|
||||
min-width: 10rem;
|
||||
margin-right: .5rem;
|
||||
|
|
@ -528,9 +455,6 @@ button {
|
|||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
LiveEditor
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue