Списки и пары

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

Когда что брать#

Список — несколько равнозначных строк без порядка важности: источники, требования к полю, шаги без номеров.
Свойства — сведения об объекте парами: «Создан — вчера», «Размер — 430 МБ».

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

Список#

Список печатается тегом ul, пункт — li. Пункт — холст: его дети — текст, ссылка, машинное значение; строка становится текстом.

Список и пункты

первый
второй, ссылкой

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

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

Список-сноска под полем

только латиница и дефис
не длиннее 64 символов

HTML = Кит.Список(
	Кит.Пункт("только латиница и дефис"),
	Кит.Пункт("не длиннее 64 символов")).Вид("сноска").Рендер();

Список из данных собирается циклом: пункт на каждое значение.

Список из массива

main
отчёт
архив-2024

Перечень = Кит.Список();
Для Каждого Имя Из СтрРазделить("main,отчёт,архив-2024", ",") Цикл
	Перечень.Добавить(Кит.Пункт(Кит.Код(Имя)));
КонецЦикла;

HTML = Перечень.Рендер();

Свойства#

Свойства печатаются списком определений dl. Имя свойства — первый аргумент, оно экранируется; значение — дети свойства. Своего тега у свойства нет: оно печатается парой dt и dd.

Свойства — пары «имя — значение»

Создан: вчера
Размер: 430 МБ

HTML = Кит.Свойства(
	Кит.Свойство("Создан", "вчера"),
	Кит.Свойство("Размер", Кит.Код("430 МБ"))).Рендер();

Значение свойства — холст, поэтому в нём бывает плашка, ссылка или несколько узлов.

Значение — плашка, ссылка, полоса заполнения

Состояние: активен
Владелец: Анна Смирнова
Место: занято 4 ГБ из 1040%

HTML = Кит.Свойства(
	Кит.Свойство("Состояние", Кит.Плашка("активен").Вид("ok")),
	Кит.Свойство("Владелец", Кит.Ссылка("/люди/7", "Анна Смирнова")),
	Кит.Свойство("Место", Кит.ПолосаЗаполнения(40, "занято 4 ГБ из 10"))).Рендер();

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

Копировать, спрятать, пояснить#

У свойства три слова.

Копируемое() ставит рядом со значением кнопку копирования — ту же, что у блока команды. В буфер обмена уходит текст значения. Если значение собрано не из текста или копировать нужно другое (полный адрес вместо подписи ссылки), строку передают аргументом: Копируемое("https://…").
Секрет() прячет значение под точки и ставит рядом кнопку «Показать». Значение открывает лист, скрипт не нужен.
Примечание(Текст) печатает приглушённую строку под значением: откуда оно, когда обновлено, чем грозит.

Копируемое, секрет и примечание

Адрес проекта: https://пример.рф/проекты/альфа
Ключ доступа: ak_7f2c91ab
ПоказатьСкрытьВыпущен 3 марта, действует до отзыва
Участников: 12
считается раз в сутки

HTML = Кит.Свойства(
	Кит.Свойство("Адрес проекта", Кит.Код("https://пример.рф/проекты/альфа")).Копируемое(),
	Кит.Свойство("Ключ доступа", Кит.Код("ak_7f2c91ab")).Секрет().Копируемое()
		.Примечание("Выпущен 3 марта, действует до отзыва"),
	Кит.Свойство("Участников", "12").Примечание("считается раз в сутки")).Рендер();

Копирование оживляет скрипт инсталляции по атрибуту data-copy, как у блока команды. Без скрипта значение выделяют мышью. Свойство без этих слов печатается прежней парой dt и dd, байт в байт.

Гайдлайны#

Создан: вчера
Размер: 430 МБ

ДелайтеПары «имя — значение» — свойствами: имена выровнены в колонку

Код

HTML = Кит.Свойства(
	Кит.Свойство("Создан", "вчера"),
	Кит.Свойство("Размер", Кит.Код("430 МБ"))).Рендер();

Создан: вчера
Размер: 430 МБ

Не делайтеПары строкой в пунктах списка: имя и значение не различить

Код

HTML = Кит.Список(
	Кит.Пункт("Создан: вчера"),
	Кит.Пункт("Размер: 430 МБ")).Рендер();

только латиница и дефис
не длиннее 64 символов

ДелайтеПеречень — списком: скринридер называет число пунктов

Код

HTML = Кит.Список(
	Кит.Пункт("только латиница и дефис"),
	Кит.Пункт("не длиннее 64 символов")).Вид("сноска").Рендер();

— только латиница и дефис

— не длиннее 64 символов

Не делайтеПеречень примечаниями подряд: для скринридера это просто абзацы

Код

HTML = Кит.Холст(
	Кит.Примечание("— только латиница и дефис"),
	Кит.Примечание("— не длиннее 64 символов")).Рендер();

Ключ доступа: ak_7f2c91ab
ПоказатьСкрыть

ДелайтеКлюч — секретом: значение открывают, когда нужно

Код

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

Ключ доступа: ak_7f2c91ab

Не делайтеКлюч открытым текстом: его прочтёт любой, кто стоит за спиной

Код

HTML = Кит.Свойства(
	Кит.Свойство("Ключ доступа", Кит.Код("ak_7f2c91ab"))).Рендер();

Участников: 12
считается раз в сутки

ДелайтеПояснение к значению — словом Примечание: оно приглушено и стоит под значением

Код

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

Участников: 12 (считается раз в сутки)

Не делайтеПояснение в скобках внутри значения: значение и оговорка сливаются

Код

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

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

Список печатается ul и li: скринридер объявляет «список, два пункта» и даёт перейти к следующему.
Свойства печатаются dl, dt и dd: имя и значение связаны разметкой, а не только выравниванием.
Кит не даст положить в список не пункт, а в свойства — не свойство: такой ребёнок исчез бы с экрана, и сборка останавливается исключением.
Кнопка копирования — <button type="button"> со значком. Её имя «Копировать» скринридер читает из текста кнопки, а глазу оно видно всплывающей подсказкой.
Кнопка «Показать» у секрета — подпись спрятанной галки. Фокус приходит в галку с клавиатуры, кольцо фокуса рисуется на подписи, пробел открывает значение. Пока секрет закрыт, скринридер значения не читает, точки от него тоже скрыты.
Подписи «Копировать», «Показать» и «Скрыть» кит берёт из словаря интерфейса: props.copy, props.reveal, props.hide.

Справка#

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

Список — перечисление равнозначного; в него кладут пункты. Вид словом: «сноска»
(мелкий приглушённый список под полем) | "" (обычный).

Параметры:
 Р1…Р8 - ЭлементЭкрана - (необязательные) пункты.

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

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

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

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

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

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

Свойства объекта — перечисление пар «имя — значение»; в него кладут свойства.

Параметры:
 Р1…Р8 - ЭлементЭкрана - (необязательные) свойства.

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

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

Свойство — пара «имя — значение»: имя приходит подписью, значение собирается детьми
(текст, код, плашка, ссылка, полоса заполнения). Слова (выпуск 0.13): Копируемое(Текст = …)
— кнопка копирования рядом со значением, Секрет() — значение под точками и кнопка
«Показать» без скрипта, Примечание(Текст) — приглушённая строка под значением.

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

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