Плитка показателя

Плитка показывает одно число крупно: сколько документов, проектов, ошибок за сутки. Под числом — подпись, что именно посчитано. С адресом плитка целиком ведёт к списку, который стоит за числом.

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

На обзорном экране нужно ответить «сколько» раньше, чем человек откроет список.
Несколько сводных показателей стоят рядом и сравниваются между собой.
За числом есть список, и в него хочется провалиться одним нажатием.

Не берите плитку для доли от предела — для этого есть полоса заполнения. Сведения об одной записи показывает сводка или ряд меты.

Ссылка на список#

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

Кликабельная с пояснением

1 204документовво всех открытых проектах

HTML = Набор.Плитка().Отрисовать(
	Новый Структура("Значение, Подпись, Пояснение, Адрес, Иконка",
		"1 204", "документов", "во всех открытых проектах", "/документы", "куб"));

Пояснение — мелкая строка под подписью: в каком срезе посчитано число.

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

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

1 204документовво всех открытых проектах

HTML = Кит.Плитка("1 204", "документов")
	.Пояснение("во всех открытых проектах").Адрес("/документы").Иконка("куб").Рендер();

Без ссылки#

Без адреса плитка печатается простым блоком. Так показывают число, за которым нет отдельного списка.

Без ссылки

18проектов

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

Виды#

Вид красит число цветом роли. Ставьте его, когда число само по себе оценка: ноль ошибок — хорошо, семь сбоев — плохо.

Вид ok — всё в порядке

7проектов с источниками

HTML = Набор.Плитка().Отрисовать(Новый Структура("Значение, Подпись, Вид",
	"7", "проектов с источниками", "ok"));

Вид warn — стоит взглянуть

7проектов с источниками

HTML = Набор.Плитка().Отрисовать(Новый Структура("Значение, Подпись, Вид",
	"7", "проектов с источниками", "warn"));

Вид err — нужна помощь

7проектов с источниками

HTML = Набор.Плитка().Отрисовать(Новый Структура("Значение, Подпись, Вид",
	"7", "проектов с источниками", "err"));

Вид accent — главный показатель экрана

7проектов с источниками

HTML = Набор.Плитка().Отрисовать(Новый Структура("Значение, Подпись, Вид",
	"7", "проектов с источниками", "accent"));

Ряд плиток#

Плитки ставят рядом сеткой: ячейки равной ширины, на узком экране переносятся.

Три показателя сеткой

18проектов

1 204документов

0сбоев за сутки

Ячейки = Новый Массив();
Ячейки.Добавить(Набор.Плитка().Отрисовать(Новый Структура("Значение, Подпись, Адрес",
	"18", "проектов", "/проекты")));
Ячейки.Добавить(Набор.Плитка().Отрисовать(Новый Структура("Значение, Подпись, Адрес",
	"1 204", "документов", "/документы")));
Ячейки.Добавить(Набор.Плитка().Отрисовать(Новый Структура("Значение, Подпись, Вид, Адрес",
	"0", "сбоев за сутки", "ok", "/журнал")));

HTML = Набор.Сетка().Отрисовать(Новый Структура("Ячейки, Колонки, Заголовок",
	Ячейки, 3, "Сводка инсталляции"));

Гайдлайны#

1 204документов

ДелайтеЧисло отформатировано для человека

Код

HTML = Набор.Плитка().Отрисовать(Новый Структура("Значение, Подпись",
	"1 204", "документов"));

1204.00документов

Не делайтеМашинное число: разряды не разделены, хвост нулей

Код

HTML = Набор.Плитка().Отрисовать(Новый Структура("Значение, Подпись",
	"1204.00", "документов"));

3сбоя синхронизацииза последние сутки

ДелайтеПодпись говорит, что посчитано

Код

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

3Всего

Не делайтеПодпись «Всего»: неясно, чего и за какой срок

Код

HTML = Набор.Плитка().Отрисовать(Новый Структура("Значение, Подпись",
	"3", "Всего"));

18проектов

3сбоя

ДелайтеЦвет — у одного числа, которое требует внимания

Код

Ячейки = Новый Массив();
Ячейки.Добавить(Набор.Плитка().Отрисовать(Новый Структура("Значение, Подпись", "18", "проектов")));
Ячейки.Добавить(Набор.Плитка().Отрисовать(Новый Структура("Значение, Подпись, Вид", "3", "сбоя", "err")));

HTML = Набор.Сетка().Отрисовать(Новый Структура("Ячейки, Колонки", Ячейки, 2));

18проектов

3сбоя

Не делайтеВсе плитки цветные: глазу не за что зацепиться

Код

Ячейки = Новый Массив();
Ячейки.Добавить(Набор.Плитка().Отрисовать(Новый Структура("Значение, Подпись, Вид", "18", "проектов", "accent")));
Ячейки.Добавить(Набор.Плитка().Отрисовать(Новый Структура("Значение, Подпись, Вид", "3", "сбоя", "warn")));

HTML = Набор.Сетка().Отрисовать(Новый Структура("Ячейки, Колонки", Ячейки, 2));

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

Значение и Подпись обязательны: без них кит бросает исключение. Число без подписи не скажет скринридеру, что посчитано.
Плитка-ссылка — одна ссылка с числом, подписью и пояснением внутри. Скринридер читает её целиком, как фразу.
Цвет вида — второй носитель смысла. Оценку должна нести и подпись: «сбоя», «ошибок».
Неверный адрес (чужая схема) кит в ссылку не превращает: плитка остаётся плиткой.

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

Плитка узлом дерева

18проектов

HTML = Кит.Плитка("18", "проектов").Рендер();

Модель#

Значение форматирует вызывающий: компонент не знает ни локали, ни единиц. Структура ниже — прежний вид модели: её принимают Набор.Плитка().Отрисовать и Кит.Плитка, а в дереве холста те же поля пишут слова.

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

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

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

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

Кит.Плитка()src/Классы/холст/Кит.os

Плитка — сводный показатель одним числом. Слова: Пояснение, Адрес, Иконка, Вид.

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

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