58 lines
2.1 KiB
TypeScript
58 lines
2.1 KiB
TypeScript
import { Progress, Space, Text } from '../../src'
|
||
import { Demo } from '../components/Demo'
|
||
import { PropsTable } from '../components/PropsTable'
|
||
import { Section } from '../components/Section'
|
||
|
||
export function Progresses() {
|
||
return (
|
||
<Section
|
||
id="progress"
|
||
title="进度"
|
||
api="Progress"
|
||
desc="纯展示的进度条：任务进度、存储占用、导入比例。百分比由调用方给，组件只负责夹在 0–100 之间。"
|
||
>
|
||
<Demo
|
||
title="颜色与尺寸"
|
||
desc="tone 表达语义：主色（进行中）、成功（完成）、警示、危险（超限）。sm 4px 用于行内，md 8px 用于卡片。"
|
||
layout="column"
|
||
code={`<Progress percent={32} />
|
||
<Progress percent={64} tone="success" />
|
||
<Progress percent={88} tone="warning" size="sm" />`}
|
||
>
|
||
<Progress percent={32} />
|
||
<Progress percent={64} tone="success" />
|
||
<Progress percent={88} tone="warning" size="sm" />
|
||
<Progress percent={100} tone="danger" />
|
||
</Demo>
|
||
|
||
<Demo
|
||
title="带百分比文案"
|
||
desc="showLabel 在右侧补百分比；行内场景可以和说明文字用 Space 排成一行。"
|
||
layout="column"
|
||
code={`<Progress percent={72} showLabel />
|
||
<Space gap="sm" style={{ width: '100%' }}>
|
||
<Text size="sm" tone="sub">存储占用</Text>
|
||
<Progress percent={45} size="sm" />
|
||
</Space>`}
|
||
>
|
||
<Progress percent={72} showLabel />
|
||
<Space gap="sm">
|
||
<Text size="sm" tone="sub">
|
||
存储占用
|
||
</Text>
|
||
<Progress percent={45} size="sm" />
|
||
</Space>
|
||
</Demo>
|
||
|
||
<PropsTable
|
||
rows={[
|
||
{ name: 'percent', type: 'number', required: true, desc: '0–100，超出会被夹住' },
|
||
{ name: 'size', type: "'sm' | 'md'", defaultValue: "'md'", desc: '4 / 8px' },
|
||
{ name: 'tone', type: "'primary' | 'success' | 'warning' | 'danger'", defaultValue: "'primary'", desc: '语义配色' },
|
||
{ name: 'showLabel', type: 'boolean', defaultValue: 'false', desc: '右侧显示百分比' },
|
||
]}
|
||
/>
|
||
</Section>
|
||
)
|
||
}
|