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

PTViewer added to panel components

Browse source
This commit is contained in:
tugcekucukoglu 2024-09-16 16:04:45 +03:00
parent 274b9b43a0
commit 75b6473550
28 changed files with 376 additions and 104 deletions
Download patch file Download diff file Expand all files Collapse all files

8
apps/showcase/doc/stepper/pt/PTImage.vue
View file

@ -1,8 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>{{ $attrs.description }}</p>
</DocSectionText>
<div class="card">
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
</div>
</template>

72
apps/showcase/doc/stepper/pt/PTViewer.vue Normal file
View file

@ -0,0 +1,72 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs">
<Stepper value="1" class="basis-[50rem]" linear>
<StepList :style="{ overflowX: 'unset' }">
<Step value="1">Header I</Step>
<Step value="2">Header II</Step>
<Step value="3">Header III</Step>
</StepList>
<StepPanels>
<StepPanel value="1">
<div class="flex flex-col h-48">
<div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content I</div>
</div>
<div class="flex pt-6 justify-end">
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" />
</div>
</StepPanel>
<StepPanel value="2">
<div class="flex flex-col h-48">
<div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
</div>
<div class="flex pt-6 justify-between">
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" />
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" />
</div>
</StepPanel>
<StepPanel value="3">
<div class="flex flex-col h-48">
<div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
</div>
<div class="pt-6">
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" />
</div>
</StepPanel>
</StepPanels>
</Stepper>
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
docs: [
{
data: getPTOptions('Stepper'),
key: 'Stepper'
},
{
data: getPTOptions('StepList'),
key: 'StepList'
},
{
data: getPTOptions('Step'),
key: 'Step'
},
{
data: getPTOptions('StepPanels'),
key: 'StepPanels'
},
{
data: getPTOptions('StepPanel'),
key: 'StepPanel'
}
]
};
}
};
</script>

8
apps/showcase/doc/stepper/pt/index.vue
View file

@ -11,16 +11,16 @@
<script>
import DocApiTable from '@/components/doc/DocApiTable.vue';
import { getPTOptions } from '@/components/doc/helpers';
import PTImage from './PTImage.vue';
import PTViewer from './PTViewer.vue';
export default {
data() {
return {
docs: [
{
id: 'pt.image',
label: 'Wireframe',
component: PTImage
id: 'pt.viewer',
label: 'Viewer',
component: PTViewer
},
{
id: 'pt.doc.stepper',