Раскладка

Какой род взять#

• Холст — подряд без своего тега. Нужен корень куска экрана или функция, которая возвращает несколько узлов.
• Область — блок со своим тегом и видом. На неё вешают признак, роль, якорь.
• Ряд — узлы в строку с переносом: кнопки выбора, плашки, действия записи.
• Статья — самостоятельный кусок, который можно вынуть из списка: карточка объекта.
• Раскрывашка — свёрнутая строка отвечает «что это», развёрнутая отдаёт содержимое.
• Группа — поля, которые браузер и скринридер считают одним целым.

Не берите область там, где хватает холста: обёртка, которой никто не просил, ломает вертикальный ритм соседей. Равнозначные блоки в колонки раскладывает компонент «Сетка» — о нём ниже, а о колонках и шаге интервалов — на странице Сетка и интервалы.

Холст и Ничего#

Холст печатает детей подряд и не добавляет ни одного тега. Подробно о нём — на странице Холст и узлы.

Ничего — тот же узел, но для места, где показывать нечего. Его не наполняют.

Область#

Область — коробка с тегом div. Слово .Вид(…) задаёт её роль на экране: «вставка» — врезка пунктиром внутри формы, «карточки» — колонка карточек, «проза» — чужой документ, набранный типографски, «полоса» — колонка содержимого по центру.

Вставка нужна там, где шаг формы надо выделить, но своя секция для него — слишком много.

Ряд#

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

Подпись ряда человеку не видна: она уходит в aria-label. Имя у простого div скринридер не читает, поэтому ряду с подписью ставьте ещё и роль «группа».

Статья#

Статья — лендмарк article: её можно вынуть из списка, и она останется понятной. Этим она и отличается от области.

Из статьи собирают карточку объекта: шапка — область вида «шапка» с именем (заголовок вида «имя»), плашками (область «плашки») и действиями (область «действия»), под ней описание и ряд метаданных. Имя в карточке главное, и сжимается оно последним: плашки и действия держат свою ширину, а имя — одна строка с многоточием, не короче девяти знаков; обрезанное имя скрипт кита показывает целиком подсказкой на наведении. В узкой карточке — колонка сетки, телефон — плашки уходят второй строкой под имя, а действия остаются справа от него.

Раскрывашка#

Раскрывашка — нативный details: раскрывается без единой строки скрипта. У неё два холста. Тело — дети узла, свёрнутую строку наполняет слово Шапка(…): с аргументами оно кладёт их в шапку и возвращает саму раскрывашку, без аргументов отдаёт холст шапки.

В шапку кладут не только текст: значок впереди, плашки состояния за подписью. Дети шапки стоят в строку с зазором 8 px, как в шапке записи реестра, и переносятся вместе, если строке тесно; маркер раскрытия — впереди и поворачивается, когда раскрывашка открыта.

Без слова .Вид(…) раскрывашка печатается панелью с рамкой. Открыть() печатает её сразу развёрнутой: так открывают подробность, которую человек пришёл прочесть.

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

Группа#

Группа — fieldset. Подпись группы — первый аргумент, дети — за ней; подпись видима и печатается легендой первой строкой. Слово .Вид(…): «набор» — группа-переключатель, «простая» — без оформления (существует, чтобы отключать и прятать поля вместе), «раздел» — часть длинной формы.

Длинную форму делят разделы. Подпись раздела печатается заголовком, раздел от раздела отделяет черта, вложенные группы внутри раздела — без рамок. Действия собираются одним рядом вне формы: кнопка называет свою форму по якорю (слово ВФорме(…), атрибут form).

Сетка#

Сетка — компонент, а не род, но в дереве она ведёт себя как раскладка: каждый ребёнок узла становится своей ячейкой. Число колонок задаёт слово Колонки(…): «авто» или от 1 до 4. Подпись сетки — слово Заголовок(…) — уходит в aria-label.

Гайдлайны#

Ряд = Кит.Ряд("выбор");
Для Каждого Подпись Из СтрРазделить("Все,Мои,Архив", ",") Цикл
	Ряд.Добавить(Кит.Кнопка(Подпись).Вторичная());
КонецЦикла;
HTML = Ряд.Рендер();

Холст = Кит.Холст();
Для Каждого Подпись Из СтрРазделить("Все,Мои,Архив", ",") Цикл
	Холст.Добавить(Кит.Кнопка(Подпись).Вторичная());
КонецЦикла;
HTML = Холст.Рендер();

HTML = Кит.Группа("Уведомления",
	Кит.Поле("почта", "На почту").ТипЗначения(Тип("Булево")),
	Кит.Поле("чат", "В чат").ТипЗначения(Тип("Булево"))).Вид("набор").Рендер();

HTML = Кит.Холст(
	Кит.Надпись("Уведомления").Вид("метка"),
	Кит.Поле("почта", "На почту").ТипЗначения(Тип("Булево")),
	Кит.Поле("чат", "В чат").ТипЗначения(Тип("Булево"))).Рендер();

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

