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>
