Placeholder

Placeholder before component loaded.

Import

Main Individual

import { Placeholder } from 'rsuite';

<Placeholder.Paragraph> Paragraph placeholder
<Placeholder.Graph> Graph placeholder
<Placeholder.Grid> Grid placeholder

Examples

Paragraph

Paragraph with Image

Paragraph with Circle

Paragraph with Square

Grid or Table

Graph

Square Graph

Props

`<Placeholder.Paragraph>`

Property	Type `(Default)`	Description
as	ElementType `('div')`	You can use a custom element type.
className	string	The class name of the component.
classPrefix	string `('placeholder')`	The prefix of the component CSS class.
rows	number `(2)`	The number of rows.
rowHeight	number `(10)`	The height of the row.
rowSpacing	number `(20)`	The spacing between rows.
graph	boolean \| 'circle' \| 'square' \| 'image'	The shape of the graph.
active	boolean	Whether the placeholder is active.

`<Placeholder.Grid>`

Property	Type `(Default)`	Description
as	ElementType	You can use a custom element type.
className	string	The class name of the component.
classPrefix	string `('placeholder')`	The prefix of the component CSS class.
rows	number `(5)`	The number of rows.
columns	number `(5)`	The number of columns.
rowHeight	number `(10)`	The height of the row.
rowSpacing	number `(20)`	The spacing between rows.
active	boolean	Whether the placeholder is active.

`<Placeholder.Graph>`

Property	Type `(Default)`	Description
as	ElementType	You can use a custom element type.
className	string	The class name of the component.
classPrefix	string `('placeholder')`	The prefix of the component CSS class.
width	number \| string `(100%)`	The graph width.
height	number `(200)`	The graph height.
active	boolean	Whether the placeholder is active.