Placeholder
Placeholder — заглушка на месте отсутствующего содержимого: пустой список, ненайденный документ, ещё не открытый редактор. Placeholder.Root занимает всю высоту родителя и центрирует части по ней, поэтому кладётся вместо содержимого целиком — не рядом с ним. Placeholder.Preview — иллюстрация или иконка (ширина картинки ограничена 400px), Placeholder.Content — текст, Placeholder.Actions — ряд кнопок (сами кнопки ставит потребитель). Порядок частей не фиксирован: они идут в том порядке, в котором их написали.
Анатомия
Примеры
Иллюстрация под текстом
Тот же набор частей в обратном порядке — Placeholder.Preview после Placeholder.Content. Пропа для этого не нужно.
Только текст
Иллюстрация нужна на больших пустых поверхностях — экран без документа, доска без колонок. Для пустого списка в тулбоксе или карточке хватит одного Placeholder.Content.
Действия
Placeholder.Actions — пустая обёртка с гапом: что показать и что кнопки делают, решает потребитель. Уместна там, где из пустого состояния есть очевидный выход — «Создать доску», «Вернуться на главную».
API
| Prop | Type | Default |
|---|---|---|
title*Сообщение о том, почему здесь пусто: «На этой доске ещё нет ни одной колонки», а не «Пусто». Не переносится — текст в одну строку | string | - |
descriptionПодсказка под сообщением: что сделать, чтобы стало не пусто | string | - |