Skeleton
A skeleton is a placeholder for content that is being loaded in order to provide a pleasant user experience.
import {QSkeleton} from "@qui/react"
Examples
Variants
Use the variant property to change component appearance. When variant is set to rounded, component will have a border radius applied.
Animations
Use the animation property to set animation type or disable it.
Inferred Dimensions
In addition to accepting width and height props, the component can infer the dimensions of its child elements.
Heading XL
Heading XL
API
Input
| Name & Description | Option(s) | Default |
|---|---|---|
Animation for the skeleton. |
| 'pulse' |
The component used for the root node. It can be a React component or
element. |
| 'div' |
ReactNode | ||
The className property of the Element
interface gets and sets the value of the
class attribute
of the specified element. |
| |
| 'auto' | |
| 'status' | |
The style global attribute
contains CSS styling
declarations to be applied to the element. | CSSProperties | |
The variant for the skeleton. |
| 'rounded' |
| 'auto' |
Type
| 'pulse'| 'none'
Default
'pulse'
Description
Animation for the skeleton.
Type
| ElementType| ComponentType
Default
'div'
Description
The component used for the root node. It can be a React component or
element.
Type
string
Description
The className property of the Element
interface gets and sets the value of the
class attribute
of the specified element.
Type
string
Default
'auto'
Description
The height of the
skeleton. If a child element is supplied, this property will be ignored.
Type
CSSProperties
Description
The style global attribute
contains CSS styling
declarations to be applied to the element.
Type
| 'circular'| 'rectangular'| 'rounded'
Default
'rounded'
Description
The variant for the skeleton.