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

Как компонент живёт в дереве#

Компонент можно позвать двумя путями. Через Набор он сразу возвращает строку — это «компонент строкой». Через Кит — узел, который кладут в дерево и печатают вместе со всем экраном. Разметка у обоих одна, байт в байт.

Компонент без слота — лист дерева: кнопка, поле, иконка, плитка, пагинация. Детей он не принимает.
Компонент со слотом — карточка и опасная зона (дети — тело), шапка объекта (дети — действия), плашка (дети — содержимое вместо значка и текста).
Компонент со списком — сетка (каждый ребёнок — своя ячейка), табы (дети — вкладки Кит.Вкладка), меню (дети — пункты Кит.ПунктМеню и формы).

Компонент рисуется на печати: слова дописывают его модель до самого Рендер(), а содержимое слота — это дети, которых к моменту рождения ещё нет. От узла Готовое компонент отличается тем, что назван: в дереве экрана видно компонент[карточка], а не безымянный кусок HTML.

Слова — поля модели#

Слово компонента пишет поле его модели и возвращает тот же узел. Булево поле — слово без аргумента (.Обязательное(), .ТолькоИконка()), поле-список — слово, которое добавляет один элемент (.Мета(…), .Вариант(…), .Параметры(…)). Общие слова узла — Подпись, Подсказка, Вид, Якорь, Иконка — у компонента значат то, что значат в его модели. У кнопки есть сахар варианта и размера: .Основная() .Вторичная() .Опасная() .Ссылкой() .Малая() .Большая().

Компонент словами печатает то же, что структурой

Словами = Кит.Кнопка("Отозвать").Опасная().Малая().Иконка("корзина").Имя("операция", "отзыв");

Структурой = Кит.Кнопка(Новый Структура("Подпись, Вариант, Размер, Иконка, Имя, Значение",
	"Отозвать", "опасная", "малый", "корзина", "операция", "отзыв"));

HTML = Кит.Ряд("действия", Словами, Структурой).Рендер();

Структура-модель — прежний вид модели: Кит.Кнопка(Новый Структура(…)) работает как раньше, и слова дописывают её. Полный список слов каждого компонента — на странице Язык узлов и в справке его функции кита.

Слово, которого компонент не знает, останавливает сборку и перечисляет его слова: опечатка не даст молча компонент не того вида.

Неизвестное слово — исключение со словами компонента

Элемент экрана: у компонента «карточка» нет слова «Опасная». Его слова: «Адрес», «Описание», «Иконка», «Уровень», «Якорь»; общие — Признак, Роль, Когда.

Попытка
	Кит.Карточка("Проекты").Опасная();
Исключение
	HTML = Кит.Примечание(КраткоеПредставлениеОшибки(ИнформацияОбОшибке())).Рендер();
КонецПопытки;

Компонент, которого ждёт слово другого компонента, кладут узлом: кнопку — в действие пустого состояния, поле — в строку поиска, плашку — в шапку объекта или знак сводки.

Узел компонента — в слово другого

Проектов пока нет

Создайте первый проект — он появится здесь.

Создать проект

HTML = Кит.ПустоеСостояние("Создайте первый проект — он появится здесь.")
	.Заголовок("Проектов пока нет")
	.Действие(Кит.Кнопка("Создать проект").Адрес("/проекты/новый").Иконка("плюс"))
	.Рендер();

Слот: дети становятся телом#

У карточки слот — тело. Дети узла карточки печатаются внутри неё; второй холст — действия, слово Действия(…).

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

Проекты

Проекты команды

Три проекта, два открытых.

HTML = Кит.Карточка("Проекты", Кит.Примечание("Три проекта, два открытых."))
	.Описание("Проекты команды")
	.Действия(Кит.Кнопка("Создать").Основная())
	.Рендер();

У шапки объекта дети становятся действиями — кнопками справа от имени.

Шапка объекта: дети — её действия

отчёт

Отчёт о продажах за квартал

HTML = Кит.ШапкаОбъекта("отчёт",
	Кит.Кнопка("Скачать").Вторичная().Иконка("скачать"))
	.Иконка("куб").Описание("Отчёт о продажах за квартал")
	.Рендер();

У плашки дети печатаются вместо значка и текста модели. Так плашку собирают из своих узлов — например, с машинным значением внутри.

Плашка, собранная детьми

ветка main

HTML = Кит.Плашка("ветка ", Кит.Код("main")).Вид("accent").Рендер();

Список: каждый ребёнок — ячейка#

Сетка раскладывает детей сама, поэтому получает их по одному, а не склеенной строкой. Табы и меню собираются из своих узлов: вкладка и пункт меню печатаются только внутри них.

Сетка из карточек

альфа

проект команды

бета

проект команды

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

HTML = Сетка.Рендер();

Табы из вкладок

