Search
Skeleton

Simple rectangular container

Skeleton

When to use

A card can be used to display content related to a single subject. The content can consist of multiple elements of varying types and sizes.


Basic

Simplest Skeleton usage.

Complex combination

Complex combination with avatar and multiple paragraphs.

Active Animation

Display active animation.

Contains sub component

Skeleton contains sub component.

PCB Design, a design language

We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.

List

Use skeleton in list component.

API

Skeleton
PropertyDescriptionTypeDefault
active
Show animation effect
boolean
false
avatar
Show avatar placeholder
boolean | SkeletonAvatarProps
false
loading
Display the skeleton when true
boolean
-
paragraph
Show paragraph placeholder
boolean | SkeletonParagraphProps
true
title
Show title placeholder
boolean | SkeletonTitleProps
true
round
Show paragraph and title radius when true
boolean
false
SkeletonAvatarProps
PropertyDescriptionTypeDefault
active
Show animation effect, only valid when used avatar independently.
boolean
false
size
Set the size of avatar
number | large | small | default
-
shape
Set the shape of avatar
circle | square
-
SkeletonTitleProps
PropertyDescriptionTypeDefault
width
Set the width of title
number | string
-
SkeletonParagraphProps
PropertyDescriptionTypeDefault
rows
Set the row count of paragraph
number
-
width
Set the width of paragraph. When width is an Array, it can set the width of each row. Otherwise only set the last row width
number | string | Array
-
SkeletonButtonProps
PropertyDescriptionTypeDefault
active
Show animation effect
boolean
false
size
Set the size of button
large | small | default
-
shape
Set the shape of button
circle | round | default
-
SkeletonInputProps
PropertyDescriptionTypeDefault
active
Show animation effect
boolean
false
size
Set the size of input
large | small | default
-