82 lines
2.5 KiB
TypeScript
82 lines
2.5 KiB
TypeScript
import { useState } from 'react'
|
|
import { Button, Space, Spinner, Text } from '../../src'
|
|
import { Demo } from '../components/Demo'
|
|
import { PropsTable } from '../components/PropsTable'
|
|
import { Section } from '../components/Section'
|
|
|
|
export function Spinners() {
|
|
const [loading, setLoading] = useState(false)
|
|
|
|
return (
|
|
<Section
|
|
id="spinner"
|
|
title="加载中"
|
|
api="Spinner"
|
|
desc="整块区域或行内的加载指示。按钮内部的 loading 由 Button 自己处理，文字占位用 Skeleton——三者分工不同。"
|
|
>
|
|
<Demo
|
|
title="尺寸"
|
|
desc="sm 14px 用于行内（跟着文字基线走），md 20px 用于区块。"
|
|
code={`<Spinner size="sm" />
|
|
<Spinner size="md" />`}
|
|
>
|
|
<Space gap="lg">
|
|
<Spinner size="sm" />
|
|
<Spinner size="md" />
|
|
</Space>
|
|
</Demo>
|
|
|
|
<Demo
|
|
title="行内状态"
|
|
desc="和一句说明放在一起时，用 Space 排；Spinner 自带 role=status，读屏会读出 label。"
|
|
layout="column"
|
|
code={`<Space gap="sm">
|
|
<Spinner size="sm" label="正在同步" />
|
|
<Text size="sm" tone="sub">正在同步内容库…</Text>
|
|
</Space>`}
|
|
>
|
|
<Space gap="sm">
|
|
<Spinner size="sm" label="正在同步" />
|
|
<Text size="sm" tone="sub">
|
|
正在同步内容库…
|
|
</Text>
|
|
</Space>
|
|
</Demo>
|
|
|
|
<Demo
|
|
title="整块加载"
|
|
desc="区域级加载时给出一个居中的 Spinner + 文案；按钮里的 loading 不要用 Spinner 代替。"
|
|
layout="column"
|
|
code={`{loading && (
|
|
<Space direction="column" gap="sm" justify="center">
|
|
<Spinner />
|
|
<Text size="sm" tone="muted">正在读取…</Text>
|
|
</Space>
|
|
)}`}
|
|
>
|
|
<Space direction="column" gap="sm" align="center">
|
|
<Button size="sm" variant="secondary" loading={loading} onClick={() => {
|
|
setLoading(true)
|
|
window.setTimeout(() => setLoading(false), 1200)
|
|
}}>
|
|
模拟加载
|
|
</Button>
|
|
<Space gap="sm">
|
|
<Spinner />
|
|
<Text size="sm" tone="muted">
|
|
{loading ? '正在读取…' : '待命中'}
|
|
</Text>
|
|
</Space>
|
|
</Space>
|
|
</Demo>
|
|
|
|
<PropsTable
|
|
rows={[
|
|
{ name: 'size', type: "'sm' | 'md'", defaultValue: "'md'", desc: '14 / 20px' },
|
|
{ name: 'label', type: 'string', defaultValue: "'加载中'", desc: '无障碍名称' },
|
|
]}
|
|
/>
|
|
</Section>
|
|
)
|
|
}
|