mirror of
https://github.com/zhigang1992/react.git
synced 2026-05-28 15:44:34 +08:00
dacd95987f
* 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
86 lines
2.1 KiB
Plaintext
86 lines
2.1 KiB
Plaintext
import { Layout, Playground, Attributes } from 'lib/components'
|
|
import { Loading, Grid } from 'components'
|
|
|
|
export const meta = {
|
|
title: '加载中 Loading',
|
|
group: '反馈',
|
|
}
|
|
|
|
## Loading / 加载中
|
|
|
|
表示动作正在后台运行。
|
|
|
|
<Playground
|
|
scope={{ Loading }}
|
|
code={`
|
|
<Loading />
|
|
`}
|
|
/>
|
|
|
|
<Playground
|
|
title="文本"
|
|
desc="在图标旁边定制一段文本。"
|
|
scope={{ Loading }}
|
|
code={`
|
|
<Loading>加载中</Loading>
|
|
`}
|
|
/>
|
|
|
|
<Playground
|
|
title="类型"
|
|
desc="加载指示器在不同状态下的表现。"
|
|
scope={{ Loading, Grid }}
|
|
code={`
|
|
<Grid.Container gap={2.5}>
|
|
<Grid xs={24}>
|
|
<Loading type="success" />
|
|
</Grid>
|
|
<Grid xs={24}>
|
|
<Loading type="secondary" />
|
|
</Grid>
|
|
<Grid xs={24}>
|
|
<Loading type="warning" />
|
|
</Grid>
|
|
<Grid xs={24}>
|
|
<Loading type="error" />
|
|
</Grid>
|
|
</Grid.Container>
|
|
`}
|
|
/>
|
|
|
|
<Playground
|
|
title="空间"
|
|
desc="自定义点与点之间的间隔比例。(比例是相对于当前大小 `size`)"
|
|
scope={{ Loading, Grid }}
|
|
code={`
|
|
<Grid.Container gap={2.5}>
|
|
<Grid xs={24}>
|
|
<Loading spaceRatio={2.5} />
|
|
</Grid>
|
|
<Grid xs={24}>
|
|
<Loading spaceRatio={0.5} />
|
|
</Grid>
|
|
</Grid.Container>
|
|
`}
|
|
/>
|
|
|
|
<Attributes edit="/pages/zh-cn/components/loading.mdx">
|
|
<Attributes.Title>Loading.Props</Attributes.Title>
|
|
|
|
| 属性 | 描述 | 类型 | 推荐值 | 默认 |
|
|
| -------------- | ------------------ | ---------------- | --------------------------------- | --------- |
|
|
| **type** | 指示器的类型 | `LoadingTypes` | [LoadingTypes](#loadingtypes) | `default` |
|
|
| **color** | 自定义指示器的色彩 | `string` | - | - |
|
|
| **spaceRatio** | 点之间的空间比例 | `number` | - | 1 |
|
|
| ... | 原生属性 | `HTMLAttributes` | `'id', 'title', 'className', ...` | - |
|
|
|
|
<Attributes.Title>LoadingTypes</Attributes.Title>
|
|
|
|
```ts
|
|
type LoadingTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
|
|
```
|
|
|
|
</Attributes>
|
|
|
|
export default ({ children }) => <Layout meta={meta}>{children}</Layout>
|