mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-09 00:42:36 +00:00
Stepper demo updated
This commit is contained in:
tugcekucukoglu
parent
ee7515056b
commit
9a416252a7
6 changed files with 695 additions and 964 deletions
|
|
@ -4,37 +4,36 @@
|
|||
</DocSectionText>
|
||||
<div class="card">
|
||||
<Stepper>
|
||||
<StepperPanel header="Header 1">
|
||||
<template #content="{ nextCallback }">
|
||||
<p class="m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<div class="flex gap-2 justify-content-end">
|
||||
<Button label="Next" @click="(event) => nextCallback(event)" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
<StepperPanel header="Header 2">
|
||||
<StepperPanel header="Header I">
|
||||
<template #content="{ prevCallback, nextCallback }">
|
||||
<p class="m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<div class="flex gap-2 justify-content-end">
|
||||
<Button label="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
|
||||
<Button label="Next" @click="(event) => nextCallback(event)" />
|
||||
<div class="flex flex-column h-12rem">
|
||||
<div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
|
||||
</div>
|
||||
<div class="flex pt-4 justify-content-between">
|
||||
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
|
||||
<Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
<StepperPanel header="Header 3">
|
||||
<template #content="{ prevCallback }">
|
||||
<p class="m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<div class="flex gap-2 justify-content-end">
|
||||
<Button label="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
|
||||
<StepperPanel header="Header II">
|
||||
<template #content="{ prevCallback, nextCallback }">
|
||||
<div class="flex flex-column h-12rem">
|
||||
<div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
|
||||
</div>
|
||||
<div class="flex pt-4 justify-content-between">
|
||||
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
|
||||
<Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
<StepperPanel header="Header III">
|
||||
<template #content="{ prevCallback, nextCallback }">
|
||||
<div class="flex flex-column h-12rem">
|
||||
<div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
|
||||
</div>
|
||||
<div class="flex pt-4 justify-content-between">
|
||||
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
|
||||
<Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
|
|
@ -50,37 +49,36 @@ export default {
|
|||
code: {
|
||||
basic: `
|
||||
<Stepper>
|
||||
<StepperPanel header="Header 1">
|
||||
<template #content="{ nextCallback }">
|
||||
<p class="m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<div class="flex gap-2 justify-content-end">
|
||||
<Button label="Next" @click="(event) => nextCallback(event)" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
<StepperPanel header="Header 2">
|
||||
<StepperPanel header="Header I">
|
||||
<template #content="{ prevCallback, nextCallback }">
|
||||
<p class="m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<div class="flex gap-2 justify-content-end">
|
||||
<Button label="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
|
||||
<Button label="Next" @click="(event) => nextCallback(event)" />
|
||||
<div class="flex flex-column h-12rem">
|
||||
<div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
|
||||
</div>
|
||||
<div class="flex pt-4 justify-content-between">
|
||||
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
|
||||
<Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
<StepperPanel header="Header 3">
|
||||
<template #content="{ prevCallback }">
|
||||
<p class="m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<div class="flex gap-2 justify-content-end">
|
||||
<Button label="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
|
||||
<StepperPanel header="Header II">
|
||||
<template #content="{ prevCallback, nextCallback }">
|
||||
<div class="flex flex-column h-12rem">
|
||||
<div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
|
||||
</div>
|
||||
<div class="flex pt-4 justify-content-between">
|
||||
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
|
||||
<Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
<StepperPanel header="Header III">
|
||||
<template #content="{ prevCallback, nextCallback }">
|
||||
<div class="flex flex-column h-12rem">
|
||||
<div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
|
||||
</div>
|
||||
<div class="flex pt-4 justify-content-between">
|
||||
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
|
||||
<Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
|
|
@ -90,37 +88,36 @@ export default {
|
|||
<template>
|
||||
<div class="card">
|
||||
<Stepper>
|
||||
<StepperPanel header="Header 1">
|
||||
<template #content="{ nextCallback }">
|
||||
<p class="m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<div class="flex gap-2 justify-content-end">
|
||||
<Button label="Next" @click="(event) => nextCallback(event)" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
<StepperPanel header="Header 2">
|
||||
<StepperPanel header="Header I">
|
||||
<template #content="{ prevCallback, nextCallback }">
|
||||
<p class="m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<div class="flex gap-2 justify-content-end">
|
||||
<Button label="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
|
||||
<Button label="Next" @click="(event) => nextCallback(event)" />
|
||||
<div class="flex flex-column h-12rem">
|
||||
<div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
|
||||
</div>
|
||||
<div class="flex pt-4 justify-content-between">
|
||||
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
|
||||
<Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
<StepperPanel header="Header 3">
|
||||
<template #content="{ prevCallback }">
|
||||
<p class="m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<div class="flex gap-2 justify-content-end">
|
||||
<Button label="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
|
||||
<StepperPanel header="Header II">
|
||||
<template #content="{ prevCallback, nextCallback }">
|
||||
<div class="flex flex-column h-12rem">
|
||||
<div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
|
||||
</div>
|
||||
<div class="flex pt-4 justify-content-between">
|
||||
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
|
||||
<Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
<StepperPanel header="Header III">
|
||||
<template #content="{ prevCallback, nextCallback }">
|
||||
<div class="flex flex-column h-12rem">
|
||||
<div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
|
||||
</div>
|
||||
<div class="flex pt-4 justify-content-between">
|
||||
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
|
||||
<Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
|
|
@ -132,37 +129,36 @@ export default {
|
|||
<template>
|
||||
<div class="card">
|
||||
<Stepper>
|
||||
<StepperPanel header="Header 1">
|
||||
<template #content="{ nextCallback }">
|
||||
<p class="m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<div class="flex gap-2 justify-content-end">
|
||||
<Button label="Next" @click="(event) => nextCallback(event)" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
<StepperPanel header="Header 2">
|
||||
<StepperPanel header="Header I">
|
||||
<template #content="{ prevCallback, nextCallback }">
|
||||
<p class="m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<div class="flex gap-2 justify-content-end">
|
||||
<Button label="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
|
||||
<Button label="Next" @click="(event) => nextCallback(event)" />
|
||||
<div class="flex flex-column h-12rem">
|
||||
<div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
|
||||
</div>
|
||||
<div class="flex pt-4 justify-content-between">
|
||||
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
|
||||
<Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
<StepperPanel header="Header 3">
|
||||
<template #content="{ prevCallback }">
|
||||
<p class="m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<div class="flex gap-2 justify-content-end">
|
||||
<Button label="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
|
||||
<StepperPanel header="Header II">
|
||||
<template #content="{ prevCallback, nextCallback }">
|
||||
<div class="flex flex-column h-12rem">
|
||||
<div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
|
||||
</div>
|
||||
<div class="flex pt-4 justify-content-between">
|
||||
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
|
||||
<Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
<StepperPanel header="Header III">
|
||||
<template #content="{ prevCallback, nextCallback }">
|
||||
<div class="flex flex-column h-12rem">
|
||||
<div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
|
||||
</div>
|
||||
<div class="flex pt-4 justify-content-between">
|
||||
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
|
||||
<Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue