mirror of
https://github.com/zhigang1992/react.git
synced 2026-05-26 15:06:25 +08:00
091751959e
* docs: export individual style types for each component * docs: improve the copywriting content of the document * docs: optimize the document site experience on mobile devices
96 lines
2.9 KiB
Plaintext
96 lines
2.9 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',
|
|
group: 'Feedback',
|
|
}
|
|
|
|
## Progress
|
|
|
|
Display progress relative to a limit or related to a task.
|
|
|
|
<Playground
|
|
scope={{ Progress }}
|
|
code={`
|
|
<Progress value={50} />
|
|
`}
|
|
/>
|
|
|
|
<Playground
|
|
title="Custom Max"
|
|
desc="Modify the maximum value of progress."
|
|
scope={{ Progress }}
|
|
code={`
|
|
<Progress value={45} max={50} />
|
|
`}
|
|
/>
|
|
|
|
<Playground
|
|
title="Dynamic Colors"
|
|
desc="You can specify the color of the progress in any range."
|
|
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 scale={0.5}>Increase</Button>
|
|
<Spacer w={.5} inline />
|
|
<Button onClick={() => setValue(20)} auto scale={0.5} type="abort">Reset</Button>
|
|
</>
|
|
)
|
|
}
|
|
`}
|
|
/>
|
|
|
|
<Playground
|
|
title="Type"
|
|
desc="We prepared some different styles in advance."
|
|
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/en-us/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 | `ProgressTypes` | [ProgressTypes](#progresstypes) | `default` |
|
|
| ... | native props | `ProgressHTMLAttributes` | `'aria-busy', ...` | - |
|
|
|
|
<Attributes.Title>ProgressTypes</Attributes.Title>
|
|
|
|
```ts
|
|
type ProgressTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
|
|
```
|
|
|
|
</Attributes>
|
|
|
|
export default ({ children }) => <Layout meta={meta}>{children}</Layout>
|