Placeholder
Placeholder before component loaded.
<Placeholder.Paragraph>
Paragraph placeholder<Placeholder.Graph>
Graph placeholder<Placeholder.Grid>
Grid placeholder
Import
import { Placeholder } from 'rsuite';
// or
import Placeholder from 'rsuite/Placeholder';
Examples
Paragraph
Default:
You can also add a round or square icon to the left:
You can also customize the number of lines, spacing, etc.:
Grid
Graph
Props
<Placeholder.Paragraph>
Property | Type (Default) |
Description |
---|---|---|
rows | number (2) |
number of rows |
rowHeight | number (10) |
height of rows |
rowMargin | number (20) |
margin of rows |
graph | boolean { 'circle' | 'square' | 'image' | show graph |
active | boolean | play animation |
<Placeholder.Grid>
Property | Type (Default) |
Description |
---|---|---|
rows | number (5) |
number of rows |
columns | number (5) |
number of columns |
rowHeight | number (10) |
height of rows |
rowMargin | number (20) |
margin of rows |
active | boolean | play animation |
<Placeholder.Graph>
Property | Type (Default) |
Description |
---|---|---|
width | number | string (100%) |
graph width |
height | number (200) |
graph height |
active | boolean | play animation |