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

Add steps only demo

pull/6011/head
Cagatay Civici 2024-07-02 15:46:06 +03:00
parent fcfeef0770
commit d1663fcccf
2 changed files with 67 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
apps/showcase/doc/stepper/StepsOnlyDoc.vue Normal file
View File

@ -0,0 +1,61 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Use Stepper with a <i>StepList</i> only for custom requirements where a progress indicator is needed.</p>
</DocSectionText>
<div class="card flex justify-center">
<Stepper value="1" class="basis-[50rem]">
<StepList>
<Step value="1">Design</Step>
<Step value="2">Development</Step>
<Step value="3">QA</Step>
</StepList>
</Stepper>
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
code: {
basic: `
<Stepper value="1" class="basis-[50rem]">
<StepList>
<Step value="1">Design</Step>
<Step value="2">Development</Step>
<Step value="3">QA</Step>
</StepList>
</Stepper>
`,
options: `
<template>
<div class="card flex justify-center">
<Stepper value="1" class="basis-[50rem]">
<StepList>
<Step value="1">Design</Step>
<Step value="2">Development</Step>
<Step value="3">QA</Step>
</StepList>
</Stepper>
</div>
</template>
`,
composition: `
<template>
<div class="card flex justify-center">
<Stepper value="1" class="basis-[50rem]">
<StepList>
<Step value="1">Design</Step>
<Step value="2">Development</Step>
<Step value="3">QA</Step>
</StepList>
</Stepper>
</div>
</template>
`
}
};
}
};
</script>

6
apps/showcase/pages/stepper/index.vue
View File

@ -16,6 +16,7 @@ import HorizontalDoc from '@/doc/stepper/HorizontalDoc.vue';
import ImportDoc from '@/doc/stepper/ImportDoc.vue';
import LinearDoc from '@/doc/stepper/LinearDoc.vue';
import TemplateDoc from '@/doc/stepper/TemplateDoc.vue';
import StepsOnlyDoc from '@/doc/stepper/StepsOnlyDoc.vue';
import VerticalDoc from '@/doc/stepper/VerticalDoc.vue';
import PTComponent from '@/doc/stepper/pt/index.vue';
import ThemingDoc from '@/doc/stepper/theming/index.vue';
@ -44,6 +45,11 @@ export default {
label: 'Linear',
component: LinearDoc
},
{
id: 'stepsonly',
label: 'Steps Only',
component: StepsOnlyDoc
},
{
id: 'template',
label: 'Template',