<template> <DocSectionText v-bind="$attrs"> <p> Stepper consists of one or more StepperPanel elements to encapsulate each step in the progress. The elements to navigate between the steps are not built-in for ease of customization, instead <i>prevCallback</i> and <i>nextCallback</i> events should be bound to your custom UI elements. </p> </DocSectionText> <div class="card flex justify-center"> <Stepper> <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 pt-6 justify-end"> <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" /> </div> </template> </StepperPanel> <StepperPanel header="Header II"> <template #content="{ prevCallback, 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 II</div> </div> <div class="flex pt-6 justify-between"> <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" /> <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" /> </div> </template> </StepperPanel> <StepperPanel header="Header III"> <template #content="{ prevCallback }"> <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 pt-6 justify-start"> <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" /> </div> </template> </StepperPanel> </Stepper> </div> <DocSectionCode :code="code" /> </template> <script> export default { data() { return { code: { basic: ` <Stepper> <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 pt-6 justify-end"> <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" /> </div> </template> </StepperPanel> <StepperPanel header="Header II"> <template #content="{ prevCallback, 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 II</div> </div> <div class="flex pt-6 justify-between"> <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" /> <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" /> </div> </template> </StepperPanel> <StepperPanel header="Header III"> <template #content="{ prevCallback }"> <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 pt-6 justify-start"> <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" /> </div> </template> </StepperPanel> </Stepper> `, options: ` <template> <div class="card flex justify-center"> <Stepper> <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 pt-6 justify-end"> <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" /> </div> </template> </StepperPanel> <StepperPanel header="Header II"> <template #content="{ prevCallback, 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 II</div> </div> <div class="flex pt-6 justify-between"> <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" /> <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" /> </div> </template> </StepperPanel> <StepperPanel header="Header III"> <template #content="{ prevCallback }"> <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 pt-6 justify-start"> <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" /> </div> </template> </StepperPanel> </Stepper> </div> </template> <style scoped> .p-stepper { flex-basis: 50rem; } <\/style> `, composition: ` <template> <div class="card flex justify-center"> <Stepper> <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 pt-6 justify-end"> <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" /> </div> </template> </StepperPanel> <StepperPanel header="Header II"> <template #content="{ prevCallback, 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 II</div> </div> <div class="flex pt-6 justify-between"> <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" /> <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" /> </div> </template> </StepperPanel> <StepperPanel header="Header III"> <template #content="{ prevCallback }"> <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 pt-6 justify-start"> <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" /> </div> </template> </StepperPanel> </Stepper> </div> </template> <style scoped> .p-stepper { flex-basis: 50rem; } <\/style> ` } }; } }; </script> <style scoped> .p-stepper { flex-basis: 50rem; } </style>