Заполнитель
Заполнитель объясняет пустое состояние: данных нет, поиск ничего не нашёл или раздел не заполнен. Для ожидания данных берите скелетон, а не пустое состояние.
Пример
Проектов пока нет
Созданные проекты появятся в этом разделе.
Разметка
Минимальную разметку показывает пример выше. Части вложены так:
sf-placeholder → изображение sf-placeholder__visual и
sf-placeholder__content → sf-placeholder__header с
sf-placeholder__title и sf-placeholder__description, затем
sf-placeholder__actions.
- Обязательны блок,
sf-placeholder__contentи заголовокsf-placeholder__title: он называет состояние. sf-placeholder__descriptionподсказывает причину или следующий шаг.sf-placeholder__visual— иллюстрация или крупная иконка; она лежит прямым потомком блока и не сжимается.sf-placeholder__actionsдержит одну понятную кнопку, если пользователь может исправить ситуацию.- Компонент работает без JavaScript. Части
sf-placeholder-right,sf-placeholder-topиsf-placeholder-top-text— другие имена__content,__headerи заголовка с пояснением.
Варианты
Компоновка
sf-placeholder--column ставит изображение над текстом и выравнивает всё по
центру — для пустого состояния в центре раздела; это компоновка по
умолчанию. sf-placeholder--row ставит изображение и текст в строку и
выравнивает текст по началу строки — для широкой области, например над
таблицей.
Доступность
- Заголовок заполнителя — настоящий заголовок (
h2–h4) по уровню раздела, чтобы пустое состояние находилось в структуре страницы. - Иллюстрация декоративна:
aria-hidden="true"на иконке или пустойaltу изображения. - Если пустое состояние появляется после действия пользователя (поиск,
фильтр), сообщите о нём областью с
role="status"вокруг заполнителя. - Кнопка действия называет действие, а не состояние: «Создать проект», а не «Пусто».
Классы
| Что | Классы |
|---|---|
| Блок | sf-placeholder |
| Части | sf-placeholder-right, sf-placeholder-top, sf-placeholder-top-text, sf-placeholder__actions, sf-placeholder__content, sf-placeholder__description, sf-placeholder__header, sf-placeholder__title, sf-placeholder__visual |
| Модификаторы | sf-placeholder--column, sf-placeholder--row |
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Переменные
Компонент читает свои переменные, а модификаторы задают им значения; таблица показывает, из чего складывается вид. Переменные компонента — его внутренняя проводка, а не поверхность настройки: их имена и устройство могут меняться. Вид проекта меняют общие токены, а глубокий вид Smart-компонента — его шаблон (см. Переменные компонента). Значение по умолчанию — из базового правила блока (.sf-placeholder); переменную без него задают только модификаторы.
| Переменная | По умолчанию | Задаёт |
|---|---|---|
--sf-placeholder--background-color |
var(--sf-transparent) |
background-color |
--sf-placeholder--color |
var(--sf-on-surface) |
color |
--sf-placeholder--gap |
var(--sf-space-1) |
gap |
--sf-placeholder-actions--gap |
var(--sf-space-1/2) |
gap |
--sf-placeholder-content--gap |
var(--sf-placeholder-right--gap, var(--sf-space-1)) |
gap |
--sf-placeholder-header--gap |
var(--sf-placeholder-top--gap, var(--sf-space-1/3)) |
gap |