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 рх:

Last updated

Was this helpful?