75 lines
2.7 KiB
TypeScript
75 lines
2.7 KiB
TypeScript
import { Card, Skeleton, Space } from '../../src'
|
||
import { Demo } from '../components/Demo'
|
||
import { PropsTable } from '../components/PropsTable'
|
||
import { Section } from '../components/Section'
|
||
|
||
export function Skeletons() {
|
||
return (
|
||
<Section
|
||
id="skeleton"
|
||
title="骨架屏"
|
||
api="Skeleton"
|
||
desc="内容加载前的占位。形状要和真实内容一致，否则加载完成后会跳动；整块区域用 aria-busy 标记，骨架本身对屏幕阅读器隐藏。"
|
||
>
|
||
<Demo
|
||
title="三种形状"
|
||
desc="text 是文本行（最后一行自动收短），rect 是封面/图片，circle 是头像。"
|
||
layout="column"
|
||
code={`<Skeleton variant="text" lines={3} />
|
||
<Skeleton variant="rect" height={120} />
|
||
<Skeleton variant="circle" width={48} height={48} />`}
|
||
>
|
||
<Space gap="lg" wrap>
|
||
<div style={{ width: 240 }}>
|
||
<Skeleton variant="text" lines={3} />
|
||
</div>
|
||
<Skeleton variant="rect" width={200} height={120} />
|
||
<Skeleton variant="circle" width={48} height={48} />
|
||
</Space>
|
||
</Demo>
|
||
|
||
<Demo
|
||
title="卡片骨架"
|
||
desc="按真实卡片的结构拼：头像 + 两行标题 + 封面 + 两行摘要。加载完成后把整块换成真实内容即可。"
|
||
layout="column"
|
||
code={`<Card aria-busy="true">
|
||
<Space gap="sm">
|
||
<Skeleton variant="circle" width={36} height={36} />
|
||
<div style={{ flex: 1 }}>
|
||
<Skeleton lines={2} />
|
||
</div>
|
||
</Space>
|
||
<Skeleton variant="rect" height={160} style={{ marginTop: 16 }} />
|
||
<Skeleton lines={2} style={{ marginTop: 16 }} />
|
||
</Card>`}
|
||
>
|
||
<Space direction="column" gap="md" align="stretch">
|
||
<Card padding="lg" aria-busy="true">
|
||
<Space gap="sm">
|
||
<Skeleton variant="circle" width={36} height={36} />
|
||
<div style={{ flex: 1 }}>
|
||
<Skeleton lines={2} />
|
||
</div>
|
||
</Space>
|
||
<div style={{ marginTop: 'var(--su-space-4)' }}>
|
||
<Skeleton variant="rect" height={160} />
|
||
</div>
|
||
<div style={{ marginTop: 'var(--su-space-4)' }}>
|
||
<Skeleton lines={2} />
|
||
</div>
|
||
</Card>
|
||
</Space>
|
||
</Demo>
|
||
|
||
<PropsTable
|
||
rows={[
|
||
{ name: 'variant', type: "'text' | 'rect' | 'circle'", defaultValue: "'text'", desc: '形状' },
|
||
{ name: 'lines', type: 'number', defaultValue: '1', desc: '仅 text：行数' },
|
||
{ name: 'width', type: 'number | string', desc: '宽度；rect 默认 100%，circle 默认 40' },
|
||
{ name: 'height', type: 'number | string', desc: '高度；rect 默认 120' },
|
||
]}
|
||
/>
|
||
</Section>
|
||
)
|
||
}
|