Skeleton

Skeleton 在内容加载完成前展示与最终布局形状相近的占位块,降低等待时的跳变感。下方预览由 pingo 引擎实时渲染,并跟随站点主题切换明暗。

用法

import { createElement } from "@dopejs/pingo";
import { Skeleton } from "@dopejs/pingo-ui";

root.render(createElement(Skeleton, { width: 320, height: 16 }));

width / height 均可省略,此时尺寸完全交给外层布局与你的样式表。

示例

组合成页面骨架

用多个不同尺寸的 Skeleton 拼出即将出现的内容结构——上方预览就是一个「头像 + 标题 + 两行正文」的卡片骨架。pingo 没有 gap 属性,块间距用固定尺寸的空容器实现,参见样式指南

Props

Prop 类型 默认值 说明
width number 占位块宽度(px),省略时由布局决定
height number 占位块高度(px),省略时由布局决定
className string 追加在组件类名之后

无障碍

Skeleton 是装饰性占位,不携带语义。加载完成后应整体替换为真实内容;长时间停留在骨架屏意味着加载失败,请给出错误提示与重试入口。

当前为静态占位(无脉冲动画)——核心动画子集暂不支持 CSS keyframes。

最后更新: