None content

Общая информация

None content используется, когда внутри виджета или экрана нет никаких данных. Он уведомляет пользователя о том, что данные отсутствуют и подсказывает, что делать дальше.

Анатомия

1. Заголовок

2. Пояснительный текст

3. Блок кнопок (опционально)

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

• В таблице или виджетах, когда нет доступных элементов.

• В результатах поиска при отсутствии совпадений.

• В таблицах или виджетах, где ещё не добавлены данные.

• При возникновении ошибки загрузки, если данные не были получены.

Описание работы

• Заголовок всегда остаётся неизменным

• Пояснительный текст рекомендовано использовать всегда. Для описания причины отсутствия данных и подсказки, что делать, чтобы они начали отображаться.

• Кнопку можно использовать для действия, которое поможет пользователю выйти из пустого состояния (например, “Создать”, “Обновить”, “Загрузить данные” и т. п.).

Оформление

Фон для None content для отдельных виджетов и внутри компонентов всегда белый.

При использовании на пустом экране с навигацией, но без других виджетов с данными, отображается на сером фоне (например, когда в навигации ничего не выбрано, или пункт навигации заблокирован для просмотра для данного пользователя).

Если на странице вообще нет данных для отображения, для этого рекомендуем использовать компонент Error Page.

Размеры

Высота и ширина компонента динамические и зависят от текста, наполнения и размеров виджета, в который встраивается.

Размеры вспомогательного текста

Ширина вспомогательного текста также зависит от размеров виджета или экрана, в который встраивается. Максимально допустимая ширина текста увеличивается пропорционально ширине виджета, в среднем на 25–35%.

Рекомендации для 8-колоночной сетки с учетом панели 48 px:

Колонки сетки	Ширина виджета	Ширина вспомогательного текста
2	458 px	= 384 px
3	691 px	≤ 426 px
4	924 px	≤ 533 px
5	1157 px	≤ 693 px
6	1390 px	≤ 800 px
8	1856 px	≤ 1000 px

Рекомендации для 8-колоночной сетки с учетом панели 48 px и навигационного меню 360 px:

Колонки сетки	Ширина виджета	Ширина вспомогательного текста
2	368 px	= 334 px
3	556 px	≤ 384 px
4	744 px	≤ 426 px
5	932 px	≤ 533 px
6	1120 px	≤ 640 px
8	1496 px	≤ 853 px

Табличка не является строгим указанием для использования, а всего лишь, как рекомендация и пример изменения ширины текста, в зависимости от ширины виджета.

Основные рекомендации

• Если текста мало, он не растягивается на всю доступную ширину, а использует максимально комфортную ширину для читаемости.

• Если текста много, он равномерно распределяется в пределах максимально допустимой ширины, избегая излишнего растяжения или сжатия.

Расположение

По центру экрана/виджета вписываясь по длине блока с отступами по 16 рх: