vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 08:52:34 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merged new Docs and Demos

Browse source
This commit is contained in:
Cagatay Civici 2023-02-28 11:29:30 +03:00
parent 296cc217fb
commit dfcc8ef4e7
1235 changed files with 130757 additions and 122640 deletions
Download patch file Download diff file Expand all files Collapse all files

104
pages/progressbar/index.vue
View file

@ -1,71 +1,57 @@
<template>
<div>
<Head>
<Title>Vue ProgressBar Component</Title>
<Meta name="description" content="ProgressBar is a process status indicator." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>ProgressBar</h1>
<p>ProgressBar is a process status indicator.</p>
</div>
<AppDemoActions />
</div>
<div class="content-section implementation">
<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: 0.5em" />
</div>
</div>
<ProgressBarDoc />
</div>
<DocComponent title="Vue ProgressBar Component" header="Progress Bar" description="ProgressBar is a process status indicator." :componentDocs="docs" :apiDocs="['ProgressBar']" />
</template>
<script>
import ProgressBarDoc from './ProgressBarDoc';
import AccessibilityDoc from '@/doc/progressbar/AccessibilityDoc';
import BasicDoc from '@/doc/progressbar/BasicDoc';
import DynamicDoc from '@/doc/progressbar/DynamicDoc';
import ImportDoc from '@/doc/progressbar/ImportDoc';
import IndeterminateDoc from '@/doc/progressbar/IndeterminateDoc';
import StyleDoc from '@/doc/progressbar/StyleDoc';
import TemplateDoc from '@/doc/progressbar/TemplateDoc';
export default {
data() {
return {
value1: 0,
value2: 50
};
},
interval: null,
mounted() {
this.startProgress();
},
beforeUnmount() {
this.endProgress();
},
methods: {
startProgress() {
this.interval = setInterval(() => {
let newValue = this.value1 + Math.floor(Math.random() * 10) + 1;
if (newValue >= 100) {
newValue = 100;
docs: [
{
id: 'import',
label: 'Import',
component: ImportDoc
},
{
id: 'basic',
label: 'Basic',
component: BasicDoc
},
{
id: 'dynamic',
label: 'Dynamic',
component: DynamicDoc
},
{
id: 'template',
label: 'Template',
component: TemplateDoc
},
{
id: 'indeterminate',
label: 'Indeterminate',
component: IndeterminateDoc
},
{
id: 'style',
label: 'Style',
component: StyleDoc
},
{
id: 'accessibility',
label: 'Accessibility',
component: AccessibilityDoc
}
this.value1 = newValue;
}, 2000);
},
endProgress() {
clearInterval(this.interval);
this.interval = null;
}
},
components: {
ProgressBarDoc: ProgressBarDoc
]
};
}
};
</script>