CardSkeleton

CardSkeleton — заглушка Card на время загрузки: те же части, тот же порядок, но вместо содержимого шиммер-плашки.

Части ничего не настраивают — размеры плашек взяты из типографики самой карточки, а геометрию (паддинги, скругление, ритм зон, полноширинное превью в шапке) CardSkeleton переиспользует у Card, поэтому скелетон совпадает с реальной карточкой того же состава.

CardSkeleton.Actions нет: действия видны только по наведению, и заглушка для них не нужна.

Для плашек произвольной формы вне карточки есть примитив Skeleton.

Анатомия

CardSkeleton.Root
Header
Preview
Title
Content
Title
Description
Preview
Footer
Info

Примеры

Без обложки

Части необязательны — собирайте ровно те, что есть в реальной карточке. Скелетон карточки без обложки — только CardSkeleton.Content с заголовком и описанием.

Список

Типовой сценарий: пока список грузится, на его месте рендерится несколько скелетонов той же раскладки. Плашки скрыты от скринридеров (aria-hidden), поэтому признак загрузки — aria-busy на контейнере списка.

API

PropTypeDefault
children*

Части скелетона — те же зоны и в том же порядке, что у Card

ReactNode-

CardSkeleton.Header

Шапка: CardSkeleton.Preview во всю ширину карточки и/или CardSkeleton.Title поверх него.

PropTypeDefault
children*

Содержимое шапки: CardSkeleton.Preview и/или CardSkeleton.Title — ведут себя так же, как одноимённые части Card

ReactNode-

CardSkeleton.Content

Основная зона: заголовок, описание и превью в любом порядке.

PropTypeDefault
children*

Содержимое карточки: CardSkeleton.Title, CardSkeleton.Description и CardSkeleton.Preview в любом порядке

ReactNode-

CardSkeleton.Footer

Нижняя строка: доп. плашки и CardSkeleton.Info.

PropTypeDefault

CardSkeleton.Title

Плашка в одну строку заголовка.

Компонент не принимает пропсов.

CardSkeleton.Description

Три плашки-строки описания, последняя короче.

Компонент не принимает пропсов.

CardSkeleton.Preview

Плашка изображения той же высоты, что и обложка Card; вид зависит от зоны, в которой лежит.

Компонент не принимает пропсов.

CardSkeleton.Info

Короткая плашка в футере — прижимается к правому краю.

Компонент не принимает пропсов.