Skeleton
Skeletons are visual placeholders for information while data is still loading.
import { ... } from '@ag.ds-next/react/skeleton';Usage
Skeleton components can be imported via the skeleton entrypoint in the @ag.ds-next/react package.
For example:
import { ... } from '@ag.ds-next/react/skeleton';Props
| Prop | Type | Description |
|---|---|---|
| type | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | The type/level of heading is used to control the height of the element. |
| width? | ResponsiveProp<string | number>Default: "100%" | The width of the element. |
| Prop | Type | Description |
|---|---|---|
| fontSize? | ResponsiveProp<FontSize>Default: "sm" | The font size of the element. |
| lineHeight? | "heading" | "nospace" | "default"Default: "default" | The line height of the element. |
| width? | ResponsiveProp<string | number>Default: "100%" | The width of the element. |
| Prop | Type | Description |
|---|---|---|
| fontSize? | ResponsiveProp<FontSize>Default: "sm" | The font size of the element. |
| height? | ResponsiveProp<string | number>Default: "auto" | The height of the element. |
| lineHeight? | "heading" | "nospace" | "default"Default: "default" | The line height of the element. |
| width? | ResponsiveProp<string | number>Default: "100%" | The width of the element. |
Source
You can view the full source code for this package on Github.