Полоса заполнения

Полоса заполнения показывает долю занятого от предела: хранилище, квота, лимит запросов. Это показание, а не орган управления: мышью её не двигают, и скрипт ей не нужен. В Material это линейный индикатор — дорожка толщиной 4 пикселя и заливка цветом роли.

Когда использовать#

У ресурса есть предел, и важно, сколько до него осталось.
Человеку нужно заметить приближение к пределу раньше, чем случится отказ.
В строке таблицы нужно показать заполнение каждой записи — для этого есть компактный вариант.

Не берите полосу для хода длительной операции — она не меняется сама и не анимирует ожидание. Число без предела показывает плитка.

Доля и подпись#

Процент — число, Метка — что заполняется, Подпись — абсолютные величины рядом с процентом. Величины форматирует вызывающий: компонент не знает единиц.

Нейтральная

Заполнение хранилища42%, 430 из 1024 МБ

HTML = Набор.ПолосаЗаполнения().Отрисовать(
	Новый Структура("Процент, Метка, Подпись",
		42, "Заполнение хранилища", "430 из 1024 МБ"));

В дереве холста полоса собирается словами: процент и метка позицией, подпись — словом (см. Язык узлов).

Узлом холста — словами

Заполнение хранилища42%, 430 из 1024 МБ

HTML = Кит.ПолосаЗаполнения(42, "Заполнение хранилища").Подпись("430 из 1024 МБ").Рендер();

При нуле заливка не печатается вовсе. При малой ненулевой доле виден хотя бы просвет: полоса не притворяется пустой, когда что-то уже занято.

Пусто

Заполнение хранилища0%, 0 из 1024 МБ

HTML = Набор.ПолосаЗаполнения().Отрисовать(
	Новый Структура("Процент, Метка, Подпись",
		0, "Заполнение хранилища", "0 из 1024 МБ"));

Просвет у малой доли

Заполнение хранилища3%, 31 из 1024 МБ

HTML = Набор.ПолосаЗаполнения().Отрисовать(
	Новый Структура("Процент, Метка, Подпись",
		3, "Заполнение хранилища", "31 из 1024 МБ"));

Ширина заливки идёт ступенями по 5 % и округляется вниз: индикатор предела не вправе преувеличивать остаток. Точный процент остаётся в тексте.

Тон по проценту#

Если Вид не задан, кит выводит его из процента. С 75 % полоса становится цветом предупреждения, с 90 % — цветом ошибки.

Предупреждение с 75 %

Заполнение хранилища78%, 799 из 1024 МБ

HTML = Набор.ПолосаЗаполнения().Отрисовать(
	Новый Структура("Процент, Метка, Подпись",
		78, "Заполнение хранилища", "799 из 1024 МБ"));

Тревога с 90 %

Заполнение хранилища94%, 963 из 1024 МБ

HTML = Набор.ПолосаЗаполнения().Отрисовать(
	Новый Структура("Процент, Метка, Подпись",
		94, "Заполнение хранилища", "963 из 1024 МБ"));

Больше 100 % — переполнение. Полоса заполнена целиком, а истинный процент остаётся в подписи.

Переполнение

Заполнение хранилища137%, 1403 из 1024 МБ

HTML = Набор.ПолосаЗаполнения().Отрисовать(
	Новый Структура("Процент, Метка, Подпись",
		137, "Заполнение хранилища", "1403 из 1024 МБ"));

Вид задан явно#

Вид («ok», «warn», «err») отменяет тон по проценту. Задавайте его, когда смысл обратный: заполненность — это хорошо, например доля пройденной проверки.

Вид задан явно

Заполнение хранилища42%, 430 из 1024 МБ

HTML = Набор.ПолосаЗаполнения().Отрисовать(
	Новый Структура("Процент, Метка, Подпись, Вид",
		42, "Заполнение хранилища", "430 из 1024 МБ", "ok"));

Компактная#

Компактная полоса — для ячейки таблицы: строки с текстом под ней нет, остаётся одна дорожка. Метка и подпись при этом не пропадают — они в доступном имени.

Компактная — для ячейки таблицы

HTML = Набор.ПолосаЗаполнения().Отрисовать(
	Новый Структура("Процент, Метка, Подпись, Компактная",
		61, "Заполнение хранилища", "625 из 1024 МБ", Истина));

