Stepper docs updated
tugcekucukoglu
parent
033a50fcbb
commit
33e4ceda39
File diff suppressed because it is too large
Load Diff
|
|
@ -1,43 +1,43 @@
|
|||
<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 v-bind="$attrs">
|
||||
<p>Stepepr comprises a combination of <i>StepList</i>, <i>Step</i>, <i>StepPanels</i> and <i>StepPanel</i> components. The <i>value</i> property is essential for associating Step and StepPanel with each other.</p>
|
||||
</DocSectionText>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-center">
|
||||
<Stepper>
|
||||
<StepperPanel header="Header I">
|
||||
<template #content="{ nextCallback }">
|
||||
<Stepper value="1" class="basis-[50rem]">
|
||||
<StepList>
|
||||
<Step value="1">Header I</Step>
|
||||
<Step value="2">Header II</Step>
|
||||
<Step value="3">Header III</Step>
|
||||
</StepList>
|
||||
<StepPanels>
|
||||
<StepPanel v-slot="{ activateCallback }" 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 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-end">
|
||||
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
|
||||
<div class="flex pt-6 justify-start">
|
||||
<Button label="Next" icon="pi pi-arrow-right" @click="activateCallback('2')" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
<StepperPanel header="Header II">
|
||||
<template #content="{ prevCallback, nextCallback }">
|
||||
</StepPanel>
|
||||
<StepPanel v-slot="{ activateCallback }" 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" @click="prevCallback" />
|
||||
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
|
||||
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('1')" />
|
||||
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback('3')" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
<StepperPanel header="Header III">
|
||||
<template #content="{ prevCallback }">
|
||||
</StepPanel>
|
||||
<StepPanel v-slot="{ activateCallback }" 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="flex pt-6 justify-start">
|
||||
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
|
||||
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('2')" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
</StepPanel>
|
||||
</StepPanels>
|
||||
</Stepper>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
|
|
@ -49,138 +49,123 @@ export default {
|
|||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<Stepper>
|
||||
<StepperPanel header="Header I">
|
||||
<template #content="{ nextCallback }">
|
||||
<Stepper value="1">
|
||||
<StepList>
|
||||
<Step value="1">Header I</Step>
|
||||
<Step value="2">Header II</Step>
|
||||
<Step value="3">Header III</Step>
|
||||
</StepList>
|
||||
<StepPanels>
|
||||
<StepPanel v-slot="{ activateCallback }" 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 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-end">
|
||||
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
|
||||
<div class="flex pt-6 justify-start">
|
||||
<Button label="Next" icon="pi pi-arrow-right" @click="activateCallback('2')" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
<StepperPanel header="Header II">
|
||||
<template #content="{ prevCallback, nextCallback }">
|
||||
</StepPanel>
|
||||
<StepPanel v-slot="{ activateCallback }" 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" @click="prevCallback" />
|
||||
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
|
||||
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('1')" />
|
||||
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback('3')" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
<StepperPanel header="Header III">
|
||||
<template #content="{ prevCallback }">
|
||||
</StepPanel>
|
||||
<StepPanel v-slot="{ activateCallback }" 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="flex pt-6 justify-start">
|
||||
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
|
||||
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('2')" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
</StepPanel>
|
||||
</StepPanels>
|
||||
</Stepper>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<Stepper>
|
||||
<StepperPanel header="Header I">
|
||||
<template #content="{ nextCallback }">
|
||||
<Stepper value="1" class="basis-[50rem]">
|
||||
<StepList>
|
||||
<Step value="1">Header I</Step>
|
||||
<Step value="2">Header II</Step>
|
||||
<Step value="3">Header III</Step>
|
||||
</StepList>
|
||||
<StepPanels>
|
||||
<StepPanel v-slot="{ activateCallback }" 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 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-end">
|
||||
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
|
||||
<div class="flex pt-6 justify-start">
|
||||
<Button label="Next" icon="pi pi-arrow-right" @click="activateCallback('2')" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
<StepperPanel header="Header II">
|
||||
<template #content="{ prevCallback, nextCallback }">
|
||||
</StepPanel>
|
||||
<StepPanel v-slot="{ activateCallback }" 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" @click="prevCallback" />
|
||||
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
|
||||
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('1')" />
|
||||
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback('3')" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
<StepperPanel header="Header III">
|
||||
<template #content="{ prevCallback }">
|
||||
</StepPanel>
|
||||
<StepPanel v-slot="{ activateCallback }" 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="flex pt-6 justify-start">
|
||||
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
|
||||
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('2')" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
</StepPanel>
|
||||
</StepPanels>
|
||||
</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 }">
|
||||
<Stepper value="1" class="basis-[50rem]">
|
||||
<StepList>
|
||||
<Step value="1">Header I</Step>
|
||||
<Step value="2">Header II</Step>
|
||||
<Step value="3">Header III</Step>
|
||||
</StepList>
|
||||
<StepPanels>
|
||||
<StepPanel v-slot="{ activateCallback }" 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 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-end">
|
||||
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
|
||||
<div class="flex pt-6 justify-start">
|
||||
<Button label="Next" icon="pi pi-arrow-right" @click="activateCallback('2')" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
<StepperPanel header="Header II">
|
||||
<template #content="{ prevCallback, nextCallback }">
|
||||
</StepPanel>
|
||||
<StepPanel v-slot="{ activateCallback }" 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" @click="prevCallback" />
|
||||
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
|
||||
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('1')" />
|
||||
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback('3')" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
<StepperPanel header="Header III">
|
||||
<template #content="{ prevCallback }">
|
||||
</StepPanel>
|
||||
<StepPanel v-slot="{ activateCallback }" 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="flex pt-6 justify-start">
|
||||
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
|
||||
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('2')" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
</StepPanel>
|
||||
</StepPanels>
|
||||
</Stepper>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.p-stepper {
|
||||
flex-basis: 50rem;
|
||||
}
|
||||
<\/style>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.p-stepper {
|
||||
flex-basis: 50rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -10,7 +10,11 @@ export default {
|
|||
code: {
|
||||
basic: `
|
||||
import Stepper from 'primevue/stepper';
|
||||
import StepperPanel from 'primevue/stepperpanel';
|
||||
import StepList from 'primevue/steplist';
|
||||
import StepPanels from 'primevue/steppanels';
|
||||
import StepItem from 'primevue/stepitem';
|
||||
import Step from 'primevue/step';
|
||||
import StepPanel from 'primevue/steppanel';
|
||||
`
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,38 +3,39 @@
|
|||
<p>When <i>linear</i> property is present, current step must be completed in order to move to the next step.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-center">
|
||||
<Stepper linear>
|
||||
<StepperPanel header="Header I">
|
||||
<template #content="{ nextCallback }">
|
||||
<Stepper value="1" linear class="basis-[50rem]">
|
||||
<StepList>
|
||||
<Step value="1">Header I</Step>
|
||||
<Step value="2">Header II</Step>
|
||||
<Step value="3">Header III</Step>
|
||||
</StepList>
|
||||
<StepPanels>
|
||||
<StepPanel v-slot="{ activateCallback }" 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 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-end">
|
||||
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
|
||||
<div class="flex pt-6 justify-start">
|
||||
<Button label="Next" icon="pi pi-arrow-right" @click="activateCallback('2')" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
<StepperPanel header="Header II">
|
||||
<template #content="{ prevCallback, nextCallback }">
|
||||
</StepPanel>
|
||||
<StepPanel v-slot="{ activateCallback }" 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" @click="prevCallback" />
|
||||
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
|
||||
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('1')" />
|
||||
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback('3')" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
<StepperPanel header="Header III">
|
||||
<template #content="{ prevCallback }">
|
||||
</StepPanel>
|
||||
<StepPanel v-slot="{ activateCallback }" 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="flex pt-6 justify-start">
|
||||
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
|
||||
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('2')" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
</StepPanel>
|
||||
</StepPanels>
|
||||
</Stepper>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
|
|
@ -46,138 +47,123 @@ export default {
|
|||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<Stepper linear>
|
||||
<StepperPanel header="Header I">
|
||||
<template #content="{ nextCallback }">
|
||||
<Stepper value="1" linear>
|
||||
<StepList>
|
||||
<Step value="1">Header I</Step>
|
||||
<Step value="2">Header II</Step>
|
||||
<Step value="3">Header III</Step>
|
||||
</StepList>
|
||||
<StepPanels>
|
||||
<StepPanel v-slot="{ activateCallback }" 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 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-end">
|
||||
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
|
||||
<div class="flex pt-6 justify-start">
|
||||
<Button label="Next" icon="pi pi-arrow-right" @click="activateCallback('2')" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
<StepperPanel header="Header II">
|
||||
<template #content="{ prevCallback, nextCallback }">
|
||||
</StepPanel>
|
||||
<StepPanel v-slot="{ activateCallback }" 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" @click="prevCallback" />
|
||||
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
|
||||
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('1')" />
|
||||
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback('3')" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
<StepperPanel header="Header III">
|
||||
<template #content="{ prevCallback }">
|
||||
</StepPanel>
|
||||
<StepPanel v-slot="{ activateCallback }" 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="flex pt-6 justify-start">
|
||||
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
|
||||
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('2')" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
</StepPanel>
|
||||
</StepPanels>
|
||||
</Stepper>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<Stepper linear>
|
||||
<StepperPanel header="Header I">
|
||||
<template #content="{ nextCallback }">
|
||||
<Stepper value="1" linear class="basis-[50rem]">
|
||||
<StepList>
|
||||
<Step value="1">Header I</Step>
|
||||
<Step value="2">Header II</Step>
|
||||
<Step value="3">Header III</Step>
|
||||
</StepList>
|
||||
<StepPanels>
|
||||
<StepPanel v-slot="{ activateCallback }" 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 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-end">
|
||||
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
|
||||
<div class="flex pt-6 justify-start">
|
||||
<Button label="Next" icon="pi pi-arrow-right" @click="activateCallback('2')" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
<StepperPanel header="Header II">
|
||||
<template #content="{ prevCallback, nextCallback }">
|
||||
</StepPanel>
|
||||
<StepPanel v-slot="{ activateCallback }" 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" @click="prevCallback" />
|
||||
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
|
||||
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('1')" />
|
||||
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback('3')" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
<StepperPanel header="Header III">
|
||||
<template #content="{ prevCallback }">
|
||||
</StepPanel>
|
||||
<StepPanel v-slot="{ activateCallback }" 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="flex pt-6 justify-start">
|
||||
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
|
||||
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('2')" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
</StepPanel>
|
||||
</StepPanels>
|
||||
</Stepper>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.p-stepper {
|
||||
flex-basis: 50rem;
|
||||
}
|
||||
<\/style>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<Stepper linear>
|
||||
<StepperPanel header="Header I">
|
||||
<template #content="{ nextCallback }">
|
||||
<Stepper value="1" linear class="basis-[50rem]">
|
||||
<StepList>
|
||||
<Step value="1">Header I</Step>
|
||||
<Step value="2">Header II</Step>
|
||||
<Step value="3">Header III</Step>
|
||||
</StepList>
|
||||
<StepPanels>
|
||||
<StepPanel v-slot="{ activateCallback }" 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 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-end">
|
||||
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
|
||||
<div class="flex pt-6 justify-start">
|
||||
<Button label="Next" icon="pi pi-arrow-right" @click="activateCallback('2')" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
<StepperPanel header="Header II">
|
||||
<template #content="{ prevCallback, nextCallback }">
|
||||
</StepPanel>
|
||||
<StepPanel v-slot="{ activateCallback }" 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" @click="prevCallback" />
|
||||
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
|
||||
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('1')" />
|
||||
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback('3')" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
<StepperPanel header="Header III">
|
||||
<template #content="{ prevCallback }">
|
||||
</StepPanel>
|
||||
<StepPanel v-slot="{ activateCallback }" 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="flex pt-6 justify-start">
|
||||
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
|
||||
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('2')" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
</StepPanel>
|
||||
</StepPanels>
|
||||
</Stepper>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.p-stepper {
|
||||
flex-basis: 50rem;
|
||||
}
|
||||
<\/style>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.p-stepper {
|
||||
flex-basis: 50rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,54 +1,74 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Stepper provides various templating options to customize the default UI design.</p>
|
||||
<p>Custom content for a tab is defined using <i>as</i> or <i>asChild</i> properties.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-center">
|
||||
<Stepper v-model:activeStep="active">
|
||||
<StepperPanel>
|
||||
<template #header="{ index, clickCallback }">
|
||||
<button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="clickCallback">
|
||||
<span :class="['rounded-full border-2 w-12 h-12 inline-flex items-center justify-center', { 'bg-primary text-primary-contrast border-primary': index <= active, 'border-surface-200 dark:border-surface-700': index > active }]">
|
||||
<Stepper v-model:value="activeStep" class="basis-[40rem]">
|
||||
<StepList>
|
||||
<Step v-slot="{ activateCallback, value, a11yAttrs }" asChild :value="1">
|
||||
<div class="flex flex-row flex-auto gap-2" v-bind="a11yAttrs.root">
|
||||
<button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="activateCallback" v-bind="a11yAttrs.header">
|
||||
<span
|
||||
:class="[
|
||||
'rounded-full border-2 w-12 h-12 inline-flex items-center justify-center',
|
||||
{ 'bg-primary text-primary-contrast border-primary': value <= activeStep, 'border-surface-200 dark:border-surface-700': value > activeStep }
|
||||
]"
|
||||
>
|
||||
<i class="pi pi-user" />
|
||||
</span>
|
||||
</button>
|
||||
</template>
|
||||
<template #content="{ nextCallback }">
|
||||
<div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 20rem">
|
||||
<div class="text-center mt-4 mb-4 text-xl font-semibold">Create your account</div>
|
||||
<div class="field p-fluid">
|
||||
<IconField>
|
||||
<InputIcon>
|
||||
<i class="pi pi-user" />
|
||||
</InputIcon>
|
||||
<InputText id="input" v-model="name" type="text" placeholder="Name" />
|
||||
</IconField>
|
||||
<Divider />
|
||||
</div>
|
||||
<div class="field p-fluid">
|
||||
<IconField>
|
||||
<InputIcon>
|
||||
<i class="pi pi-envelope" />
|
||||
</InputIcon>
|
||||
<InputText id="email" v-model="email" type="email" placeholder="Email" />
|
||||
</IconField>
|
||||
</div>
|
||||
<div class="field p-fluid">
|
||||
<Password v-model="password" toggleMask placeholder="Password" />
|
||||
</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>
|
||||
<template #header="{ index, clickCallback }">
|
||||
<button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="clickCallback">
|
||||
<span :class="['rounded-full border-2 w-12 h-12 inline-flex items-center justify-center', { 'bg-primary text-primary-contrast border-primary': index <= active, 'border-surface-200 dark:border-surface-700': index > active }]">
|
||||
</Step>
|
||||
<Step v-slot="{ activateCallback, value, a11yAttrs }" asChild :value="2">
|
||||
<div class="flex flex-row flex-auto gap-2 pl-2" v-bind="a11yAttrs.root">
|
||||
<button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="activateCallback" v-bind="a11yAttrs.header">
|
||||
<span
|
||||
:class="[
|
||||
'rounded-full border-2 w-12 h-12 inline-flex items-center justify-center',
|
||||
{ 'bg-primary text-primary-contrast border-primary': value <= activeStep, 'border-surface-200 dark:border-surface-700': value > activeStep }
|
||||
]"
|
||||
>
|
||||
<i class="pi pi-star" />
|
||||
</span>
|
||||
</button>
|
||||
</template>
|
||||
<template #content="{ prevCallback, nextCallback }">
|
||||
<Divider />
|
||||
</div>
|
||||
</Step>
|
||||
<Step v-slot="{ activateCallback, value, a11yAttrs }" asChild :value="3">
|
||||
<div class="flex flex-row pl-2" v-bind="a11yAttrs.root">
|
||||
<button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="activateCallback" v-bind="a11yAttrs.header">
|
||||
<span
|
||||
:class="[
|
||||
'rounded-full border-2 w-12 h-12 inline-flex items-center justify-center',
|
||||
{ 'bg-primary text-primary-contrast border-primary': value <= activeStep, 'border-surface-200 dark:border-surface-700': value > activeStep }
|
||||
]"
|
||||
>
|
||||
<i class="pi pi-id-card" />
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</Step>
|
||||
</StepList>
|
||||
<StepPanels>
|
||||
<StepPanel v-slot="{ activateCallback }" :value="1">
|
||||
<div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 20rem">
|
||||
<div class="text-center mt-4 mb-4 text-xl font-semibold">Create your account</div>
|
||||
<div class="field p-fluid">
|
||||
<InputText id="input" v-model="name" type="text" placeholder="Name" />
|
||||
</div>
|
||||
<div class="field p-fluid">
|
||||
<InputText id="email" v-model="email" type="email" placeholder="Email" />
|
||||
</div>
|
||||
<div class="field p-fluid">
|
||||
<Password v-model="password" placeholder="Password" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex pt-6 justify-end">
|
||||
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback(2)" />
|
||||
</div>
|
||||
</StepPanel>
|
||||
<StepPanel v-slot="{ activateCallback }" :value="2">
|
||||
<div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
|
||||
<div class="text-center mt-4 mb-4 text-xl font-semibold">Choose your interests</div>
|
||||
<div class="flex flex-wrap justify-center gap-4">
|
||||
|
|
@ -65,20 +85,11 @@
|
|||
</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" />
|
||||
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback(1)" />
|
||||
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback(3)" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
<StepperPanel>
|
||||
<template #header="{ index, clickCallback }">
|
||||
<button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="clickCallback">
|
||||
<span :class="['rounded-full border-2 w-12 h-12 inline-flex items-center justify-center', { 'bg-primary text-primary-contrast border-primary': index <= active, 'border-surface-200 dark:border-surface-700': index > active }]">
|
||||
<i class="pi pi-id-card" />
|
||||
</span>
|
||||
</button>
|
||||
</template>
|
||||
<template #content="{ prevCallback }">
|
||||
</StepPanel>
|
||||
<StepPanel v-slot="{ activateCallback }" :value="3">
|
||||
<div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
|
||||
<div class="text-center mt-4 mb-4 text-xl font-semibold">Account created successfully</div>
|
||||
<div class="text-center">
|
||||
|
|
@ -86,10 +97,10 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="flex pt-6 justify-start">
|
||||
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
|
||||
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback(2)" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
</StepPanel>
|
||||
</StepPanels>
|
||||
</Stepper>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
|
|
@ -99,7 +110,7 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 0,
|
||||
activeStep: 1,
|
||||
name: null,
|
||||
email: null,
|
||||
password: null,
|
||||
|
|
@ -115,52 +126,72 @@ export default {
|
|||
option10: false,
|
||||
code: {
|
||||
basic: `
|
||||
<Stepper v-model:activeStep="active">
|
||||
<StepperPanel>
|
||||
<template #header="{ index, clickCallback }">
|
||||
<button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="clickCallback">
|
||||
<span :class="['rounded-full border-2 w-12 h-12 inline-flex items-center justify-center', { 'bg-primary text-primary-contrast border-primary': index <= active, 'border-surface-200 dark:border-surface-700': index > active }]">
|
||||
<Stepper v-model:value="activeStep" class="basis-[40rem]">
|
||||
<StepList>
|
||||
<Step v-slot="{ activateCallback, value, a11yAttrs }" asChild :value="1">
|
||||
<div class="flex flex-row flex-auto gap-2" v-bind="a11yAttrs.root">
|
||||
<button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="activateCallback" v-bind="a11yAttrs.header">
|
||||
<span
|
||||
:class="[
|
||||
'rounded-full border-2 w-12 h-12 inline-flex items-center justify-center',
|
||||
{ 'bg-primary text-primary-contrast border-primary': value <= activeStep, 'border-surface-200 dark:border-surface-700': value > activeStep }
|
||||
]"
|
||||
>
|
||||
<i class="pi pi-user" />
|
||||
</span>
|
||||
</button>
|
||||
</template>
|
||||
<template #content="{ nextCallback }">
|
||||
<div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 20rem">
|
||||
<div class="text-center mt-4 mb-4 text-xl font-semibold">Create your account</div>
|
||||
<div class="field p-fluid">
|
||||
<IconField>
|
||||
<InputIcon>
|
||||
<i class="pi pi-user" />
|
||||
</InputIcon>
|
||||
<InputText id="input" v-model="name" type="text" placeholder="Name" />
|
||||
</IconField>
|
||||
<Divider />
|
||||
</div>
|
||||
<div class="field p-fluid">
|
||||
<IconField>
|
||||
<InputIcon>
|
||||
<i class="pi pi-envelope" />
|
||||
</InputIcon>
|
||||
<InputText id="email" v-model="email" type="email" placeholder="Email" />
|
||||
</IconField>
|
||||
</div>
|
||||
<div class="field p-fluid">
|
||||
<Password v-model="password" toggleMask placeholder="Password" />
|
||||
</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>
|
||||
<template #header="{ index, clickCallback }">
|
||||
<button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="clickCallback">
|
||||
<span :class="['rounded-full border-2 w-12 h-12 inline-flex items-center justify-center', { 'bg-primary text-primary-contrast border-primary': index <= active, 'border-surface-200 dark:border-surface-700': index > active }]">
|
||||
</Step>
|
||||
<Step v-slot="{ activateCallback, value, a11yAttrs }" asChild :value="2">
|
||||
<div class="flex flex-row flex-auto gap-2 pl-2" v-bind="a11yAttrs.root">
|
||||
<button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="activateCallback" v-bind="a11yAttrs.header">
|
||||
<span
|
||||
:class="[
|
||||
'rounded-full border-2 w-12 h-12 inline-flex items-center justify-center',
|
||||
{ 'bg-primary text-primary-contrast border-primary': value <= activeStep, 'border-surface-200 dark:border-surface-700': value > activeStep }
|
||||
]"
|
||||
>
|
||||
<i class="pi pi-star" />
|
||||
</span>
|
||||
</button>
|
||||
</template>
|
||||
<template #content="{ prevCallback, nextCallback }">
|
||||
<Divider />
|
||||
</div>
|
||||
</Step>
|
||||
<Step v-slot="{ activateCallback, value, a11yAttrs }" asChild :value="3">
|
||||
<div class="flex flex-row pl-2" v-bind="a11yAttrs.root">
|
||||
<button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="activateCallback" v-bind="a11yAttrs.header">
|
||||
<span
|
||||
:class="[
|
||||
'rounded-full border-2 w-12 h-12 inline-flex items-center justify-center',
|
||||
{ 'bg-primary text-primary-contrast border-primary': value <= activeStep, 'border-surface-200 dark:border-surface-700': value > activeStep }
|
||||
]"
|
||||
>
|
||||
<i class="pi pi-id-card" />
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</Step>
|
||||
</StepList>
|
||||
<StepPanels>
|
||||
<StepPanel v-slot="{ activateCallback }" :value="1">
|
||||
<div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 20rem">
|
||||
<div class="text-center mt-4 mb-4 text-xl font-semibold">Create your account</div>
|
||||
<div class="field p-fluid">
|
||||
<InputText id="input" v-model="name" type="text" placeholder="Name" />
|
||||
</div>
|
||||
<div class="field p-fluid">
|
||||
<InputText id="email" v-model="email" type="email" placeholder="Email" />
|
||||
</div>
|
||||
<div class="field p-fluid">
|
||||
<Password v-model="password" placeholder="Password" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex pt-6 justify-end">
|
||||
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback(2)" />
|
||||
</div>
|
||||
</StepPanel>
|
||||
<StepPanel v-slot="{ activateCallback }" :value="2">
|
||||
<div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
|
||||
<div class="text-center mt-4 mb-4 text-xl font-semibold">Choose your interests</div>
|
||||
<div class="flex flex-wrap justify-center gap-4">
|
||||
|
|
@ -177,20 +208,11 @@ export default {
|
|||
</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" />
|
||||
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback(1)" />
|
||||
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback(3)" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
<StepperPanel>
|
||||
<template #header="{ index, clickCallback }">
|
||||
<button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="clickCallback">
|
||||
<span :class="['rounded-full border-2 w-12 h-12 inline-flex items-center justify-center', { 'bg-primary text-primary-contrast border-primary': index <= active, 'border-surface-200 dark:border-surface-700': index > active }]">
|
||||
<i class="pi pi-id-card" />
|
||||
</span>
|
||||
</button>
|
||||
</template>
|
||||
<template #content="{ prevCallback }">
|
||||
</StepPanel>
|
||||
<StepPanel v-slot="{ activateCallback }" :value="3">
|
||||
<div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
|
||||
<div class="text-center mt-4 mb-4 text-xl font-semibold">Account created successfully</div>
|
||||
<div class="text-center">
|
||||
|
|
@ -198,61 +220,81 @@ export default {
|
|||
</div>
|
||||
</div>
|
||||
<div class="flex pt-6 justify-start">
|
||||
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
|
||||
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback(2)" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
</StepPanel>
|
||||
</StepPanels>
|
||||
</Stepper>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<Stepper v-model:activeStep="active">
|
||||
<StepperPanel>
|
||||
<template #header="{ index, clickCallback }">
|
||||
<button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="clickCallback">
|
||||
<span :class="['rounded-full border-2 w-12 h-12 inline-flex items-center justify-center', { 'bg-primary text-primary-contrast border-primary': index <= active, 'border-surface-200 dark:border-surface-700': index > active }]">
|
||||
<Stepper v-model:value="activeStep" class="basis-[40rem]">
|
||||
<StepList>
|
||||
<Step v-slot="{ activateCallback, value, a11yAttrs }" asChild :value="1">
|
||||
<div class="flex flex-row flex-auto gap-2" v-bind="a11yAttrs.root">
|
||||
<button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="activateCallback" v-bind="a11yAttrs.header">
|
||||
<span
|
||||
:class="[
|
||||
'rounded-full border-2 w-12 h-12 inline-flex items-center justify-center',
|
||||
{ 'bg-primary text-primary-contrast border-primary': value <= activeStep, 'border-surface-200 dark:border-surface-700': value > activeStep }
|
||||
]"
|
||||
>
|
||||
<i class="pi pi-user" />
|
||||
</span>
|
||||
</button>
|
||||
</template>
|
||||
<template #content="{ nextCallback }">
|
||||
<div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 20rem">
|
||||
<div class="text-center mt-4 mb-4 text-xl font-semibold">Create your account</div>
|
||||
<div class="field p-fluid">
|
||||
<IconField>
|
||||
<InputIcon>
|
||||
<i class="pi pi-user" />
|
||||
</InputIcon>
|
||||
<InputText id="input" v-model="name" type="text" placeholder="Name" />
|
||||
</IconField>
|
||||
<Divider />
|
||||
</div>
|
||||
<div class="field p-fluid">
|
||||
<IconField>
|
||||
<InputIcon>
|
||||
<i class="pi pi-envelope" />
|
||||
</InputIcon>
|
||||
<InputText id="email" v-model="email" type="email" placeholder="Email" />
|
||||
</IconField>
|
||||
</div>
|
||||
<div class="field p-fluid">
|
||||
<Password v-model="password" toggleMask placeholder="Password" />
|
||||
</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>
|
||||
<template #header="{ index, clickCallback }">
|
||||
<button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="clickCallback">
|
||||
<span :class="['rounded-full border-2 w-12 h-12 inline-flex items-center justify-center', { 'bg-primary text-primary-contrast border-primary': index <= active, 'border-surface-200 dark:border-surface-700': index > active }]">
|
||||
</Step>
|
||||
<Step v-slot="{ activateCallback, value, a11yAttrs }" asChild :value="2">
|
||||
<div class="flex flex-row flex-auto gap-2 pl-2" v-bind="a11yAttrs.root">
|
||||
<button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="activateCallback" v-bind="a11yAttrs.header">
|
||||
<span
|
||||
:class="[
|
||||
'rounded-full border-2 w-12 h-12 inline-flex items-center justify-center',
|
||||
{ 'bg-primary text-primary-contrast border-primary': value <= activeStep, 'border-surface-200 dark:border-surface-700': value > activeStep }
|
||||
]"
|
||||
>
|
||||
<i class="pi pi-star" />
|
||||
</span>
|
||||
</button>
|
||||
</template>
|
||||
<template #content="{ prevCallback, nextCallback }">
|
||||
<Divider />
|
||||
</div>
|
||||
</Step>
|
||||
<Step v-slot="{ activateCallback, value, a11yAttrs }" asChild :value="3">
|
||||
<div class="flex flex-row pl-2" v-bind="a11yAttrs.root">
|
||||
<button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="activateCallback" v-bind="a11yAttrs.header">
|
||||
<span
|
||||
:class="[
|
||||
'rounded-full border-2 w-12 h-12 inline-flex items-center justify-center',
|
||||
{ 'bg-primary text-primary-contrast border-primary': value <= activeStep, 'border-surface-200 dark:border-surface-700': value > activeStep }
|
||||
]"
|
||||
>
|
||||
<i class="pi pi-id-card" />
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</Step>
|
||||
</StepList>
|
||||
<StepPanels>
|
||||
<StepPanel v-slot="{ activateCallback }" :value="1">
|
||||
<div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 20rem">
|
||||
<div class="text-center mt-4 mb-4 text-xl font-semibold">Create your account</div>
|
||||
<div class="field p-fluid">
|
||||
<InputText id="input" v-model="name" type="text" placeholder="Name" />
|
||||
</div>
|
||||
<div class="field p-fluid">
|
||||
<InputText id="email" v-model="email" type="email" placeholder="Email" />
|
||||
</div>
|
||||
<div class="field p-fluid">
|
||||
<Password v-model="password" placeholder="Password" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex pt-6 justify-end">
|
||||
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback(2)" />
|
||||
</div>
|
||||
</StepPanel>
|
||||
<StepPanel v-slot="{ activateCallback }" :value="2">
|
||||
<div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
|
||||
<div class="text-center mt-4 mb-4 text-xl font-semibold">Choose your interests</div>
|
||||
<div class="flex flex-wrap justify-center gap-4">
|
||||
|
|
@ -269,20 +311,11 @@ export default {
|
|||
</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" />
|
||||
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback(1)" />
|
||||
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback(3)" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
<StepperPanel>
|
||||
<template #header="{ index, clickCallback }">
|
||||
<button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="clickCallback">
|
||||
<span :class="['rounded-full border-2 w-12 h-12 inline-flex items-center justify-center', { 'bg-primary text-primary-contrast border-primary': index <= active, 'border-surface-200 dark:border-surface-700': index > active }]">
|
||||
<i class="pi pi-id-card" />
|
||||
</span>
|
||||
</button>
|
||||
</template>
|
||||
<template #content="{ prevCallback }">
|
||||
</StepPanel>
|
||||
<StepPanel v-slot="{ activateCallback }" :value="3">
|
||||
<div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
|
||||
<div class="text-center mt-4 mb-4 text-xl font-semibold">Account created successfully</div>
|
||||
<div class="text-center">
|
||||
|
|
@ -290,10 +323,10 @@ export default {
|
|||
</div>
|
||||
</div>
|
||||
<div class="flex pt-6 justify-start">
|
||||
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
|
||||
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback(2)" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
</StepPanel>
|
||||
</StepPanels>
|
||||
</Stepper>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -302,7 +335,7 @@ export default {
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 0,
|
||||
activeStep: 1,
|
||||
name: null,
|
||||
email: null,
|
||||
password: null,
|
||||
|
|
@ -320,63 +353,76 @@ export default {
|
|||
}
|
||||
}
|
||||
<\/script>
|
||||
|
||||
<style scoped>
|
||||
.p-stepper {
|
||||
flex-basis: 40rem;
|
||||
}
|
||||
<\/style>
|
||||
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<Stepper v-model:activeStep="active">
|
||||
<StepperPanel>
|
||||
<template #header="{ index, clickCallback }">
|
||||
<button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="clickCallback">
|
||||
<span :class="['rounded-full border-2 w-12 h-12 inline-flex items-center justify-center', { 'bg-primary text-primary-contrast border-primary': index <= active, 'border-surface-200 dark:border-surface-700': index > active }]">
|
||||
<Stepper v-model:value="activeStep" class="basis-[40rem]">
|
||||
<StepList>
|
||||
<Step v-slot="{ activateCallback, value, a11yAttrs }" asChild :value="1">
|
||||
<div class="flex flex-row flex-auto gap-2" v-bind="a11yAttrs.root">
|
||||
<button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="activateCallback" v-bind="a11yAttrs.header">
|
||||
<span
|
||||
:class="[
|
||||
'rounded-full border-2 w-12 h-12 inline-flex items-center justify-center',
|
||||
{ 'bg-primary text-primary-contrast border-primary': value <= activeStep, 'border-surface-200 dark:border-surface-700': value > activeStep }
|
||||
]"
|
||||
>
|
||||
<i class="pi pi-user" />
|
||||
</span>
|
||||
</button>
|
||||
</template>
|
||||
<template #content="{ nextCallback }">
|
||||
<div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 20rem">
|
||||
<div class="text-center mt-4 mb-4 text-xl font-semibold">Create your account</div>
|
||||
<div class="field p-fluid">
|
||||
<IconField>
|
||||
<InputIcon>
|
||||
<i class="pi pi-user" />
|
||||
</InputIcon>
|
||||
<InputText id="input" v-model="name" type="text" placeholder="Name" />
|
||||
</IconField>
|
||||
<Divider />
|
||||
</div>
|
||||
<div class="field p-fluid">
|
||||
<IconField>
|
||||
<InputIcon>
|
||||
<i class="pi pi-envelope" />
|
||||
</InputIcon>
|
||||
<InputText id="email" v-model="email" type="email" placeholder="Email" />
|
||||
</IconField>
|
||||
</div>
|
||||
<div class="field p-fluid">
|
||||
<Password v-model="password" toggleMask placeholder="Password" />
|
||||
</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>
|
||||
<template #header="{ index, clickCallback }">
|
||||
<button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="clickCallback">
|
||||
<span :class="['rounded-full border-2 w-12 h-12 inline-flex items-center justify-center', { 'bg-primary text-primary-contrast border-primary': index <= active, 'border-surface-200 dark:border-surface-700': index > active }]">
|
||||
</Step>
|
||||
<Step v-slot="{ activateCallback, value, a11yAttrs }" asChild :value="2">
|
||||
<div class="flex flex-row flex-auto gap-2 pl-2" v-bind="a11yAttrs.root">
|
||||
<button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="activateCallback" v-bind="a11yAttrs.header">
|
||||
<span
|
||||
:class="[
|
||||
'rounded-full border-2 w-12 h-12 inline-flex items-center justify-center',
|
||||
{ 'bg-primary text-primary-contrast border-primary': value <= activeStep, 'border-surface-200 dark:border-surface-700': value > activeStep }
|
||||
]"
|
||||
>
|
||||
<i class="pi pi-star" />
|
||||
</span>
|
||||
</button>
|
||||
</template>
|
||||
<template #content="{ prevCallback, nextCallback }">
|
||||
<Divider />
|
||||
</div>
|
||||
</Step>
|
||||
<Step v-slot="{ activateCallback, value, a11yAttrs }" asChild :value="3">
|
||||
<div class="flex flex-row pl-2" v-bind="a11yAttrs.root">
|
||||
<button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="activateCallback" v-bind="a11yAttrs.header">
|
||||
<span
|
||||
:class="[
|
||||
'rounded-full border-2 w-12 h-12 inline-flex items-center justify-center',
|
||||
{ 'bg-primary text-primary-contrast border-primary': value <= activeStep, 'border-surface-200 dark:border-surface-700': value > activeStep }
|
||||
]"
|
||||
>
|
||||
<i class="pi pi-id-card" />
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</Step>
|
||||
</StepList>
|
||||
<StepPanels>
|
||||
<StepPanel v-slot="{ activateCallback }" :value="1">
|
||||
<div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 20rem">
|
||||
<div class="text-center mt-4 mb-4 text-xl font-semibold">Create your account</div>
|
||||
<div class="field p-fluid">
|
||||
<InputText id="input" v-model="name" type="text" placeholder="Name" />
|
||||
</div>
|
||||
<div class="field p-fluid">
|
||||
<InputText id="email" v-model="email" type="email" placeholder="Email" />
|
||||
</div>
|
||||
<div class="field p-fluid">
|
||||
<Password v-model="password" placeholder="Password" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex pt-6 justify-end">
|
||||
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback(2)" />
|
||||
</div>
|
||||
</StepPanel>
|
||||
<StepPanel v-slot="{ activateCallback }" :value="2">
|
||||
<div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
|
||||
<div class="text-center mt-4 mb-4 text-xl font-semibold">Choose your interests</div>
|
||||
<div class="flex flex-wrap justify-center gap-4">
|
||||
|
|
@ -393,20 +439,11 @@ export default {
|
|||
</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" />
|
||||
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback(1)" />
|
||||
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback(3)" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
<StepperPanel>
|
||||
<template #header="{ index, clickCallback }">
|
||||
<button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="clickCallback">
|
||||
<span :class="['rounded-full border-2 w-12 h-12 inline-flex items-center justify-center', { 'bg-primary text-primary-contrast border-primary': index <= active, 'border-surface-200 dark:border-surface-700': index > active }]">
|
||||
<i class="pi pi-id-card" />
|
||||
</span>
|
||||
</button>
|
||||
</template>
|
||||
<template #content="{ prevCallback }">
|
||||
</StepPanel>
|
||||
<StepPanel v-slot="{ activateCallback }" :value="3">
|
||||
<div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
|
||||
<div class="text-center mt-4 mb-4 text-xl font-semibold">Account created successfully</div>
|
||||
<div class="text-center">
|
||||
|
|
@ -414,10 +451,10 @@ export default {
|
|||
</div>
|
||||
</div>
|
||||
<div class="flex pt-6 justify-start">
|
||||
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
|
||||
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback(2)" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
</StepPanel>
|
||||
</StepPanels>
|
||||
</Stepper>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -425,7 +462,7 @@ export default {
|
|||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const active = ref(0);
|
||||
const activeStep = ref(1);
|
||||
const completed = ref(false);
|
||||
const products = ref();
|
||||
const name = ref();
|
||||
|
|
@ -443,22 +480,9 @@ const option9 = ref(false);
|
|||
const option10 = ref(false);
|
||||
|
||||
<\/script>
|
||||
|
||||
<style scoped>
|
||||
.p-stepper {
|
||||
flex-basis: 40rem;
|
||||
}
|
||||
<\/style>
|
||||
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.p-stepper {
|
||||
flex-basis: 40rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -30,9 +30,33 @@ export default {
|
|||
},
|
||||
{
|
||||
id: 'pt.doc.stepperpanel',
|
||||
label: 'StepperPanel PT Options',
|
||||
label: 'StepList PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOptions('StepperPanel')
|
||||
data: getPTOptions('StepList')
|
||||
},
|
||||
{
|
||||
id: 'pt.doc.stepperpanel',
|
||||
label: 'StepPanels PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOptions('StepPanels')
|
||||
},
|
||||
{
|
||||
id: 'pt.doc.stepperpanel',
|
||||
label: 'StepItem PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOptions('StepItem')
|
||||
},
|
||||
{
|
||||
id: 'pt.doc.stepperpanel',
|
||||
label: 'Step PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOptions('Step')
|
||||
},
|
||||
{
|
||||
id: 'pt.doc.stepperpanel',
|
||||
label: 'StepPanel PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOptions('StepPanel')
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -23,11 +23,46 @@ export default {
|
|||
children: [
|
||||
{
|
||||
id: 'theming.classes',
|
||||
label: 'CSS Classes',
|
||||
label: 'Stepper CSS Classes',
|
||||
description: 'List of class names used in the styled mode.',
|
||||
component: DocApiTable,
|
||||
data: getStyleOptions('Stepper')
|
||||
},
|
||||
{
|
||||
id: 'theming.classes',
|
||||
label: 'StepList CSS Classes',
|
||||
description: 'List of class names used in the styled mode.',
|
||||
component: DocApiTable,
|
||||
data: getStyleOptions('StepList')
|
||||
},
|
||||
{
|
||||
id: 'theming.classes',
|
||||
label: 'StepPanels CSS Classes',
|
||||
description: 'List of class names used in the styled mode.',
|
||||
component: DocApiTable,
|
||||
data: getStyleOptions('StepPanels')
|
||||
},
|
||||
{
|
||||
id: 'theming.classes',
|
||||
label: 'StepItem CSS Classes',
|
||||
description: 'List of class names used in the styled mode.',
|
||||
component: DocApiTable,
|
||||
data: getStyleOptions('StepItem')
|
||||
},
|
||||
{
|
||||
id: 'theming.classes',
|
||||
label: 'Step CSS Classes',
|
||||
description: 'List of class names used in the styled mode.',
|
||||
component: DocApiTable,
|
||||
data: getStyleOptions('Step')
|
||||
},
|
||||
{
|
||||
id: 'theming.classes',
|
||||
label: 'StepPanel CSS Classes',
|
||||
description: 'List of class names used in the styled mode.',
|
||||
component: DocApiTable,
|
||||
data: getStyleOptions('StepPanel')
|
||||
},
|
||||
{
|
||||
id: 'theming.tokens',
|
||||
label: 'Design Tokens',
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
<script>
|
||||
import AccessibilityDoc from '@/doc/stepper/AccessibilityDoc.vue';
|
||||
import BasicDoc from '@/doc/stepper/BasicDoc.vue';
|
||||
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';
|
||||
|
|
@ -30,9 +30,9 @@ export default {
|
|||
component: ImportDoc
|
||||
},
|
||||
{
|
||||
id: 'basic',
|
||||
label: 'Basic',
|
||||
component: BasicDoc
|
||||
id: 'horizontal',
|
||||
label: 'Horizontal',
|
||||
component: HorizontalDoc
|
||||
},
|
||||
{
|
||||
id: 'vertical',
|
||||
|
|
|
|||
Loading…
Reference in New Issue