import { Layout, Playground, Attributes } from 'lib/components'
import { Loading, Spacer, Row } from 'components'

export const meta = {
  title: '加载中 Loading',
  group: '反馈',
}

## Loading / 加载中

表示动作正在后台运行。

<Playground
  scope={{ Loading, Row, Spacer }}
  code={`
<Row style={{ padding: '10px 0'}}>
  <Loading />
</Row>
`}
/>

<Playground
  title="文本"
  desc="在图标旁边定制一段文本。"
  scope={{ Loading, Row }}
  code={`
<Row style={{ padding: '10px 0'}}>
  <Loading>加载中</Loading>
</Row>
`}
/>

<Playground
  title="大小"
  desc="不同大小的组件。"
  scope={{ Loading, Row, Spacer }}
  code={`
<>
  <Row style={{ padding: '10px 0', width: '50px' }}>
    <Loading size="mini" />
  </Row>
  <Spacer y={.5} />
  <Row style={{ padding: '10px 0', width: '50px' }}>
    <Loading size="small" />
  </Row>
  <Spacer y={.5} />
  <Row style={{ padding: '10px 0', width: '50px' }}>
    <Loading size="medium" />
  </Row>
  <Spacer y={.5} />
  <Row style={{ padding: '10px 0', width: '50px' }}>
    <Loading size="large" />
  </Row>
</>
`}
/>

<Playground
  title="类型"
  desc="加载指示器在不同状态下的表现。"
  scope={{ Loading, Row, Spacer }}
  code={`
<>
  <Row style={{ padding: '10px 0', width: '50px' }}>
    <Loading type="success" />
  </Row>
  <Spacer y={.5} />
  <Row style={{ padding: '10px 0', width: '50px' }}>
    <Loading type="secondary" />
  </Row>
  <Spacer y={.5} />
  <Row style={{ padding: '10px 0', width: '50px' }}>
    <Loading type="warning" />
  </Row>
  <Spacer y={.5} />
  <Row style={{ padding: '10px 0', width: '50px' }}>
    <Loading type="error" />
  </Row>
</>
`}
/>

<Attributes edit="/pages/zh-cn/components/loading.mdx">
<Attributes.Title>Loading.Props</Attributes.Title>

| 属性       | 描述               | 类型             | 推荐值                                                  | 默认      |
| ---------- | ------------------ | ---------------- | ------------------------------------------------------- | --------- |
| **type**   | 指示器的类型       | `NormalTypes`    | `'default', 'secondary', 'success', 'warning', 'error'` | `default` |
| **size**   | 指示器的大小       | `NormalSizes`    | `'mini', 'small', 'medium', 'large'`                    | `medium`  |
| **color**  | 自定义指示器的色彩 | `string`         | -                                                       | -         |
| **width**  | 定制 CSS 宽度      | `string`         | -                                                       | `100%`    |
| **height** | 定制 CSS 高度      | `string`         | -                                                       | `100%`    |
| ...        | 原生属性           | `HTMLAttributes` | `'id', 'title', 'className', ...`                       | -         |

</Attributes>

export default ({ children }) => <Layout meta={meta}>{children}</Layout>
