vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed stepper template demo

pull/5806/head
Cagatay Civici 2024-05-21 14:45:07 +03:00
parent 87028141bd
commit 779dda6ced
1 changed files with 13 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
doc/stepper/TemplateDoc.vue
View File

@ -7,7 +7,7 @@
<StepperPanel> <StepperPanel>
<template #header="{ index, clickCallback }"> <template #header="{ index, clickCallback }">
<button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="clickCallback"> <button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="clickCallback">
<span :class="['border-round border-2 w-12 h-12 inline-flex items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]"> <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-user" /> <i class="pi pi-user" />
</span> </span>
</button> </button>
@ -43,7 +43,7 @@
<StepperPanel> <StepperPanel>
<template #header="{ index, clickCallback }"> <template #header="{ index, clickCallback }">
<button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="clickCallback"> <button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="clickCallback">
<span :class="['border-round border-2 w-12 h-12 inline-flex items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]"> <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-star" /> <i class="pi pi-star" />
</span> </span>
</button> </button>
@ -73,7 +73,7 @@
<StepperPanel> <StepperPanel>
<template #header="{ index, clickCallback }"> <template #header="{ index, clickCallback }">
<button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="clickCallback"> <button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="clickCallback">
<span :class="['border-round border-2 w-12 h-12 inline-flex items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]"> <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" /> <i class="pi pi-id-card" />
</span> </span>
</button> </button>
@ -119,7 +119,7 @@ export default {
<StepperPanel> <StepperPanel>
<template #header="{ index, clickCallback }"> <template #header="{ index, clickCallback }">
<button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="clickCallback"> <button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="clickCallback">
<span :class="['border-round border-2 w-12 h-12 inline-flex items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]"> <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-user" /> <i class="pi pi-user" />
</span> </span>
</button> </button>
@ -155,7 +155,7 @@ export default {
<StepperPanel> <StepperPanel>
<template #header="{ index, clickCallback }"> <template #header="{ index, clickCallback }">
<button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="clickCallback"> <button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="clickCallback">
<span :class="['border-round border-2 w-12 h-12 inline-flex items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]"> <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-star" /> <i class="pi pi-star" />
</span> </span>
</button> </button>
@ -185,7 +185,7 @@ export default {
<StepperPanel> <StepperPanel>
<template #header="{ index, clickCallback }"> <template #header="{ index, clickCallback }">
<button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="clickCallback"> <button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="clickCallback">
<span :class="['border-round border-2 w-12 h-12 inline-flex items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]"> <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" /> <i class="pi pi-id-card" />
</span> </span>
</button> </button>
@ -211,7 +211,7 @@ export default {
<StepperPanel> <StepperPanel>
<template #header="{ index, clickCallback }"> <template #header="{ index, clickCallback }">
<button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="clickCallback"> <button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="clickCallback">
<span :class="['border-round border-2 w-12 h-12 inline-flex items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]"> <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-user" /> <i class="pi pi-user" />
</span> </span>
</button> </button>
@ -247,7 +247,7 @@ export default {
<StepperPanel> <StepperPanel>
<template #header="{ index, clickCallback }"> <template #header="{ index, clickCallback }">
<button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="clickCallback"> <button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="clickCallback">
<span :class="['border-round border-2 w-12 h-12 inline-flex items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]"> <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-star" /> <i class="pi pi-star" />
</span> </span>
</button> </button>
@ -277,7 +277,7 @@ export default {
<StepperPanel> <StepperPanel>
<template #header="{ index, clickCallback }"> <template #header="{ index, clickCallback }">
<button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="clickCallback"> <button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="clickCallback">
<span :class="['border-round border-2 w-12 h-12 inline-flex items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]"> <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" /> <i class="pi pi-id-card" />
</span> </span>
</button> </button>
@ -335,7 +335,7 @@ export default {
<StepperPanel> <StepperPanel>
<template #header="{ index, clickCallback }"> <template #header="{ index, clickCallback }">
<button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="clickCallback"> <button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="clickCallback">
<span :class="['border-round border-2 w-12 h-12 inline-flex items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]"> <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-user" /> <i class="pi pi-user" />
</span> </span>
</button> </button>
@ -371,7 +371,7 @@ export default {
<StepperPanel> <StepperPanel>
<template #header="{ index, clickCallback }"> <template #header="{ index, clickCallback }">
<button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="clickCallback"> <button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="clickCallback">
<span :class="['border-round border-2 w-12 h-12 inline-flex items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]"> <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-star" /> <i class="pi pi-star" />
</span> </span>
</button> </button>
@ -401,7 +401,7 @@ export default {
<StepperPanel> <StepperPanel>
<template #header="{ index, clickCallback }"> <template #header="{ index, clickCallback }">
<button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="clickCallback"> <button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="clickCallback">
<span :class="['border-round border-2 w-12 h-12 inline-flex items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]"> <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" /> <i class="pi pi-id-card" />
</span> </span>
</button> </button>