Карточка
Карточка — поверхность для законченного куска содержимого: заголовок, пояснение, тело и полоса действий внизу. В Material это приподнятая карточка: фон surface-container-low (в тёмной теме на тон выше, surface-container), кольцо 1 px цветом outline-variant поверх тени первого уровня, крупное скругление (16 пикселей).
Когда использовать#
- Экран делится на самостоятельные блоки, и каждый можно читать отдельно: «Доступ», «Источники», «Ключи».
- У блока есть свои действия, и они относятся только к нему.
- Несколько однородных объектов выкладываются колонкой или сеткой.
Не берите карточку ради рамки вокруг одной строки — хватит заголовка и абзаца. Необратимые действия собирает опасная зона, а не красная карточка.
В дереве холста карточка собирается словами: заголовок позицией, тело — детьми, описание словом, кнопки — в .Действия(…) (см. Язык узлов).
Узлом холста — словами
Ключи доступа
Ключ показывается один раз
Активных ключей: 2
HTML = Кит.Карточка("Ключи доступа", Кит.Примечание("Активных ключей: 2"))
.Описание("Ключ показывается один раз")
.Действия(Кит.Кнопка("Выпустить ключ").Вторичная()).Рендер();Заголовок, описание, тело#
Заголовок называет блок и печатается <h2>, иконка стоит перед ним. Описание — одна приглушённая строка под заголовком. Тело — доверенная разметка, собранная компонентами кита.
Заголовок, описание, тело
Проект «Альфа»
Проект по умолчанию
тело карточки
HTML = Набор.Карточка().Отрисовать(Новый Структура("Заголовок, Описание, Тело, Иконка",
"Проект «Альфа»", "Проект по умолчанию", "<p>тело карточки</p>", "куб"));Действия#
Действия печатаются отдельной полосой под телом. Кладите туда кнопки, которые относятся к этой карточке и ни к чему больше.
С полосой действий
С действиями
тело
HTML = Набор.Карточка().Отрисовать(Новый Структура("Заголовок, Тело, Действия",
"С действиями", "<p>тело</p>", Набор.Кнопка().Отрисовать("Применить")));Без заголовка#
Карточка без заголовка — просто поверхность. Она годится, когда заголовок уже стоит над ней или содержимое называет себя само.
Без заголовка
только тело
HTML = Набор.Карточка().Отрисовать(Новый Структура("Тело", "<p>только тело</p>"));Заголовок ссылкой, уровень и якорь#
С Адресом заголовок становится ссылкой — так карточка в списке ведёт на страницу объекта. Уровень меняет тег заголовка (от 1 до 6, по умолчанию 2): карточка внутри раздела с <h2> получает <h3>. Якорь печатается атрибутом id, и на карточку можно сослаться из оглавления.
Заголовок-ссылка третьего уровня с якорем
Проект «Альфа»
18 документов, 3 участника
HTML = Набор.Карточка().Отрисовать(Новый Структура("Заголовок, Адрес, Описание, Уровень, Якорь, Иконка",
"Проект «Альфа»", "/проекты/альфа", "18 документов, 3 участника", 3, "альфа", "куб"));Карточка в карточке на телефоне#
На широком экране вложенная карточка — карточка: своя поверхность, кольцо и поля. На телефоне (до 600 px) вложенная карточка, секция, одиночная карточка объекта и таблица становятся частью родителя: без тени, кольца, своей заливки и боковых полей, соседей разделяет черта. Боковое поле страницы и поле карточки там — 16 пикселей, как у Material на узком экране, и содержимое получает почти всю ширину экрана, а не две трети.
Сетка или список карточек объектов — наоборот: плоской на телефоне становится сама внешняя карточка или секция — без кольца, заливки и боковых полей, её заголовок и пояснение стоят на поле страницы, — а карточки объектов внутри остаются карточками, как на широком экране: кольцо, заливка, скругление 16, во всю ширину экрана без полей страницы (на 390 — 358 пикселей). Одна поверхность на узком экране сохраняется, а список не разваливается в полосы.
Проекты в карточке — сузьте окно до телефона
Мои проекты
Проекты, которыми вы управляете, и ключи доступа.
Ячейки = Новый Массив();
Для Каждого Имя Из СтрРазделить("отчёты,сводка,справочники", ",") Цикл
Ячейки.Добавить(Кит.Статья(
Кит.Область(
Кит.Заголовок(3, Кит.Иконка("пакет"), Кит.Ссылка("/проекты/" + Имя, Имя)).Вид("имя"),
Кит.Область(Кит.Кнопка("Настройки").Вторичная().Малая().Иконка("шестерёнка")
.Адрес("/проекты/" + Имя + "/настройки")).Вид("действия")).Вид("шапка"),
Кит.Примечание("Сводки по проектам за неделю для бухгалтерии.").Вид("описание")).Вид("карточка"));
КонецЦикла;
HTML = Кит.Карточка("Мои проекты",
Кит.Сетка(Ячейки[0], Ячейки[1], Ячейки[2]).Колонки(3),
Кит.Таблица(Кит.Колонка("Ключ"), Кит.Колонка("Создан"),
Кит.Запись(Кит.Ячейка("ноутбук"), Кит.Ячейка("12 марта")),
Кит.Запись(Кит.Ячейка("сервер сборки"), Кит.Ячейка("2 апреля"))))
.Описание("Проекты, которыми вы управляете, и ключи доступа.").Рендер();Сетка простых карточек — тоже список карточек: например, группы проектов в карточке «Группы» (дев-сборка 8). На телефоне плоской становится внешняя карточка, а карточки сетки остаются карточками.
Группы проектов в карточке — сетка карточек
Группы проектов
Группы, в которых вы состоите.
Бухгалтерия
12 проектов
Склад
12 проектов
Кадры
12 проектов
Ячейки = Новый Массив();
Для Каждого Имя Из СтрРазделить("Бухгалтерия,Склад,Кадры", ",") Цикл
Ячейки.Добавить(Кит.Карточка(Имя, Кит.РядПлашек(СтрРазделить("основная,открытая", ",")))
.Адрес("/группы/" + Имя).Описание("12 проектов").Иконка("куб").Уровень(3));
КонецЦикла;
HTML = Кит.Карточка("Группы проектов", Кит.Сетка(Ячейки[0], Ячейки[1], Ячейки[2]).Колонки(4))
.Описание("Группы, в которых вы состоите.").Иконка("куб").Рендер();Гайдлайны#
Ключи доступа
Ключ показывается один раз
Активных ключей: 2
Код
HTML = Набор.Карточка().Отрисовать(Новый Структура("Заголовок, Описание, Тело",
"Ключи доступа", "Ключ показывается один раз", "<p>Активных ключей: 2</p>"));Информация
Активных ключей: 2
Код
HTML = Набор.Карточка().Отрисовать(Новый Структура("Заголовок, Тело",
"Информация", "<p>Активных ключей: 2</p>"));Источники
Подключено источников: 3
Код
HTML = Набор.Карточка().Отрисовать(Новый Структура("Заголовок, Тело, Действия",
"Источники", "<p>Подключено источников: 3</p>",
Набор.Кнопка().Отрисовать(Новый Структура("Подпись, Вариант", "Подключить", "вторичная"))));Источники
Подробности
Подключено источников: 3
Код
Внутренняя = Набор.Карточка().Отрисовать(Новый Структура("Заголовок, Тело",
"Подробности", "<p>Подключено источников: 3</p>"));
HTML = Набор.Карточка().Отрисовать(Новый Структура("Заголовок, Тело",
"Источники", Внутренняя));Доступность#
- Карточка печатается
<section>, а заголовок — настоящим<h1>–<h6>. Скринридер находит блок по заголовкам. - Выбирайте
Уровеньпо месту в оглавлении страницы, а не по размеру шрифта: пропуск уровня ломает навигацию по заголовкам. - Иконка заголовка декоративна (
aria-hidden): смысл несёт текст. - Заголовок со ссылкой — обычная ссылка с текстом заголовка. Отдельная кнопка «Открыть» рядом не нужна.
Узлом холста#
На холсте тело карточки не передают строкой, а кладут детьми узла; полоса действий — второй холст .Действия(д…).
Узлом дерева — тело кладут детьми
Проекты
две штуки
HTML = Кит.Карточка("Проекты", Кит.Примечание("две штуки")).Рендер();Модель#
Структура с этими полями — прежний вид модели: в дереве холста Адрес, Описание, Иконка, Уровень и Якорь пишут слова Кит.Карточка, а тело и действия — дети узла.
Карточка.Отрисовать()src/Классы/компоненты/Карточка.os
Отрисовывает карточку.
Параметры:
Модель - Структура - Заголовок (экранируется), Адрес (заголовок становится ссылкой),
Описание, Иконка, Класс, Уровень (заголовка, 1..6, по умолчанию 2),
Якорь (атрибут id — цель ссылки на эту карточку),
Тело и Действия — ДОВЕРЕННЫЙ HTML, собранный вызывающим через кит.
Возвращаемое значение:
Строка - фрагмент <section class="card">.Кит.Карточка()src/Классы/холст/Кит.os
Карточка — рамка с заголовком; её тело — дети узла, действия — второй холст
Действия(д…). Слова: Адрес, Описание, Иконка, Уровень, Якорь.
Параметры:
Модель - Строка, Структура - заголовок карточки; Структура — прежний вид модели
без поля Тело.
Р1…Р8 - ЭлементЭкрана, Строка - (необязательные) тело карточки; строка — текст.
Возвращаемое значение:
ЭлементЭкрана