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

export const meta = {
  title: '间距 Spacer',
  group: '布局',
}

## Spacer / 间距

为排版提供标准化的空间。

<Playground
  title="垂直的"
  scope={{ Spacer, Grid }}
  code={`
<Grid.Container>
  <Grid xs={24} style={{ background: '#444', borderRadius: '15px' }}>
    <Spacer h={2}/>
  </Grid>
  <Spacer h={2}/>
  <Grid xs={24} style={{ background: '#666', borderRadius: '15px' }}>
    <Spacer h={3}/>
  </Grid>
  <Spacer h={3}/>
  <Grid xs={24} style={{ background: '#999', borderRadius: '15px' }}>
    <Spacer h={4}/>
  </Grid>
</Grid.Container>
`}
/>

<Playground
  title="水平的"
  scope={{ Spacer, Grid }}
  code={`
<Grid.Container>
  <Grid xs={4} style={{ background: '#444', borderRadius: '15px' }} />
  <Spacer w={5}/>
  <Grid xs={4} style={{ background: '#444', borderRadius: '15px' }} />
</Grid.Container>
`}
/>

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

| 属性       | 描述                    | 类型               | 推荐值                   | 默认    |
| ---------- | ----------------------- | ------------------ | ------------------------ | ------- |
| **x**      | X 轴间距                | `number` / `float` | -                        | 1       |
| **y**      | Y 轴间距                | `number` / `float` | -                        | 1       |
| **inline** | 行内模式 (不会产生换行) | `boolean`          | -                        | `false` |
| ...        | 原生属性                | `HTMLAttributes`   | `'id', 'className', ...` | -       |

</Attributes>

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