Skip to content

skeleton

Use gray to place the data being loaded.

Basic usage

The skeleton screen component provides two components: <tu-skeleton-line> and <tu-skeleton-shape>, users can combine them according to their needs.

Shape Skeleton

The graphic skeleton screen is divided into two shapes: square, circle, and provides three sizes of small, medium, and large.

Animation

By setting the animation property, the skeleton screen can display the animation effect.

Skeleton API

skeleton Props

NameDescriptionTypeDefault
loadingWhether to display the skeleton screen (loading state)Booleantrue
animationWhether to enable skeleton screen animationBooleanfalse

skeleton-line Props

NameDescriptionTypeDefault
rowsNumber of rows displayedNumber1
widthsThe width of the line skeletonArray[]
line-heightLine height of the line skeletonNumber20
line-spacingLine spacing of line skeletonNumber15

skeleton-shape Props

NameDescriptionTypeDefault
shapeThe shape of the shape skeletonStringsquare
sizeThe size of the shape skeletonStringmedium