mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-09 08:52:34 +00:00
Stepper docs updated
This commit is contained in:
tugcekucukoglu
parent
033a50fcbb
commit
33e4ceda39
9 changed files with 2247 additions and 782 deletions
|
|
@ -1,40 +1,43 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Layout of the Stepper is configured with the <i>orientation</i> property that accepts <i>horizontal</i> and <i>vertical</i> as available options.</p>
|
||||
<p>Layout of the Stepper is configured with the <i>StepItem</i> helper component.</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<Stepper orientation="vertical">
|
||||
<StepperPanel header="Header I">
|
||||
<template #content="{ nextCallback }">
|
||||
<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 py-6">
|
||||
<Button label="Next" @click="nextCallback" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
<StepperPanel header="Header II">
|
||||
<template #content="{ prevCallback, nextCallback }">
|
||||
<Stepper value="1">
|
||||
<StepItem value="1">
|
||||
<Step>Header I</Step>
|
||||
<StepPanel v-slot="{ activateCallback }">
|
||||
<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 py-6 gap-2">
|
||||
<Button label="Back" severity="secondary" @click="prevCallback" />
|
||||
<Button label="Next" @click="nextCallback" />
|
||||
<div class="flex pt-6 justify-start">
|
||||
<Button label="Next" @click="activateCallback('2')" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
<StepperPanel header="Header III">
|
||||
<template #content="{ prevCallback }">
|
||||
</StepPanel>
|
||||
</StepItem>
|
||||
<StepItem value="2">
|
||||
<Step>Header II</Step>
|
||||
<StepPanel v-slot="{ activateCallback }">
|
||||
<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" @click="activateCallback('1')" />
|
||||
<Button label="Next" iconPos="right" @click="activateCallback('3')" />
|
||||
</div>
|
||||
</StepPanel>
|
||||
</StepItem>
|
||||
<StepItem value="3">
|
||||
<Step>Header III</Step>
|
||||
<StepPanel v-slot="{ activateCallback }">
|
||||
<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="flex py-6">
|
||||
<Button label="Back" severity="secondary" @click="prevCallback" />
|
||||
<div class="flex pt-6 justify-start">
|
||||
<Button label="Back" severity="secondary" @click="activateCallback('2')" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
</StepPanel>
|
||||
</StepItem>
|
||||
</Stepper>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
|
|
@ -46,75 +49,81 @@ export default {
|
|||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<Stepper orientation="vertical">
|
||||
<StepperPanel header="Header I">
|
||||
<template #content="{ nextCallback }">
|
||||
<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 py-6">
|
||||
<Button label="Next" @click="nextCallback" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
<StepperPanel header="Header II">
|
||||
<template #content="{ prevCallback, nextCallback }">
|
||||
<Stepper value="1">
|
||||
<StepItem value="1">
|
||||
<Step>Header I</Step>
|
||||
<StepPanel v-slot="{ activateCallback }">
|
||||
<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 py-6 gap-2">
|
||||
<Button label="Back" severity="secondary" @click="prevCallback" />
|
||||
<Button label="Next" @click="nextCallback" />
|
||||
<div class="flex pt-6 justify-start">
|
||||
<Button label="Next" @click="activateCallback('2')" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
<StepperPanel header="Header III">
|
||||
<template #content="{ prevCallback }">
|
||||
</StepPanel>
|
||||
</StepItem>
|
||||
<StepItem value="2">
|
||||
<Step>Header II</Step>
|
||||
<StepPanel v-slot="{ activateCallback }">
|
||||
<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" @click="activateCallback('1')" />
|
||||
<Button label="Next" iconPos="right" @click="activateCallback('3')" />
|
||||
</div>
|
||||
</StepPanel>
|
||||
</StepItem>
|
||||
<StepItem value="3">
|
||||
<Step>Header III</Step>
|
||||
<StepPanel v-slot="{ activateCallback }">
|
||||
<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="flex py-6">
|
||||
<Button label="Back" severity="secondary" @click="prevCallback" />
|
||||
<div class="flex pt-6 justify-start">
|
||||
<Button label="Back" severity="secondary" @click="activateCallback('2')" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
</StepPanel>
|
||||
</StepItem>
|
||||
</Stepper>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Stepper orientation="vertical">
|
||||
<StepperPanel header="Header I">
|
||||
<template #content="{ nextCallback }">
|
||||
<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 py-6">
|
||||
<Button label="Next" @click="nextCallback" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
<StepperPanel header="Header II">
|
||||
<template #content="{ prevCallback, nextCallback }">
|
||||
<Stepper value="1">
|
||||
<StepItem value="1">
|
||||
<Step>Header I</Step>
|
||||
<StepPanel v-slot="{ activateCallback }">
|
||||
<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 py-6 gap-2">
|
||||
<Button label="Back" severity="secondary" @click="prevCallback" />
|
||||
<Button label="Next" @click="nextCallback" />
|
||||
<div class="flex pt-6 justify-start">
|
||||
<Button label="Next" @click="activateCallback('2')" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
<StepperPanel header="Header III">
|
||||
<template #content="{ prevCallback }">
|
||||
</StepPanel>
|
||||
</StepItem>
|
||||
<StepItem value="2">
|
||||
<Step>Header II</Step>
|
||||
<StepPanel v-slot="{ activateCallback }">
|
||||
<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" @click="activateCallback('1')" />
|
||||
<Button label="Next" iconPos="right" @click="activateCallback('3')" />
|
||||
</div>
|
||||
</StepPanel>
|
||||
</StepItem>
|
||||
<StepItem value="3">
|
||||
<Step>Header III</Step>
|
||||
<StepPanel v-slot="{ activateCallback }">
|
||||
<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="flex py-6">
|
||||
<Button label="Back" severity="secondary" @click="prevCallback" />
|
||||
<div class="flex pt-6 justify-start">
|
||||
<Button label="Back" severity="secondary" @click="activateCallback('2')" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
</StepPanel>
|
||||
</StepItem>
|
||||
</Stepper>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -122,38 +131,41 @@ export default {
|
|||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Stepper orientation="vertical">
|
||||
<StepperPanel header="Header I">
|
||||
<template #content="{ nextCallback }">
|
||||
<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 py-6">
|
||||
<Button label="Next" @click="nextCallback" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
<StepperPanel header="Header II">
|
||||
<template #content="{ prevCallback, nextCallback }">
|
||||
<Stepper value="1">
|
||||
<StepItem value="1">
|
||||
<Step>Header I</Step>
|
||||
<StepPanel v-slot="{ activateCallback }">
|
||||
<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 py-6 gap-2">
|
||||
<Button label="Back" severity="secondary" @click="prevCallback" />
|
||||
<Button label="Next" @click="nextCallback" />
|
||||
<div class="flex pt-6 justify-start">
|
||||
<Button label="Next" @click="activateCallback('2')" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
<StepperPanel header="Header III">
|
||||
<template #content="{ prevCallback }">
|
||||
</StepPanel>
|
||||
</StepItem>
|
||||
<StepItem value="2">
|
||||
<Step>Header II</Step>
|
||||
<StepPanel v-slot="{ activateCallback }">
|
||||
<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" @click="activateCallback('1')" />
|
||||
<Button label="Next" iconPos="right" @click="activateCallback('3')" />
|
||||
</div>
|
||||
</StepPanel>
|
||||
</StepItem>
|
||||
<StepItem value="3">
|
||||
<Step>Header III</Step>
|
||||
<StepPanel v-slot="{ activateCallback }">
|
||||
<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="flex py-6">
|
||||
<Button label="Back" severity="secondary" @click="prevCallback" />
|
||||
<div class="flex pt-6 justify-start">
|
||||
<Button label="Back" severity="secondary" @click="activateCallback('2')" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
</StepPanel>
|
||||
</StepItem>
|
||||
</Stepper>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue