UNPKG

@gravity-ui/uikit

Version:

Gravity UI base styling and components

github.com/gravity-ui/uikit

gravity-ui/uikit

75 lines (56 loc) • 4.5 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
# Skeleton The Skeleton component displays a placeholder preview of your content before the data gets loaded. This preview is shown in order to reduce the loading time frustration. ```tsx import {Skeleton} from '@gravity-ui/uikit'; ``` ## Animation Use the `animation` prop to control the loading animation. The default is `'gradient'`. | Value | Description | | :----------- | :------------------------------------- | | `'gradient'` | Sliding gradient shimmer — **default** | | `'pulse'` | Opacity pulse | | `'none'` | No animation | ## Variant Use the `variant` prop to choose a preset appearance. The default is `'rect'`. | Value | Description | | :--------- | :---------------------------------------------------------------------------------------- | | `'rect'` | Rounded corners using a size-aware border-radius token — **default** | | `'circle'` | Fully circular (`border-radius: 50%`, `aspect-ratio: 1`) | | `'square'` | Square aspect ratio (`aspect-ratio: 1`) with the same rounding as `'rect'` | | `'text'` | Text line placeholder — height inherits `font-size` and `line-height` from parent context | ## Size Use the `size` prop to set a preset skeleton height (and width for `'circle'` / `'square'` variants). Each size also adjusts the border-radius token used by `'rect'` and `'square'` variants. When `size` is omitted, set dimensions with `width` and `height` instead. | Value | Description | | :----- | :---------- | | `'xs'` | Extra small | | `'s'` | Small | | `'m'` | Medium | | `'l'` | Large | | `'xl'` | Extra large | ```tsx <Skeleton size="xs" width={120} /> <Skeleton size="m" width={200} /> <Skeleton size="xl" width={280} /> <Skeleton variant="circle" size="l" /> <Skeleton variant="square" size="l" /> ``` ## Text placeholder Use `variant="text"` to render a skeleton that inherits `font-size` and `line-height` from the parent context. Place multiple skeletons inside a `<Text variant="...">` element for multiline placeholders. ```tsx <Text variant="body-1"> <Skeleton variant="text" width={400} /> <Skeleton variant="text" width={400} /> <Skeleton variant="text" width={240} /> </Text> ``` ## Properties | Name | Description | Type | Default | | :---------- | :--------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------: | :--------: | | `style` | Custom CSS properties for the root element | `React.CSSProperties` | | | `className` | Custom CSS class for the root element | `string` | | | `qa` | `data-qa` HTML attribute, used for testing | `string` | | | `animation` | Animation type to apply to the skeleton | `'gradient'` \| `'pulse'` \| `'none'` | `gradient` | | `variant` | Preset appearance. `'circle'` and `'square'` enforce `aspect-ratio: 1`. `'text'` inherits typography from parent context. | `'rect'` \| `'square'` \| `'circle'` \| `'text'` | `rect` | | `size` | Preset height (and width for `'circle'`/`'square'` variants). Also controls the border-radius token for `'rect'`/`'square'`. | `'xs'` \| `'s'` \| `'m'` \| `'l'` \| `'xl'` | | | `width` | Custom width. Alias for `style.width` | `number` \| `string` | | | `height` | Custom height. Alias for `style.height` | `number` \| `string` | |