将 loading
属性设置成 false
表示内容加载完成,此时会隐藏占位图,并显示 Skeleton
的子组件。
<Skeleton title avatar row={3} loading={loading}>
<View>实际内容</View>
</Skeleton>
通过 template
属性完成自定义内容的展示。
const template = () => {
return (
<View
style={{ display: "flex", width: "100%" }}
>
<Skeleton.Image />
<View
style={{ flex: 1, marginLeft: 16 }}
>
<Skeleton.Paragraph rowWidth="60%" />
<Skeleton.Paragraph />
<Skeleton.Paragraph />
<Skeleton.Paragraph />
<Skeleton.Paragraph />
<Skeleton.Paragraph />
</View>
</View>
)
}
<Skeleton template={template}/>
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
row | 段落占位图行数 | number | string | 0 |
rowWidth | 段落占位图宽度,可传数组来设置每一行的宽度 | number | string | (number | string)[] | 100% |
title | 是否显示标题占位图 | boolean | false |
avatar | 是否显示头像占位图 | boolean | false |
loading | 是否显示骨架屏,传 false 时 会展示子组件内容 | boolean | true |
animate | 是否开启动画 | boolean | true |
round | 是否将标题和段落显示为圆角风格 | boolean | false |
titleWidth | 标题占位图宽度 | number | string | 40% |
avatarSize | 头像占位图大小 | number | string | 32px |
avatarShape | 头像占位图形状,可选值为 square | square | round | round |
template | 骨架屏自定义 | ReactNode | - |
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
avatarSize | 头像占位图大小 | number | string | 32px |
avatarShape | 头像占位图形状,可选值为 square | square | round | round |
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
imageSize | 图片占位图大小 | number | string | 32px |
imageShape | 图片占位图形状,可选值为 square | square | round | round |
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件。
名称 | 默认值 | 描述 |
---|---|---|
—skeleton-avatar-size | 32px * $hd | - |
—skeleton-avatar-background | var(—active-color) | - |
—skeleton-duration | 1.2s | - |
—skeleton-paragraph-height | 16px * $hd | - |
—skeleton-paragraph-background | var(—active-color) | - |
—skeleton-title-width | 40% | - |
—skeleton-paragraph-margin-top | var(—padding-xs) | - |
—skeleton-image-size | 96px * $hd | - |
—skeleton-image-radius | 24px * $hd | - |