骨架占位
Skeleton
在内容加载时预示将出现的结构。
加载中
app.mjs
import { mount } from '@sofish/ui/browser';
const view = mount(
document.querySelector('#example'),
'skeleton'
);
// view.update({ ...nextProps });
// view.destroy();什么时候用
布局已知，数据仍在等待。
什么时候不用
没有数据或加载失败时，应改为空状态或错误说明。
COMPONENT API
属性与事件
传入业务数据，通过事件连接你的应用。
| 属性 | 默认值 |
|---|---|
label | "加载中" |
lines | 2 |
事件
展示组件；通过 update(props) 更新内容。
INTERACTION NOTES
交互与可访问性
- 占位装饰不逐个读出。
- 加载区域有合适状态文字，并尊重减少动态效果偏好。
和相似组件的区别
Skeleton 表示内容尚未到达；Empty 表示当前没有内容。
RESEARCH & ALTERNATIVES
官方实现映射
以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。
关键状态
React / Next.js、Vue / Nuxt · 来源核验