Компактная полоса в таблице

Проект	Хранилище	Занято
Альфа		625 из 1024 МБ

HTML = Кит.Таблица(
	Кит.Колонка("Проект"), Кит.Колонка("Хранилище"), Кит.Колонка("Занято"),
	Кит.Запись(
		Кит.Ячейка("Альфа"),
		Кит.Ячейка(Кит.ПолосаЗаполнения(61, "Хранилище проекта «Альфа»")
			.Подпись("625 из 1024 МБ").Компактная()),
		Кит.Ячейка("625 из 1024 МБ").Вид("величина"))).Рендер();

Гайдлайны#

Заполнение хранилища78%, 799 из 1024 МБ

ДелайтеРядом с процентом — абсолютные величины

Код

HTML = Набор.ПолосаЗаполнения().Отрисовать(
	Новый Структура("Процент, Метка, Подпись",
		78, "Заполнение хранилища", "799 из 1024 МБ"));

Заполнение78%

Не делайтеТолько процент: неясно, много это или мало

Код

HTML = Набор.ПолосаЗаполнения().Отрисовать(
	Новый Структура("Процент, Метка", 78, "Заполнение"));

Заполнение хранилища94%, 963 из 1024 МБ

ДелайтеТон по проценту: у предела полоса тревожит сама

Код

HTML = Набор.ПолосаЗаполнения().Отрисовать(
	Новый Структура("Процент, Метка, Подпись",
		94, "Заполнение хранилища", "963 из 1024 МБ"));

Заполнение хранилища94%, 963 из 1024 МБ

Не делайтеЗелёный у самого предела: цвет врёт о запасе

Код

HTML = Набор.ПолосаЗаполнения().Отрисовать(
	Новый Структура("Процент, Метка, Подпись, Вид",
		94, "Заполнение хранилища", "963 из 1024 МБ", "ok"));

Доступность#

Дорожка печатается с role="progressbar" и aria-valuemin, aria-valuemax, aria-valuenow. При переполнении aria-valuenow держится на 100, а истинный процент — в доступном имени.
Метка обязательна: без неё кит бросает исключение. Метка, процент и подпись собираются в один aria-label, и скринридер читает полосу одной фразой: «Заполнение хранилища: 42%, 430 из 1024 МБ».
Цвет — второй носитель смысла: процент всегда напечатан текстом или звучит в доступном имени.
В компактной полосе текста на экране нет. Назовите в метке, чьё это заполнение, — в таблице соседние полосы иначе прозвучат одинаково.

Узлом холста#

Полоса узлом дерева

Заполнение хранилища42%, 430 из 1024 МБ

HTML = Кит.ПолосаЗаполнения(42, "Заполнение хранилища").Подпись("430 из 1024 МБ").Рендер();

Модель#

Структура ниже — прежний вид модели; в дереве холста её поля пишут слова Кит.ПолосаЗаполнения.

ПолосаЗаполнения.Отрисовать()src/Классы/компоненты/ПолосаЗаполнения.os

Отрисовывает полосу заполнения.

Параметры:
 Модель - Структура - Процент (ОБЯЗАТЕЛЕН, Число; больше 100 — переполнение: полоса
          полна, aria-valuenow держится в объявленном максимуме, истинная величина
          остаётся в подписи и доступном имени),
          Метка (ОБЯЗАТЕЛЬНА — доступное имя индикатора), Подпись (абсолютные величины
          рядом с процентом; форматирует вызывающий — компонент не знает единиц),
          Вид ("" | "ok" | "warn" | "err"; пустой выводится из процента),
          Компактная (Булево — вариант для ячейки таблицы, без текстовой строки).

Возвращаемое значение:
 Строка - фрагмент <div class="meter">. Кидается исключением, если Процент не число
          или пуста Метка.

Кит.ПолосаЗаполнения()src/Классы/холст/Кит.os

Полоса заполнения — доля занятого от предела. Слова: Метка, Подпись, Вид, Компактная.

Параметры:
 Модель - Число, Структура - процент; Структура — прежний вид модели.
 Метка  - Строка - (необязательный) доступное имя индикатора.

Возвращаемое значение:
 ЭлементЭкрана