Skeleton
import {Skeleton} from '@gravity-ui/uikit';
Компонент Skeleton отображает временный макет контента, пока фактические данные загружаются. Такой предварительный макет используется для снижения раздражения, вызываемого ожиданием загрузки.
Анимация
Используйте свойство animation для управления анимацией загрузки. Значение по умолчанию — 'gradient'.
| Значение | Описание |
|---|---|
'gradient' | Скользящий градиентный блеск — по умолчанию |
'pulse' | Пульсация прозрачности |
'none' | Без анимации |
Вариант
Используйте свойство variant для выбора предустановленного вида скелетона. Значение по умолчанию — 'rect'.
| Значение | Описание |
|---|---|
'rect' | border-radius с токеном, зависящим от размера — по умолчанию |
'circle' | Круглая форма (border-radius: 50%, aspect-ratio: 1) |
'square' | Квадратные пропорции (aspect-ratio: 1) с тем же border-radius, что у 'rect' |
'text' | Текстовая заглушка — высота наследуется из font-size и line-height родителя |
Размер
Используйте свойство size для задания предустановленной высоты скелетона (а также ширины для вариантов 'circle' и 'square'). Каждый размер также влияет на токен border-radius для вариантов 'rect' и 'square'. Если size не задан, используйте свойства width и height.
| Значение | Описание |
|---|---|
'xs' | Очень маленький |
's' | Маленький |
'm' | Средний |
'l' | Большой |
'xl' | Очень большой |
Текстовая заглушка
Используйте variant="text", чтобы скелетон наследовал font-size и line-height из родительского контекста. Разместите несколько скелетонов внутри <Text variant="..."> для многострочных заглушек.
Свойства
| Имя | Описание | Тип | Значение по умолчанию |
|---|---|---|---|
style | Пользовательские CSS-стили корневого элемента. | React.CSSProperties | |
className | Пользовательский CSS-класс корневого элемента. | string | |
qa | HTML-атрибут data-qa, используется для тестирования. | string | |
animation | Тип анимации, применяемый к скелетону. | 'gradient' | 'pulse' | 'none' | gradient |
variant | Предустановленный вид. 'circle' и 'square' задают aspect-ratio: 1. 'text' наследует типографику из родителя. | 'rect' | 'square' | 'circle' | 'text' | rect |
size | Предустановленная высота (и ширина для вариантов 'circle'/'square'). Также управляет токеном border-radius для вариантов 'rect'/'square'. | 'xs' | 's' | 'm' | 'l' | 'xl' | |
width | Пользовательская ширина. Алиас для style.width | number | string | |
height | Пользовательская высота. Алиас для style.height | number | string |