Steps

Basic Example

Interactive checkout steps

const { default: Steps } = await import('/components/navigation/steps.js');
const { default: Button } = await import('/components/actions/button.js');

const { signal, tags, $ } = Lightview;
const { div } = tags;

const currentStep = signal(1);
const stepNames = ['Cart', 'Shipping', 'Payment', 'Confirm'];

const demo = div({ class: 'flex flex-col gap-4' },
    Steps({},
        ...stepNames.map((name, i) => 
            Steps.Step({ 
                color: () => i < currentStep.value ? 'primary' : undefined 
            }, name)
        )
    ),
    div({ class: 'flex gap-2 justify-center' },
        Button({ 
            size: 'sm',
            disabled: () => currentStep.value <= 1,
            onclick: () => { currentStep.value--; }
        }, 'Back'),
        Button({ 
            size: 'sm',
            color: 'primary',
            disabled: () => currentStep.value >= stepNames.length,
            onclick: () => { currentStep.value++; }
        }, 'Next')
    )
);

$('#demo').insert(demo);