Estou aprendendo svelteKit
e construindo um step progress usando props
então, esse é meu componenteprogressStep.svelte
<script>
export let steps = [];
export let currentStep = 1;
const isActive = (index) => {
console.log(`isActive - index: ${index}, currentStep: ${currentStep}`);
return index + 1 === currentStep;
};
const isCompleted = (index) => {
console.log(`isCompleted - index: ${index}, currentStep: ${currentStep}`);
return index + 1 < currentStep;
};
</script>
<style>
.progress-container {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
margin-bottom: 20px;
}
.progress-container::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 2px;
background: #ddd;
z-index: 0;
}
.progress-step {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
}
.step-circle {
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: #ddd;
}
.step-active .step-circle {
background: #007bff;
color: white;
}
.step-completed .step-circle {
background: #28a745;
color: white;
}
.progress-line {
position: absolute;
top: 50%;
left: 50%;
height: 2px;
background: #28a745;
z-index: 0;
}
</style>
<div class="progress-container">
{#each steps as step, index}
<div class="progress-step {isActive(index) ? 'step-active' : ''} {isCompleted(index) ? 'step-completed' : ''}">
<div class="step-circle">{isCompleted(index) ? '✓' : index + 1}</div>
<div>{step}</div>
{#if index < steps.length - 1}
<div class="progress-line" style="width: {isCompleted(index) || isActive(index) ? 'calc(100% - 15px)' : '0'};"></div>
{/if}
</div>
{/each}
</div>
e eu importo esse componente em+page.svelte
<script>
import ProgressStep from '@/components/progressStep/progressStep.svelte';
let currentStep = 1;
function nextStep() {
if (currentStep < 4) currentStep += 1;
}
function prevStep() {
if (currentStep > 1) currentStep -= 1;
}
</script>
<section class="section mt-4">
<div class="col-xs-12">
<div class="col-6 my-4">
<ProgressStep currentStep={currentStep} steps={['Step 1', 'Step 2', 'Step 3', 'Step 4']} />
<div class="btn-group">
<button class="btn btn-secondary" on:click={()=>prevStep()}>Previous</button>
<button class="btn btn-primary" on:click={()=>nextStep()}>Next</button>
</div>
</div>
</div>
</section>
Quero construir uma barra de progresso de uma etapa como codepen.io
trata-se de um progresso de 4 etapas, à medida que avança, a linha que conecta cada etapa deve mudar de cor, então atualmente estou tendo algum problema de que o progresso não funciona corretamente, o que há de errado?