mirror of
https://github.com/zhigang1992/react.git
synced 2026-02-07 22:41:59 +08:00
83 lines
2.2 KiB
Plaintext
83 lines
2.2 KiB
Plaintext
import { Layout, Playground, Attributes } from 'lib/components'
|
|
import { Progress, Spacer, useTheme, Button } from 'components'
|
|
import { useState } from 'react'
|
|
|
|
export const meta = {
|
|
title: 'Progress',
|
|
description: 'Progress',
|
|
}
|
|
|
|
## Progress
|
|
|
|
Display progress relative to a limit or related to a task.
|
|
|
|
<Playground
|
|
scope={{ Progress }}
|
|
code={`
|
|
<Progress value={50} />
|
|
`} />
|
|
|
|
<Playground
|
|
title="Custom Max"
|
|
scope={{ Progress }}
|
|
code={`
|
|
<Progress value={45} max={50} />
|
|
`} />
|
|
|
|
<Playground
|
|
title="Dynamic Colors"
|
|
scope={{ Progress, useState, useTheme, Button, Spacer }}
|
|
code={`
|
|
() => {
|
|
const theme = useTheme()
|
|
const [value, setValue] = useState(20)
|
|
const colors = {
|
|
20: theme.palette.error,
|
|
40: theme.palette.warning,
|
|
60: theme.palette.success,
|
|
80: '#000',
|
|
}
|
|
return (
|
|
<>
|
|
<Progress value={value} colors={colors} />
|
|
<Spacer />
|
|
<Button onClick={() => setValue(value + 20)} auto size="small">Increase</Button>
|
|
<Spacer x={.5} inline />
|
|
<Button onClick={() => setValue(20)} auto size="small" type="abort">Reset</Button>
|
|
</>
|
|
)
|
|
}
|
|
`} />
|
|
|
|
<Playground
|
|
title="Type"
|
|
scope={{ Progress, Spacer }}
|
|
code={`
|
|
<>
|
|
<Progress type="secondary" value={10} />
|
|
<Spacer />
|
|
<Progress type="success" value={45} />
|
|
<Spacer />
|
|
<Progress type="warning" value={100} />
|
|
<Spacer />
|
|
<Progress type="error" value={21} />
|
|
</>
|
|
`} />
|
|
|
|
<Attributes edit="/pages/docs/components/progress.mdx">
|
|
<Attributes.Title>Progress.Props</Attributes.Title>
|
|
|
|
| Attribute | Description | Type | Accepted values | Default
|
|
| ---------- | ---------- | ---- | -------------- | ------ |
|
|
| **value** | current value | `number` | - | 0 |
|
|
| **max** | max value | `number` | - | 100 |
|
|
| **fixedTop** | fix progress to top | `boolean` | - | `false` |
|
|
| **fixedBottom** | fix progress to bottom | `boolean` | - | `false` |
|
|
| **colors** | custom colors | `{ [key: number]: string }` | - | - |
|
|
| **type** | predefined state types | `NormalTypes` | `'default', 'secondary', 'success', 'warning', 'error'` | `default` |
|
|
| ... | native props | `ProgressHTMLAttributes` | `'aria-busy', 'className', ...` | - |
|
|
|
|
</Attributes>
|
|
|
|
export default ({ children }) => <Layout meta={meta}>{children}</Layout>
|