/
githubmirror
/
tabler
Обзор
Документация
Войти
/
githubmirror
/
tabler
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
dev
shared/ui/ProgressSteps.astro
32 строки
940 B
Paweł Kuna
Render Modal as real markup; drain scripts via CaptureScript (#2742)
03 авг 2026, 01:55
Не верифицирован
03 авг 2026, 01:55
575d685
Код
Авторство
О чём код?
--- interface Props { count?: number /** Step labels; overrides `count` when provided. */ labels?: string[] active?: number color?: string class?: string id?: string /** aria-label attribute of the <ol>. */ ariaLabel?: string } const { count: countProp = 3, labels: labelsProp, active = 1, color = 'primary', class: className, id, ariaLabel } = Astro.props const labels = labelsProp ?? [] const count = labelsProp ? labels.length : countProp const steps = Array.from({ length: count }, (_, i) => ({ index: i + 1, label: labels[i] || `Step ${i + 1}`, })) --- <ol class={`progress-steps${className ? ` ${className}` : ''}`} id={id} aria-label={ariaLabel}> { steps.map((step) => ( <li class={`progress-steps-item${step.index <= active ? ` bg-${color}` : ''}`} aria-current={step.index === active ? 'step' : undefined}> <span class="visually-hidden">{step.label}</span> </li> )) } </ol>