Пустое состояние

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

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

Не берите пустое состояние для места, которого на экране быть не должно, — его просто не рисуют, см. Ничего и Холст ниже. Об ошибке загрузки сообщает тост или страница ошибки.

С призывом к действию#

Лучшее пустое состояние объясняет, что здесь будет, и даёт кнопку, чтобы это сделать. Действие — модель компонента кнопка.

В дереве холста пустое состояние собирается словами: пояснение позицией, заголовок и значок — словами, действие — узлом кнопки (см. Язык узлов).

Два пути из пустоты#

Бывает, что из пустоты ведут два пути: опубликовать своё или перенести готовое. Второе слово Действие добавляет второй путь рядом с первым (то же — Действия(Кнопка1, Кнопка2)): первый — главный, его вид задаёте вы; второй без своего вида печатается вторичной кнопкой. На телефоне пути встают столбиком во всю ширину.

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

Только объяснение#

Строка вместо модели — только пояснение под значком «инфо». Так пишут, когда сделать ничего нельзя, но пустоту нужно назвать.

Компактное#

Компактное пустое состояние — для узкой колонки или ячейки таблицы: меньше отступы и значок.

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

Иногда на экране показывать нечего, и никакого объяснения там не нужно: блока просто не должно быть. Тогда возвращают Кит.Ничего() — узел, который печатается пустой строкой.

Кит.Холст() печатается так же, пока пуст, но смысл у него обратный. Холст — корень куска экрана: его наполняют и печатают целиком. Ничего — место, где показывать нечего: его не наполняют, он и есть ответ.

Функция БлокЧерновика(Знач Статья)

	Если Статья.Черновик Тогда
		Возврат Кит.Ничего();   // на странице этого места просто не будет
	КонецЕсли;

	Возврат Кит.Холст(          // а здесь собираем кусок экрана
		Кит.Заголовок(3, "Как читать"),
		Кит.Примечание(Статья.Пояснение).Вид("описание"));

КонецФункции

На Возврат Кит.Ничего(); читатель останавливается: элемента здесь нет. На Возврат Кит.Холст(); он пошёл бы вверх по функции искать, чем холст наполнили. Ничего() ложится всюду, где принимают холст, но не в обход правил вложения: в запись по-прежнему кладут ячейку, в таблицу — запись.

Пустое состояние и Ничего() — противоположности. Первое что-то показывает человеку, второе не показывает ничего.

Гайдлайны#

HTML = Набор.ПустоеСостояние().Отрисовать(
	Новый Структура("Заголовок, Пояснение, Действие",
		"Ничего не найдено",
		"Уточните отбор или сбросьте его.",
		Новый Структура("Подпись, Вариант, Адрес", "Сбросить отбор", "вторичная", "/документы")));

HTML = Набор.ПустоеСостояние().Отрисовать("Нет данных");

HTML = Набор.ПустоеСостояние().Отрисовать(Новый Структура("Пояснение, Компактное",
	"Связей нет", Истина));

HTML = Набор.ПустоеСостояние().Отрисовать(
	Новый Структура("Заголовок, Пояснение, Действие",
		"Связей нет", "Связи появятся, когда на документ сошлются.",
		Новый Структура("Подпись, Адрес", "Обновить", "/документы")));

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

• Без Заголовка и Пояснения кит бросает исключение: пустой блок неотличим от несработавшей загрузки.
• Заголовок и пояснение — обычные абзацы текста, скринридер читает их по порядку.
• Значок декоративен: смысл несут слова.
• Кнопка действия — полноценная кнопка или ссылка-кнопка, с подписью-глаголом.
• Два пути — две кнопки в порядке важности: первым идёт главный, и клавиша Tab приходит к нему первым.

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

Пустое состояние вместо таблицы без записей кладут в её холст Пусто() — образец на странице таблица.

Модель#

Структура ниже — прежний вид модели; в дереве холста её поля пишут слова Кит.ПустоеСостояние.

Отрисовывает пустое состояние.

Параметры:
 Модель - Структура, Строка - текст пояснения либо структура: Заголовок, Пояснение,
          Иконка (по умолчанию "инфо"), Действие (модель компонента Кнопка),
          Действия (дев-сборка 9: Массив моделей кнопок — второй и следующие пути из
          пустоты; печатаются после Действия, кнопка без своего Варианта — вторичной),
          Компактное (вариант для ячейки таблицы или узкой колонки).

Возвращаемое значение:
 Строка - фрагмент <div class="empty">. Одно действие — в <div class="empty__action">,
          как прежде; два и больше — рядом в <div class="empty__actions"> (на телефоне
          столбиком). Кидается исключением, если не задано ни Заголовка, ни Пояснения.

Пустое состояние списка: значок, объяснение и призыв к действию. Слова: Заголовок,
Пояснение, Иконка, Действие(узел кнопки), Компактное.

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

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

Ничего — место экрана, где показывать нечего: всюду, где принимают холст, но не в обход
правил вложения — внутрь записи по-прежнему кладут ячейку, внутрь таблицы запись,
внутрь списка пункт. Узел тот же, что холст, и печатается он так же — пустой строкой;
отличается тем, что читатель «Возврат Кит.Ничего();» видит отсутствие элемента сразу,
а не ищет по функции, чем этот холст наполнили. Наполнять его незачем: собираете кусок
экрана — берите Холст(). Именем «пусто» звать нельзя: у ПустоеСостояние, примечания
вида «пусто» и Таблица.Пусто() смысл обратный — они человеку что-то ПОКАЗЫВАЮТ.

Возвращаемое значение:
 ЭлементЭкрана - печатается пустой строкой.

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

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

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