• Раскрывашка — нативный details: клавиатура, фокус и состояние «свёрнуто/развёрнуто» работают без скрипта. Подпись раскрывашки кит вешает aria-label на свёрнутую строку.
• Легенда группы печатается первым ребёнком fieldset, как требует HTML: скринридер читает её перед каждым полем группы.
• Ряд без видимого заголовка назовите подписью и дайте ему роль «группа»: подпись станет aria-label, роль — role="group".
• Признак (data-*) — для скрипта, а не для скринридера. Имя признака — латиницей, цифрами и дефисом, иначе он молча не печатается.

Справка#

Область — коробка на экране: свой блок, свой вид, и на неё можно повесить признак
и роль. Тем и отличается от холста, что у неё есть тег. Вид словом: «проза» (чужой
документ, набранный типографски) | «карточки» (колонка карточек) | «шапка» | «плашки»
| «действия» (части карточки объекта) | «отбор» (полоса применённых плашек над списком)
| «вставка» (врезка пунктиром внутри формы: шаг, а не своя секция) | «студия» (работа
слева, образец справа) | «работа» / «образец» (колонки студии) | «поле» (рамка поля
с меткой и подсказкой вокруг своего управления) | «полоса» (колонка содержимого
по центру страницы) | "" (просто блок).

Параметры:
 Р1…Р8 - ЭлементЭкрана, Строка - (необязательные) дети узла; строка — текст.

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

Ряд — элементы в строку с переносом. Вид ряда — его смысл, поэтому он первым аргументом.

Параметры:
 Вид   - Строка - «выбор» (ряд взаимоисключающих кнопок) | «признаки» (ряд плашек)
         | «свёрнутые» (ряд плашек, у которого хвост убран под раскрывашку)
         | «справа» (ряд, прижатый к правому краю) | «строкой» (значок и значение
         в одну строку, без переноса) | «действия» (кнопки и формы-кнопки одним рядом
         с переносом: действия записи в одном месте).
 Р1…Р8 - ЭлементЭкрана, Строка - (необязательные) дети узла; строка — текст.

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

Статья — самостоятельный кусок страницы: его можно вынуть из списка и он останется
понятным. Тем и отличается от области, что это лендмарк, а не просто блок. Вид словом:
«карточка» (карточка объекта в списке) | "" (без оформления).

Параметры:
 Р1…Р8 - ЭлементЭкрана, Строка - (необязательные) дети узла; строка — текст.

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

Раскрывашка — свёрнутая строка отвечает «что это», развёрнутая отдаёт содержимое.
Шапка наполняется словом Шапка(д…), тело — детьми. Вид словом: «простая» (без единого
класса) | «врезка» (карточка в потоке списка) | «подробность» (мелкая строка «подробнее»
в ячейке) | «хвост» (свёрнутый остаток ряда плашек) | "" (панель).

Параметры:
 Р1…Р8 - ЭлементЭкрана, Строка - (необязательные) тело раскрывашки; строка — текст.

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

Шапка раскрывашки — отдельный холст, который печатается свёрнутой строкой.
С аргументами наполняет шапку и возвращает саму раскрывашку.

Параметры:
 Р1 - ЭлементЭкрана, Строка, Неопределено - (необязательный) содержимое шапки, до Р8.
 Р2 - ЭлементЭкрана, Строка, Неопределено - (необязательный)
 Р3 - ЭлементЭкрана, Строка, Неопределено - (необязательный)
 Р4 - ЭлементЭкрана, Строка, Неопределено - (необязательный)
 Р5 - ЭлементЭкрана, Строка, Неопределено - (необязательный)
 Р6 - ЭлементЭкрана, Строка, Неопределено - (необязательный)
 Р7 - ЭлементЭкрана, Строка, Неопределено - (необязательный)
 Р8 - ЭлементЭкрана, Строка, Неопределено - (необязательный)

Возвращаемое значение:
 ЭлементЭкрана - без аргументов холст шапки; с аргументами — эта раскрывашка.

Печатает раскрывашку (и запись реестра) сразу развёрнутой: содержимое видно, пока его
не свернули.

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

Группа полей — то, что браузер и скринридер считают одним целым. Вид словом: «набор»
(группа-переключатель, которую можно отключить и спрятать целиком) | «простая» (без
оформления: группа существует, чтобы отключать и прятать поля вместе) | «раздел» (часть
длинной формы: подпись заголовком, раздел от раздела — чертой, вложенные группы без
рамок) | "" (обычная).

Параметры:
 Подпись - Строка - видимая подпись группы; пустая — группа без подписи.
 Р1…Р8   - ЭлементЭкрана, Строка - (необязательные) поля группы; строка — текст.

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

Сетка равнозначных блоков: КАЖДЫЙ ребёнок узла становится своей ячейкой. Слова:
Колонки, Плотная, ПолныеРяды, Заголовок.

Параметры:
 Р1…Р8 - ЭлементЭкрана, Структура - (необязательные) ячейки сетки; Структура первым
         аргументом — прежний вид модели без поля Ячейки.

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