Progress Scale
<sf-progress-scale> показывает известную долю выполненного шкалой из десяти
делений. Берите её, когда точность до процента не нужна и ход удобнее читать
крупными шагами: заполненность профиля, этапы подготовки, занятое место.
Элемент строится на классах компонента
Шкала прогресса; для плавного хода
загрузки подходит Progress Bar.
Пример
Применение
Значение и деления
value — доля выполненного в процентах, от 0 до 100; значения вне
диапазона приводятся к границе. Шкала закрашивает деления с округлением
вверх до десятка: при 41 закрашено пять делений из десяти. Точное значение
остаётся в подписи и в aria-valuenow.
show-text (по умолчанию включён) показывает значение в процентах под
шкалой; show-text="false" оставляет одну шкалу.
Статус и размер
status сообщает смысл из общего словаря: neutral (по умолчанию), info,
success, warning, error. Компонент не выводит статус из процента:
предупреждение о почти занятом диске задаёт приложение, как во втором
примере. size — ступень 1/3, 1/2, 1, 2 или 3. В ячейке таблицы
или в ряду полей задайте line (1/2, 1, 2): шкала и значение встанут в
одну строку текста этого размера формы.
Обновление из скрипта
Меняйте value или вызывайте setProgress(n): шкала обновляется без
перерисовки. getProgress() возвращает текущее значение числом.
const scale = document.querySelector('sf-progress-scale');
scale.setProgress(completedSteps * 20);
Доступность
- Шкала —
role="progressbar"со значениями от0до100. Задайтеlabel— доступное имя: что измеряет шкала. value-textзаменяет число словами, если процент сам по себе ничего не сообщает: «Занято 90%, осталось 2 ГБ».- Цвет статуса не должен быть единственным сигналом: предупреждение
называйте в
value-textили в тексте рядом. - Шкала не получает фокус и не объявляет изменения сама. О важном переходе —
например, о заполнении до конца — сообщите отдельным текстом с
role="status".
Справочник API
Раздел собран из манифеста компонента выпуска ui-106d5901f8c3 и обновляется вместе с выпуском. Чтобы исправить описание, исправьте манифест.
Каждому атрибуту соответствует свойство элемента с тем же именем в camelCase: search-placeholder — searchPlaceholder. Свойство атрибута template называется templateName.
| Тег | <sf-progress-scale> |
| Назначение | Сегментированный определённый прогресс с точным доступным значением, явным семантическим тоном и десятью визуальными шагами. |
| Контракт | smart.progress-scale, версия 1.0.0 |
| Поставка | выпуск Framework ui-106d5901f8c3 |
| Жизненный цикл | экспериментальный: API может меняться между выпусками |
| Готовность | описан: манифест и сценарий есть, продуктовой приёмки нет |
| Заготовка до прихода кода | нет: атрибут data-sf-skeleton не пишется; своего скелетона при загрузке данных нет (Заготовка до прихода кода) |
Атрибуты
template—string, по умолчаниюdefault.size—string, по умолчанию1, значения:1/3,1/2,1,2,3.line—string, по умолчанию пусто, значения: пусто,1/2,1,2. Занимает строку текста этого размера формы — для ячейки таблицы или ряда полей, чтобы строка сохраняла высоту элемента управления.value—string, по умолчанию0, значения: шаблон^(?:100|[1-9]?[0-9])(?:\.[0-9]+)?$.show-text—boolean, по умолчаниюtrue.status—string, по умолчаниюneutral, значения:neutral,info,success,warning,error. О чём сообщает индикатор прогресса, в общем словаре статусов. Также принимается значение primary; оно означает neutral.label—string, по умолчанию пусто.value-text—string, по умолчанию пусто.
Прежние имена:
| Имя | Прежнее имя | Состояние | Убирается после |
|---|---|---|---|
status |
tone |
работает, отмечается в SF.deprecations |
2026-12-01 |
status="error" |
status="danger" |
работает, отмечается в SF.deprecations |
2026-12-01 |
status="error" |
status="critical" |
работает, отмечается в SF.deprecations |
2026-12-01 |
status="neutral" |
status="primary" |
работает, отмечается в SF.deprecations |
2026-12-01 |
Методы
getProgress()— возвращаетnumber. Возвращает значение как число, ограниченное диапазоном 0..100; нечисловое значение читается как 0.setProgress(nextValue: number|string)— возвращаетobject. Устанавливает атрибут value; null или undefined удаляет его.
События
Своих событий нет; общие события базового элемента перечислены в главе Жизненный цикл → Этапы.
Доступность
- Роль: индикатор прогресса (
progressbar). - Доступное имя: обязательно.
- Фокус: Progress Scale не интерактивен и не входит в порядок фокуса.
Минимальная разметка
<sf-progress-scale label="Подготовка проекта" value="40"></sf-progress-scale>
Источник
simai/ui@106d5901f8c3b4f23131ce0e7ede5dbd8abfe4f4:distr/smart/progress-scalesimai/ui@106d5901f8c3b4f23131ce0e7ede5dbd8abfe4f4:distr/rule/rule.json#name=cl-progress-scale
См. также
- Шкала прогресса — шкала на классах.
- Progress Bar — сплошная полоса прогресса.