HTML = Кит.Табы(
	Кит.Вкладка("Обзор", "/проекты/альфа").Активна(),
	Кит.Вкладка("Участники", "/проекты/альфа/участники").Счётчик(3),
	Кит.Вкладка("Настройки", "/проекты/альфа/настройки").Иконка("шестерёнка"))
	.Заголовок("Разделы проекта").Рендер();

Компонент виден по имени#

Дерево() показывает компонент его видом: компонент[карточка], компонент[кнопка]. По дереву видно, из чего собран экран, не открывая разметку.

В дереве компонент виден по имени, а не куском HTML

компонент[карточка]
  действия
  компонент[кнопка]

Карточка = Кит.Карточка("Проекты", Кит.Кнопка("Создать"));

HTML = Кит.Код(Карточка.Дерево()).Вид("блочный").Рендер();

Компонент без слота детей не принимает: внутрь него не кладут, и кит скажет об этом на Добавить.

Кнопка не холст — исключение

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

Попытка
	Кит.Кнопка("Создать").Добавить("ещё");
Исключение
	HTML = Кит.Примечание(КраткоеПредставлениеОшибки(ИнформацияОбОшибке())).Рендер();
КонецПопытки;

Гайдлайны#

Ключи доступа

Ключ показывается один раз.

ДелайтеТело карточки — детьми узла, настройка — словами

Код

HTML = Кит.Карточка("Ключи доступа",
	Кит.Примечание("Ключ показывается один раз."),
	Кит.Кнопка("Создать ключ").Вторичная()).Рендер();

Ключи доступа

Не делайтеТело строкой через Набор и Готовое: в дереве — безымянный HTML

Код

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

открытыйкоманда

ДелайтеКомпонент узлом кита — Кит.Плашка(…)

Код

HTML = Кит.Ряд("признаки",
	Кит.Плашка("открытый").Вид("ok"),
	Кит.Плашка("команда")).Рендер();

открытыйкоманда

Не делайтеКомпонент строкой в Готовое(): дерево его не видит

Код

HTML = Кит.Ряд("признаки",
	Кит.Готовое(Набор.Тег().Отрисовать(Новый Структура("Текст, Вид", "открытый", "ok"))),
	Кит.Готовое(Набор.Тег().Отрисовать("команда"))).Рендер();

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

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

Справка#

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

Карточка — рамка с заголовком; её тело — дети узла, действия — второй холст
Действия(д…). Слова: Адрес, Описание, Иконка, Уровень, Якорь.

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

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

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

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

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

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

Кит.ШапкаОбъекта()src/Классы/холст/Кит.os

Шапка объекта — первый экран проекта, группы, участника; дети узла становятся её
действиями. Слова: Иконка, Описание, Подпись, Вид (слаг для data-kind), Знак(Иконка,
Подпись), Мета(Подпись, Значение, Значок, Адрес), Плашка(узел | текст), Команда(Текст).

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

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

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

Плашка — короткий признак: состояние, тип, источник. Содержимое можно собрать узлами:
они печатаются ВМЕСТО значка и текста модели. Слова: Вид, Адрес, Иконка, Подсказка.

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

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

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

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

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

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

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

Кнопка формы или ссылка-кнопка. Слова: Основная, Вторичная, Опасная, Ссылкой, Малая,
Большая, Обычная, БезОтправки (кнопка в форме, которая её не отправляет: type="button";
Обычная — то же), Иконка, ТолькоИконка, Адрес, Имя(Имя, Значение), БезВалидации,
АдресОтправки, ВНовойВкладке, ВФорме(Якорь), Заблокирована, Занята, Подсказка,
ВоВсюШирину, Текущая, Команда(Команда, Цель), Открывает(Ид), Счётчик(Число, Подпись),
ЗнакРаскрытия, Картинка.

Параметры:
 Модель - Строка, Структура - подпись кнопки; Структура — прежний вид модели
          компонента «Кнопка».

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

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

Вкладка полосы Кит.Табы. Печатается только внутри неё. Слова: Активна, Иконка, Счётчик.

Параметры:
 Подпись - Строка - название вкладки.
 Адрес   - Строка - адрес её страницы (обязателен).

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

Кит.ПунктМеню()src/Классы/холст/Кит.os

Пункт меню — ссылка в панели Кит.Меню. Печатается только внутри неё. Слова: Иконка.

Параметры:
 Подпись - Строка - что пункт показывает.
 Адрес   - Строка - куда ведёт.

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

ЭлементЭкрана.Действия()src/Классы/холст/ЭлементЭкрана.os

Действия — второй холст: кнопки и формы. У карточки они печатаются под её телом,
у секции настроек — справа от заголовка и лида (на узком экране — под лидом).

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

Возвращаемое значение:
 ЭлементЭкрана - без аргументов холст действий; с аргументами — эта карточка или секция.