Ряд меты — сведения об объекте одной строкой: автор, число открытий, дата обновления. Каждый пункт — значок и значение. Подпись пункта видят мышью во всплывающей подсказке, а скринридер слышит её текстом.

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

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

Не берите ряд меты для сведений, которые сравнивают между записями, — для этого есть таблица. Подписанные строки «подпись — значение» в записи списка печатает сводка. Ряд меты уже встроен в шапку объекта — её поле Мета.

Значок и значение#

У пункта есть Подпись, Значение и Значок. Со значком на экране видны значок и значение, а подпись уходит в подсказку и в скрытый текст для скринридера. С Адресом значение становится ссылкой.

Со значками, второй пункт — ссылка

1 204а.иванова

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

HTML = Набор.РядМеты().Отрисовать(Элементы, "objhead__meta", "objhead__meta-item");

Пункты разделяет точка «·». Классы ряда и пункта передаёт вызывающий: оформление у ряда в шапке и в карточке объекта разное.

У самого ряда слов нет — его вход список. В дереве холста словами ряд пишет шапка объекта: каждое слово Мета(Подпись, Значение, Значок, Адрес) добавляет пункт (см. Язык узлов).

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

Годовой отчёт

1 204а.иванова

HTML = Кит.ШапкаОбъекта("Годовой отчёт")
	.Мета("Открытий", "1 204", "скачать")
	.Мета("Автор", "а.иванова", "аккаунт", "/люди/а.иванова").Рендер();

Без значка#

Пункт без значка печатается текстом «подпись: значение». Так пишут сведения, для которых нет понятного значка.

Без значка — пара «подпись: значение»

Обновлено: вчера

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

HTML = Набор.РядМеты().Отрисовать(Элементы, "objhead__meta", "objhead__meta-item");

Пункт только с подписью или только со значением печатается тем, что есть. Пункт, где нет ни того, ни другого, пропускается.

Пустой ряд#

Ряд без пунктов не печатается вовсе — ни пустой строки, ни отступа. Поэтому сведения передают как есть, без проверки на пустоту.

Пустой ряд не печатается вовсе

этот вызов не печатает ничего

HTML = Набор.РядМеты().Отрисовать(Новый Массив(),
	"objhead__meta", "objhead__meta-item");

Гайдлайны#

а.ивановавчера

ДелайтеДва-три пункта, каждый понятен по значку

Код

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

HTML = Набор.РядМеты().Отрисовать(Элементы, "objhead__meta", "objhead__meta-item");

Автор: а.ивановаОбновлён: вчераСоздан: год назадРазмер: 128 КБФормат: PDFЯзык: русскийОткрытий: 1 204

Не делайтеРяд на полэкрана: это уже таблица свойств

Код

Элементы = Новый Массив();
Для Каждого Пара Из СтрРазделить("Автор=а.иванова;Обновлён=вчера;Создан=год назад;Размер=128 КБ;Формат=PDF;Язык=русский;Открытий=1 204", ";") Цикл
	Части = СтрРазделить(Пара, "=");
	Элементы.Добавить(Новый Структура("Подпись, Значение", Части[0], Части[1]));
КонецЦикла;

HTML = Набор.РядМеты().Отрисовать(Элементы, "objhead__meta", "objhead__meta-item");

вчера

ДелайтеЗначок говорит о том же, что подпись

Код

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

HTML = Набор.РядМеты().Отрисовать(Элементы, "objhead__meta", "objhead__meta-item");

вчера

Не делайтеЗначок наугад: замок у даты читается как «закрыто»

Код

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

HTML = Набор.РядМеты().Отрисовать(Элементы, "objhead__meta", "objhead__meta-item");

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

Значок декоративен (aria-hidden). Подпись печатается рядом скрытым текстом, и скринридер читает «Автор: а.иванова».
Та же подпись стоит в title пункта — подсказка для мыши. С клавиатуры и на телефоне её не видно, поэтому значение должно быть понятно и без неё.
Значение со ссылкой — обычная ссылка с текстом значения.

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

На холсте классы даёт не вызывающий, а вид ряда: «шапка» — ряд в шапке объекта, «карточка» — ряд в карточке объекта. Другого вида не бывает, и кит бросит исключение.

Узлом дерева — классы даёт вид, а не вызывающий

Обновлён: вчера

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

HTML = Кит.РядМеты(Элементы, "карточка").Рендер();

Модель#

Пункт ряда — структура: у ряда меты нет слов, и Кит.РядМеты принимает тот же список, что набор.

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

Отрисовывает ряд метаданных.

Параметры:
 Элементы       - Массив из Структура - Подпись, Значение, Значок (необязательный:
                  имя иконки из НаборИконок; без него пара печатается текстом),
                  Адрес (необязательный: значение станет ссылкой).
 Класс          - Строка - CSS-класс ряда.
 КлассЭлемента  - Строка - CSS-класс одного элемента ряда.

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

Кит.РядМеты()src/Классы/холст/Кит.os

Ряд метаданных: пары «значок + значение» в строку.

Параметры:
 Элементы - Массив из Структура - Подпись, Значение, Значок, Адрес.
 Вид      - Строка - «шапка» (ряд в шапке объекта) | «карточка» (ряд в карточке объекта).

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