ElyriSkeleton
骨架屏：内容加载前的占位，文本 / 矩形 / 圆形三种形状，流光与呼吸两种动画，自动适配深浅色主题。
安装
添加组件
pnpm dlx @elyri/cli@latest add skeleton示例
基础用法
默认 text 形状，lines 控制行数，末行自动收短。
import { Skeleton } from './components/elyri/Skeleton';
export function Example() {
return <Skeleton lines={3} />;
}形状
三种形状：text / rect / circle，circle 只需传一个尺寸。
import { Skeleton } from './components/elyri/Skeleton';
export function Example() {
return (
<div className="demo-ui-row">
<Skeleton shape="circle" width={48} />
<Skeleton shape="rect" width={120} height={72} />
<Skeleton width={160} />
</div>
);
}组合
按真实布局拼装，加载完成后用 loading={false} 切回内容。
import { Skeleton } from './components/elyri/Skeleton';
export function Example() {
return (
<div aria-busy="true" style={{ display: 'flex', flexDirection: 'column', gap: 16, maxWidth: 360 }}>
<Skeleton shape="rect" height={160} />
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
<Skeleton shape="circle" width={40} />
<div style={{ display: 'flex', flex: 1, flexDirection: 'column', gap: 8 }}>
<Skeleton width="45%" height={14} />
<Skeleton width="30%" height={10} />
</div>
</div>
<Skeleton lines={3} height={10} />
</div>
);
}动画
三种动画：shimmer / pulse / none；系统开启减少动态时自动降级为缓慢呼吸。
import { Skeleton } from './components/elyri/Skeleton';
export function Example() {
return (
<div className="demo-ui-stack">
<Skeleton animation="shimmer" height={12} />
<Skeleton animation="pulse" height={12} />
<Skeleton animation="none" height={12} />
</div>
);
}包裹子元素
传入 children 时尺寸跟随子元素，子元素本身不可见。
import { Avatar } from './components/elyri/Avatar';
import { Skeleton } from './components/elyri/Skeleton';
export function Example({ loading }: { loading: boolean }) {
return (
<Skeleton shape="circle" loading={loading}>
<Avatar name="Ada Lovelace" size="lg" />
</Skeleton>
);
}属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
shape | 'text' | 'rect' | 'circle' | 'text' | 形状：text / rect / circle |
width | number | string | — | 宽度，数字按 px 处理 |
height | number | string | — | 高度，数字按 px 处理 |
lines | number | 1 | 文本行数，仅 text 生效 |
animation | 'shimmer' | 'pulse' | 'none' | 'shimmer' | 动画：shimmer / pulse / none |
loading | boolean | true | 为 false 时直接渲染 children |
children | ReactNode | — | 加载完成后的内容；加载中用于撑开尺寸 |
...rest | HTMLAttributes | — | 其余属性透传给原生 div；骨架自带 aria-hidden，建议在外层容器设置 aria-busy |