import { Layout, Playground, ExampleBlock, Attributes } from 'lib/components'
import { Row, Col } from 'components'

export const meta = {
  title: '布局 Layout',
  group: '布局',
}

## Layout / 布局

以简易的方式构建页面布局。

<Playground
  desc="`Row` 组件可以创建一个行容器。"
  scope={{ Row, Col, ExampleBlock }}
  code={`
<>
  <Row style={{ marginBottom: '10px' }}> <ExampleBlock /> </Row>
  <Row> <ExampleBlock /> </Row>
</>
`}
/>

<Playground
  title="列"
  desc="`Col` 组件可以创建不同宽度的列容器。"
  scope={{ Row, Col, ExampleBlock }}
  code={`
<>
  <Row style={{ marginBottom: '15px' }}>
    <Col><ExampleBlock plain={2} /></Col>
    <Col><ExampleBlock plain={4} /></Col>
  </Row>
  <Row>
    <Col span={8}><ExampleBlock plain={2} /></Col>
    <Col><ExampleBlock plain={4} /></Col>
  </Row>
</>
`}
/>

<Playground
  title="间距"
  desc="在 `Row` 组件上指定子元素 (列) 的间距"
  scope={{ Row, Col, ExampleBlock }}
  code={`
<>
  <Row gap={.8} style={{ marginBottom: '15px' }}>
    <Col><ExampleBlock /></Col>
    <Col><ExampleBlock /></Col>
    <Col><ExampleBlock /></Col>
  </Row>
  <Row gap={.8}>
    <Col><ExampleBlock /></Col>
    <Col><ExampleBlock /></Col>
    <Col><ExampleBlock /></Col>
  </Row>
</>
`}
/>

<Playground
  title="组合"
  desc="组合基本的 1/24 列完成布局。"
  scope={{ Row, Col, ExampleBlock }}
  code={`
<>
  <Row gap={.8} style={{ marginBottom: '15px' }}>
    <Col span={16}><ExampleBlock /></Col>
    <Col span={8}><ExampleBlock /></Col>
  </Row>
  <Row gap={0.8} style={{ marginBottom: '15px' }}>
    <Col span={8}>
      <ExampleBlock />
    </Col>
    <Col span={8}>
      <ExampleBlock />
    </Col>
    <Col span={4}>
      <ExampleBlock />
    </Col>
    <Col span={4}>
      <ExampleBlock />
    </Col>
  </Row>
  <Row gap={.8}>
    <Col span={4}><ExampleBlock /></Col>
    <Col span={16}><ExampleBlock /></Col>
    <Col span={4}><ExampleBlock /></Col>
  </Row>
</>
`}
/>

<Playground
  title="对齐"
  desc="使用 `justify` 与 `align` 属性以不同方式对齐列。"
  scope={{ Row, Col, ExampleBlock }}
  code={`
<>
  <Row gap={.8} style={{ marginBottom: '15px' }}>
    <Col span={16}><ExampleBlock /></Col>
  </Row>
  <Row gap={0.8} justify="center" style={{ marginBottom: '15px' }}>
    <Col span={16}>
      <ExampleBlock />
    </Col>
  </Row>
  <Row gap={0.8} justify="end" style={{ marginBottom: '15px' }}>
    <Col span={16}>
      <ExampleBlock />
    </Col>
  </Row>
  <Row gap={.8} style={{ marginBottom: '15px' }}>
    <Col span={9}><ExampleBlock style={{ height: '60px' }}/></Col>
    <Col span={5}>
      <Row align="top" style={{ height: '100%' }}>
        <Col><ExampleBlock /></Col>
      </Row>
    </Col>
    <Col span={5}>
      <Row align="middle" style={{ height: '100%' }}>
        <Col><ExampleBlock /></Col>
      </Row>
    </Col>
    <Col span={5}>
      <Row align="bottom" style={{ height: '100%' }}>
        <Col><ExampleBlock /></Col>
      </Row>
    </Col>
  </Row>
</>
`}
/>

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

| 属性          | 描述           | 类型                          | 推荐值                                                      | 默认    |
| ------------- | -------------- | ----------------------------- | ----------------------------------------------------------- | ------- |
| **gap**       | 子元素列的间距 | `number`                      | -                                                           | 0       |
| **justify**   | 水平对齐方式   | `Justify`                     | `'start', 'end', 'center', 'space-around', 'space-between'` | `start` |
| **align**     | 垂直对齐方式   | `Align`                       | `'top', 'middle', 'bottom'`                                 | `top`   |
| **component** | 生成的组件类型 | `keyof JSX.IntrinsicElements` | -                                                           | `div`   |
| ...           | 原生属性       | `HTMLAttributes`              | `'autoFocus', 'name', 'className', ...`                     | -       |

<Attributes.Title>Col.Props</Attributes.Title>

| 属性          | 描述               | 类型                          | 推荐值                     | 默认  |
| ------------- | ------------------ | ----------------------------- | -------------------------- | ----- |
| **span**      | 每列占据的网格大小 | `number`                      | 0 - 24                     | 24    |
| **offset**    | 当前列的偏移位置   | `number`                      | -                          | 0     |
| **component** | 生成的组件类型     | `keyof JSX.IntrinsicElements` | -                          | `div` |
| ...           | 原生属性           | `HTMLAttributes`              | `'name', 'className', ...` | -     |

</Attributes>

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