mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-10 17:32:36 +00:00
Stepper demos added
This commit is contained in:
tugcekucukoglu
parent
37c423b0c2
commit
14378cd8ec
16 changed files with 1438 additions and 4 deletions
300
doc/stepper/TemplateDoc.vue
Normal file
300
doc/stepper/TemplateDoc.vue
Normal file
|
|
@ -0,0 +1,300 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Each StepperPanel content can easily be customized with the default slot instead of using the built-in modes. Additionally, header, content, and separator sections of the StepperPanel are customizable via templating.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex flex-column justify-content-center">
|
||||
<Stepper
|
||||
v-model:activeStep="active"
|
||||
:pt="{
|
||||
stepperpanel: {
|
||||
separator: ({ context }) => ({
|
||||
style: { background: context.highlighted ? '#b9deb9' : '#ece9fc' }
|
||||
})
|
||||
}
|
||||
}"
|
||||
>
|
||||
<StepperPanel>
|
||||
<template #header="slotProps">
|
||||
<div :class="slotProps.class" @click="() => slotProps.clickCallback(event)">
|
||||
<Avatar :icon="slotProps.active ? 'pi pi-user' : 'pi pi-check'" :style="{ backgroundColor: slotProps.active ? '#ece9fc' : '#b9deb9' }" size="large" shape="circle" />
|
||||
<span class="text-lg ml-2">Account</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="flex flex-column justify-content-center gap-2 mx-auto" style="max-width: 20rem">
|
||||
<h3 class="text-center mt-3">Personal Details</h3>
|
||||
<div class="field p-fluid">
|
||||
<IconField>
|
||||
<InputIcon>
|
||||
<i class="pi pi-user" />
|
||||
</InputIcon>
|
||||
<InputText id="input" v-model="name" type="text" placeholder="Name" />
|
||||
</IconField>
|
||||
</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">
|
||||
<InputText v-model="password" type="text" placeholder="Password" />
|
||||
</div>
|
||||
<div class="field p-fluid">
|
||||
<InputText v-model="cpassword" type="text" placeholder="Confirm Password" />
|
||||
</div>
|
||||
</div>
|
||||
</StepperPanel>
|
||||
<StepperPanel>
|
||||
<template #header="slotProps">
|
||||
<div :class="slotProps.class" @click="() => slotProps.clickCallback(event)">
|
||||
<Avatar
|
||||
:icon="slotProps.highlighted || completed ? 'pi pi-check' : 'pi pi-shopping-cart'"
|
||||
:style="{ backgroundColor: slotProps.active ? '#ece9fc' : slotProps.highlighted || completed ? '#b9deb9' : null }"
|
||||
size="large"
|
||||
shape="circle"
|
||||
/>
|
||||
<span class="text-lg ml-2">Cart</span>
|
||||
</div>
|
||||
</template>
|
||||
<DataView :value="products">
|
||||
<template #header>
|
||||
<h3 class="text-center">Cart Details</h3>
|
||||
</template>
|
||||
<template #list="slotProps">
|
||||
<div class="grid grid-nogutter">
|
||||
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
|
||||
<div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
|
||||
<div class="md:w-10rem relative">
|
||||
<img class="block xl:block mx-auto border-round w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
|
||||
</div>
|
||||
<div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
|
||||
<div class="flex flex-row md:flex-column justify-content-between align-items-start gap-2">
|
||||
<div>
|
||||
<span class="font-medium text-secondary text-sm">{{ item.category }}</span>
|
||||
<div class="text-lg font-medium text-900 mt-2">{{ item.name }}</div>
|
||||
</div>
|
||||
<div class="surface-100 p-1" style="border-radius: 30px">
|
||||
<div class="surface-0 flex align-items-center gap-2 justify-content-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
|
||||
<span class="text-900 font-medium text-sm">{{ item.rating }}</span>
|
||||
<i class="pi pi-star-fill text-yellow-500"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-column md:align-items-end gap-5">
|
||||
<span class="text-xl font-semibold text-900">${{ item.price }}</span>
|
||||
<div class="flex flex-row-reverse md:flex-row gap-2">
|
||||
<InputNumber v-model="quantity[index]" showButtons buttonLayout="horizontal" inputClass="w-3rem text-center" :min="0">
|
||||
<template #incrementbuttonicon>
|
||||
<span class="pi pi-plus" />
|
||||
</template>
|
||||
<template #decrementbuttonicon>
|
||||
<span class="pi pi-minus" />
|
||||
</template>
|
||||
</InputNumber>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</DataView>
|
||||
</StepperPanel>
|
||||
<StepperPanel>
|
||||
<template #header="slotProps">
|
||||
<div :class="slotProps.class" @click="() => slotProps.clickCallback(event)">
|
||||
<Avatar
|
||||
:icon="slotProps.highlighted || completed ? 'pi pi-check' : 'pi pi-money-bill'"
|
||||
:style="{ backgroundColor: slotProps.active ? '#ece9fc' : slotProps.highlighted || completed ? '#b9deb9' : null }"
|
||||
size="large"
|
||||
shape="circle"
|
||||
/>
|
||||
<span class="text-lg ml-2">Billing</span>
|
||||
</div>
|
||||
</template>
|
||||
<h3 class="text-center mt-3">Payment</h3>
|
||||
<div class="grid formgrid p-fluid">
|
||||
<div class="col-12 field mb-4">
|
||||
<label class="text-900 font-medium mb-3 ml-1">Card Number</label>
|
||||
<InputMask v-model="cc" mask="9999-9999-9999-9999" placeholder="9999-9999-9999-9999" />
|
||||
</div>
|
||||
<div class="col-12 lg:col-6 field mb-4">
|
||||
<label class="text-900 font-medium mb-3 ml-1">Expiry Date</label>
|
||||
<InputMask v-model="exp" mask="99/99" placeholder="99/99" slotChar="MM/YY" />
|
||||
</div>
|
||||
<div class="col-12 lg:col-6 field mb-4">
|
||||
<label class="text-900 font-medium mb-3 ml-1">CVC</label>
|
||||
<InputMask v-model="cvc" mask="999" placeholder="999" />
|
||||
</div>
|
||||
<div class="col-12 field mb-0">
|
||||
<label for="holderName" class="text-900 font-medium mb-3 ml-1">Cardholder Name</label>
|
||||
<InputText id="holderName" type="text" class="w-full mb-3" />
|
||||
</div>
|
||||
</div>
|
||||
</StepperPanel>
|
||||
<template #end>
|
||||
<div v-if="!completed" class="flex justify-content-end gap-2">
|
||||
<Button v-if="active !== 0" label="Back" severity="secondary" @click="active -= 1" />
|
||||
<Button v-if="active !== 2" label="Continue" @click="active += 1" />
|
||||
<Button
|
||||
v-if="active === 2"
|
||||
label="Complete"
|
||||
@click="
|
||||
() => {
|
||||
active = null;
|
||||
completed = true;
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div v-else class="flex flex-column justify-content-center mx-auto">
|
||||
<Message severity="success">The order was submitted successfully.</Message>
|
||||
<Button
|
||||
label="New Order"
|
||||
class="w-10rem mx-auto"
|
||||
@click="
|
||||
() => {
|
||||
active = 0;
|
||||
completed = false;
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Stepper>
|
||||
</div>
|
||||
<!-- <div class="card flex flex-column justify-content-center gap-5" style="height: auto">
|
||||
<Stepper v-model:activeStep="active" orientation="vertical">
|
||||
<StepperPanel v-for="(step, index) of steps" :key="step.id">
|
||||
<template #header="slotProps">
|
||||
<div class="flex align-items-center gap-2" :class="slotProps.class" @click="(event) => slotProps.clickCallback(event, index)">
|
||||
<Button :severity="slotProps.highlighted || completed ? 'success' : 'secondary'" rounded :icon="step.icon" />
|
||||
<span>{{ step.header }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #content="{ clickCallback }">
|
||||
<div class="flex flex-column gap-5">
|
||||
<span>{{ step.content }}</span>
|
||||
<div class="flex gap-3">
|
||||
<Button v-if="index !== steps.length - 1" label="Continue" :disabled="index === steps.length - 1" @click="(event) => clickCallback(event, index + 1)" />
|
||||
<Button
|
||||
v-else
|
||||
label="Finish"
|
||||
@click="
|
||||
(event) => {
|
||||
clickCallback(event, null);
|
||||
completed = true;
|
||||
}
|
||||
"
|
||||
/>
|
||||
<Button label="Back" severity="secondary" :disabled="index === 0" @click="(event) => clickCallback(event, index - 1)" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
<template v-if="completed" #end>
|
||||
<div class="flex">
|
||||
<Button
|
||||
severity="contrast"
|
||||
label="Reset"
|
||||
@click="
|
||||
completed = false;
|
||||
active = 0;
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Stepper>
|
||||
</div>
|
||||
<div class="card flex flex-column justify-content-center gap-5" style="height: auto">
|
||||
<Stepper v-model:activeStep="active">
|
||||
<StepperPanel v-for="(step, index) of steps" :key="step.id">
|
||||
<template #header="slotProps">
|
||||
<div class="flex align-items-center gap-2" :class="slotProps.class" @click="(event) => slotProps.clickCallback(event, index)">
|
||||
<Button :severity="slotProps.highlighted || completed ? 'success' : 'secondary'" rounded :icon="step.icon" />
|
||||
<span>{{ step.header }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #content="{ clickCallback }">
|
||||
<div class="flex flex-column gap-5">
|
||||
<span>{{ step.content }}</span>
|
||||
<div class="flex gap-3">
|
||||
<Button v-if="index !== steps.length - 1" label="Continue" :disabled="index === steps.length - 1" @click="(event) => clickCallback(event, index + 1)" />
|
||||
<Button
|
||||
v-else
|
||||
label="Finish"
|
||||
@click="
|
||||
(event) => {
|
||||
clickCallback(event, null);
|
||||
completed = true;
|
||||
}
|
||||
"
|
||||
/>
|
||||
<Button label="Back" severity="secondary" :disabled="index === 0" @click="(event) => clickCallback(event, index - 1)" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
<template v-if="completed" #end>
|
||||
<div class="flex">
|
||||
<Button
|
||||
severity="contrast"
|
||||
label="Reset"
|
||||
@click="
|
||||
completed = false;
|
||||
active = 0;
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Stepper>
|
||||
</div> -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ProductService } from '@/service/ProductService';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 0,
|
||||
completed: false,
|
||||
products: null,
|
||||
name: null,
|
||||
email: null,
|
||||
password: null,
|
||||
cpassword: null,
|
||||
quantity: [1, 2],
|
||||
selectedValue: null,
|
||||
cc: null,
|
||||
cvc: null,
|
||||
exp: null,
|
||||
steps: [
|
||||
{
|
||||
id: 0,
|
||||
header: 'Long Header 1',
|
||||
content: 'Content 1',
|
||||
icon: 'pi pi-cog'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
header: 'Long Header 2',
|
||||
content: 'Content 2',
|
||||
icon: 'pi pi-discord'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
header: 'Long Header 3',
|
||||
content: 'Content 3',
|
||||
icon: 'pi pi-twitter'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
ProductService.getProductsSmall().then((data) => (this.products = data.slice(0, 2)));
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue