Skeleton
Компонент Skeleton используется как заполнитель (placeholder) во время загрузки контента. Отображает статичный или анимированный блок, который имитирует форму загружаемых данных.
Обзор
- Основное назначение: индикация загрузки контента (текста, изображений, карточек).
- Ключевые возможности:
- Анимированный режим с эффектом волны (
animate). - Статичный режим без анимации.
- Настройка размеров и формы через CSS-классы.
- Проброс всех атрибутов.
- Анимированный режим с эффектом волны (
API компонента
Props
| Проп | Тип | По умолчанию | Описание |
|---|---|---|---|
animate | Boolean | true | Включает анимацию волны. Если false, скелетон статичен. |
className | String | Дополнительные CSS-классы для настройки размеров, формы и фона. |
Стилизация
Компонент предоставляет только базовые классы (skeleton, relative, overflow-hidden). Для указания размеров, формы и цвета фона используйте className.
Рекомендуемые классы
- Размеры:
h-4,w-full,w-48,h-32и т.д. - Форма:
rounded,rounded-full,rounded-lg. - Фон:
bg-gray-200,dark:bg-dark-500.