/
githubmirror
/
tabler
Обзор
Документация
Войти
/
githubmirror
/
tabler
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
dev
shared/ui/Progress.astro
41 строка
2 KB
Paweł Kuna
Narrow component prop types, remove unused props and dead code (#2838)
10 авг 2026, 00:14
Не верифицирован
10 авг 2026, 00:14
4f7beec
Код
Авторство
О чём код?
--- /** core/scss/ui/_progress.scss `.progress-{size}` modifier classes */ export type ProgressSize = 'sm' | 'lg' | 'xl' interface Props { value?: number | string | undefined values?: (string | number)[] color?: string | undefined size?: ProgressSize | undefined class?: string width?: string id?: string indeterminate?: boolean striped?: boolean animated?: boolean showValue?: boolean } const { value, values, color, size, class: className, width, id, indeterminate, striped, animated, showValue } = Astro.props const percentage = value !== undefined && value !== null && `${value}` !== '' ? `${value}`.split('%').join('') : '38' const colors = color ? [color] : ['blue', 'red', 'green', 'yellow', 'dark'] const valueList = values const classes = ['progress', size && `progress-${size}`, className] --- <div class:list={classes} style={width ? `width: ${width}` : undefined} id={id}> { indeterminate ? ( <div class={`progress-bar progress-bar-indeterminate${color ? ` bg-${color}` : ''}`} /> ) : valueList ? ( valueList.map((v, i) => <div class={`progress-bar bg-${colors[i] ?? ''}`} style={`width: ${v}%`} role="progressbar" aria-valuenow={v} aria-valuemin="0" aria-valuemax="100" />) ) : ( <div class={`progress-bar${color ? ` bg-${color}` : ''}${striped ? ` progress-bar-striped${animated ? ' progress-bar-animated' : ''}` : ''}`} style={`width: ${percentage}%`} role="progressbar" aria-valuenow={percentage} aria-valuemin="0" aria-valuemax="100" aria-label={`${percentage}% Complete`}> {showValue ? `${percentage}%` : <span class="visually-hidden">{percentage}% Complete</span>} </div> ) } </div>