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> По умолчанию: - |