CardSkeleton
CardSkeleton — заглушка Card на время загрузки: те же части, тот же порядок, но вместо содержимого шиммер-плашки.
Части ничего не настраивают — размеры плашек взяты из типографики самой карточки, а геометрию (паддинги, скругление, ритм зон, полноширинное превью в шапке) CardSkeleton переиспользует у Card, поэтому скелетон совпадает с реальной карточкой того же состава.
CardSkeleton.Actions нет: действия видны только по наведению, и заглушка для них не нужна.
Для плашек произвольной формы вне карточки есть примитив Skeleton.
Анатомия
Примеры
Без обложки
Части необязательны — собирайте ровно те, что есть в реальной карточке. Скелетон карточки без обложки — только CardSkeleton.Content с заголовком и описанием.
Список
Типовой сценарий: пока список грузится, на его месте рендерится несколько скелетонов той же раскладки. Плашки скрыты от скринридеров (aria-hidden), поэтому признак загрузки — aria-busy на контейнере списка.
API
| Prop | Type | Default |
|---|---|---|
children*Части скелетона — те же зоны и в том же порядке, что у Card | ReactNode | - |
CardSkeleton.Header
Шапка: CardSkeleton.Preview во всю ширину карточки и/или CardSkeleton.Title поверх него.
| Prop | Type | Default |
|---|---|---|
children*Содержимое шапки: CardSkeleton.Preview и/или CardSkeleton.Title — ведут себя так же, как одноимённые части Card | ReactNode | - |
CardSkeleton.Content
Основная зона: заголовок, описание и превью в любом порядке.
| Prop | Type | Default |
|---|---|---|
children*Содержимое карточки: CardSkeleton.Title, CardSkeleton.Description и CardSkeleton.Preview в любом порядке | ReactNode | - |
CardSkeleton.Footer
Нижняя строка: доп. плашки и CardSkeleton.Info.
| Prop | Type | Default |
|---|---|---|
children*Содержимое футера: доп. плашки и CardSkeleton.Info в одну строку | ReactNode | - |
CardSkeleton.Title
Плашка в одну строку заголовка.
Компонент не принимает пропсов.
CardSkeleton.Description
Три плашки-строки описания, последняя короче.
Компонент не принимает пропсов.
CardSkeleton.Preview
Плашка изображения той же высоты, что и обложка Card; вид зависит от зоны, в которой лежит.
Компонент не принимает пропсов.
CardSkeleton.Info
Короткая плашка в футере — прижимается к правому краю.
Компонент не принимает пропсов.