• Vant React

Skeleton 骨架屏

介绍

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

引入

import { Skeleton } from "@taroify/core"

代码演示

基础用法

通过 title 属性显示标题占位图,通过 row 属性配置占位段落行数。

<Skeleton title row={3} />

显示头像

通过 avatar 属性显示头像占位图。

<Skeleton title avatar row={3} />

展示子组件

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}/>

API

Props

参数说明类型默认值
row段落占位图行数number | string0
rowWidth段落占位图宽度,可传数组来设置每一行的宽度number | string | (number | string)[]100%
title是否显示标题占位图booleanfalse
avatar是否显示头像占位图booleanfalse
loading是否显示骨架屏,传 false 时会展示子组件内容booleantrue
animate是否开启动画booleantrue
round是否将标题和段落显示为圆角风格booleanfalse
titleWidth标题占位图宽度number | string40%
avatarSize头像占位图大小number | string32px
avatarShape头像占位图形状,可选值为 squaresquare | roundround
template骨架屏自定义ReactNode-

Skeleton.Paragraph Props

参数说明类型默认值
round是否将段落显示为圆角风格booleanfalse
rowWidth段落占位图宽度number | string100%

Skeleton.Title Props

参数说明类型默认值
round是否将段落显示为圆角风格booleanfalse
titleWidth标题占位图宽度number | string100%

Skeleton.Avatar Props

参数说明类型默认值
avatarSize头像占位图大小number | string32px
avatarShape头像占位图形状,可选值为 squaresquare | roundround

Skeleton.Image Props

参数说明类型默认值
imageSize图片占位图大小number | string32px
imageShape图片占位图形状,可选值为 squaresquare | roundround

主题定制

样式变量

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

名称默认值描述
—skeleton-avatar-size32px * $hd-
—skeleton-avatar-backgroundvar(—active-color)-
—skeleton-duration1.2s-
—skeleton-paragraph-height16px * $hd-
—skeleton-paragraph-backgroundvar(—active-color)-
—skeleton-title-width40%-
—skeleton-paragraph-margin-topvar(—padding-xs)-
—skeleton-image-size96px * $hd-
—skeleton-image-radius24px * $hd-