Taroify

Skeleton 骨架屏

介绍

用于在内容加载过程中展示一组占位图形。

引入

import { Skeleton } from "@taroify/core"

代码演示

基础用法

<Skeleton variant="circle" />
<WhiteSpace />
<Skeleton style={{ width: "40%" }} />
<WhiteSpace size="20px" />
<Skeleton />
<WhiteSpace />
<Skeleton />
<WhiteSpace />
<Skeleton style={{ width: "60%" }} />

动画效果

<Skeleton />
<WhiteSpace />
<Skeleton animation={false} />
<WhiteSpace />
<Skeleton animation="wave" />

API

Props

参数	说明	类型	默认值
variant	骨架屏形状，可选值为 `circle`	string	`rect`
animation	动画效果，可选值为 `wave`	string \| boolean	`pulse`

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称	默认值	描述
—skeleton-height	16px $hd*	-
—skeleton-background-color	var(—active-color)	-
—skeleton-circle-size	32px $hd*	-
—skeleton-circle-width	var(—skeleton-circle-size)	-
—skeleton-circle-height	var(—skeleton-circle-size)	-
—skeleton-circle-border-radius	var(—border-radius-max)	-
—skeleton-pulse-animation-duration	1.5s	-
—skeleton-pulse-animation-timing-function	ease-in-out	-
—skeleton-pulse-animation-delay	0.5s	-
—skeleton-wave-animation-duration	1.6s	-
—skeleton-wave-animation-timing-function	linear	-
—skeleton-wave-animation-delay	0.5s	-