Skeleton 骨架屏
引入
import { Skeleton } from "@taroify/core"
import Skeleton from "@taroify/core/swiper"
代码演示
基础用法
<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 |
- |
Taroify
