Placeholder
Компонент для отображения заглушек при отсутствии контента или ошибках. Обеспечивает единый стиль для пустых состояний интерфейса.
Загружается...
Полноэкранный режим (stretched)
Используется когда:
- Нет других элементов на экране;
- Нужно акцентировать внимание на состоянии;
- Требуется центральное позиционирование.
Отображение нескольких кнопок
Чтобы отобразить несколько кнопок, в свойство action можно прокинуть несколько кнопок обернутых в ButtonGroup:
Загружается...
Рекомендации по использованию
- Используйте
outlineиконки (иконки с префиксомOutlineв@vkontakte/icons). - Используйте кнопки размера
l. - Режимы кнопок
primaryилиtertiary. - Не используйте вместе с другим контентом при
stretched=true. - Избегайте небольших иконок (меньше
56px). - Не размещайте интерактивные элементы нигде, кроме
action.
Подкомпонентый подход
Компонент можно использовать в подкомпонентном подходе:
Загружается...
Свойства и методы
Placeholder
| Свойство | Описание |
|---|---|
action | ReactNodeКнопка действия. По умолчанию: - |
getRootRef | Ref<HTMLDivElement>По умолчанию: - |
icon | ReactNodeИконка. По умолчанию: - |
noPadding | booleanУбирает отступы у компонента. По умолчанию: false |
stretched | booleanРастягивает плейсхолдер на весь экран, но в таком случае на экране должен быть только плейсхолдер. По умолчанию: - |
title | ReactNodeЗаголовок плейсхолдера. По умолчанию: - |
Placeholder.Container
| Свойство | Описание |
|---|---|
getRootRef | Ref<HTMLDivElement>По умолчанию: - |
noPadding | booleanУбирает отступы у компонента. По умолчанию: false |
stretched | booleanРастягивает плейсхолдер на весь экран, но в таком случае на экране должен быть только плейсхолдер. По умолчанию: - |
Placeholder.Icon
| Свойство | Описание |
|---|---|
getRootRef | Ref<HTMLDivElement>По умолчанию: - |
Placeholder.Title
| Свойство | Описание |
|---|---|
Component | ElementType<any, keyof IntrinsicElements>По умолчанию: - |
getRootRef | Ref<HTMLElement>По умолчанию: - |
Placeholder.Description
| Свойство | Описание |
|---|---|
Component | ElementType<any, keyof IntrinsicElements>По умолчанию: - |
getRootRef | Ref<HTMLElement>По умолчанию: - |
Placeholder.Actions
| Свойство | Описание |
|---|---|
getRootRef | Ref<HTMLDivElement>По умолчанию: - |