Grid

网格组件，Amaze UI Touch 默认提供了 6 列的网格系统。

组件

Grid

<Grid> 组件，网格容器，行。

Props

collapse

PropType: bool

是否移除列默认的内边距（padding）。

wrap

PropType: enum('wrap', 'wrap-reverse')

网格容器 flex-wrap 属性，是否换行，默认为 nowrap。

avg

PropType: number

平均分配单元格为 n 列。

align

PropType: enum('right', 'center', 'between', 'around')

行中列宽度总和不足 6 时的对齐方式，不同值的含义参见 justify-content。

bordered

PropType: bool

网格是否显示边框，边框可用于制作九宫格效果。

Col

<Col> 组件，网格中列，嵌套在 <Grid> 中。

Props

cols

PropType: number

列宽所占的比例，1-6 的数字。

offset

PropType: number

列偏移（与左边元素的外边距）的数量。

shrink

PropType: bool

列是否自动收缩为内容宽度。

示例

import React from 'react';
import {
  Link,
} from 'react-router';
import {
  Container,
  Group,
  Grid,
  Col
} from 'amazeui-touch';
const GridExample = React.createClass({
  render() {
    return (
      <Container
        {...this.props}
        className={this.props.className + ' ks-grid'}
      >
        <h2>基本演示</h2>
        <Group
          header="演示说明"
        >
          <p>为方便查看效果，添加了线框边距，实际使用时没有：</p>
          <ul>
            <li>Grid: 虚线框</li>
            <li>Col: 灰色线框</li>
          </ul>
        </Group>
        <Group
          header="基本网格"
          footer="列分布在一行上"
        >
          <Grid>
            <Col>col</Col>
            <Col>col</Col>
          </Grid>
        </Group>
        <Group
          header="指定列所占比例"
          footer="在 Col 上通过 cols 属性指定列所占比例（总数为 6）"
        >
          <Grid>
            <Col cols={4}>cols: 4</Col>
            <Col cols={2}>cols: 2</Col>
          </Grid>
        </Group>
        <Group
          header={`换行：wrap="wrap"`}
          footer="通过 Grid 的 wrap 属性设置列是否换行"
        >
          <Grid
            wrap="wrap"
          >
            <Col cols={4}>cols: 4</Col>
            <Col cols={2}>cols: 2</Col>
            <Col cols={2}>cols: 2</Col>
            <Col cols={4}>cols: 4</Col>
          </Grid>
        </Group>
        <Group
          header={`换行：wrap="wrap-reverse"`}
          footer="没有反转时的顺序为 5-1-2"
        >
          <Grid
            wrap="wrap-reverse"
          >
            <Col cols={5}>cols: 5</Col>
            <Col cols={1}>cols: 1</Col>
            <Col cols={2}>cols: 2</Col>
          </Grid>
        </Group>
        <Group
          header="等分网格"
          footer="超出等分数的将分布到下一行（上面的示例中为 4 等分）"
        >
          <Grid avg={4}>
            <Col>col</Col>
            <Col>col</Col>
            <Col>col</Col>
            <Col>col</Col>
            <Col>col</Col>
            <Col>col</Col>
            <Col>col</Col>
            <Col>col</Col>
            <Col>col</Col>
          </Grid>
        </Group>
        <Group
          header="收缩的列"
          footer="Col 指定 shrink 属性后自动收缩到内容所占宽"
        >
          <Grid>
            <Col shrink>Shrink me</Col>
            <Col>col</Col>
          </Grid>
        </Group>
        <Group
          header="列偏移"
        >
          <Grid>
            <Col cols={3} offset={1}>cols: 3, offset: 1</Col>
          </Grid>
        </Group>
        <h2>网格嵌套</h2>
        <Group>
          <Grid>
            <Col>
              <Grid>
                <Col>col</Col>
                <Col>col</Col>
              </Grid>
            </Col>
            <Col>
              <Grid>
                <Col>col</Col>
                <Col>col</Col>
              </Grid>
            </Col>
          </Grid>
        </Group>
        <h2>不足 6 时对齐方式</h2>
        <Group
          header="默认：左对齐"
        >
          <Grid>
            <Col cols={2}>cols: 2</Col>
            <Col cols={2}>cols: 2</Col>
          </Grid>
        </Group>
        <Group
          header="居中对齐"
        >
          <Grid align="center">
            <Col cols={2}>cols: 2</Col>
            <Col cols={2}>cols: 2</Col>
          </Grid>
        </Group>
        <Group
          header="右对齐"
        >
          <Grid align="right">
            <Col cols={2}>cols: 2</Col>
            <Col cols={2}>cols: 2</Col>
          </Grid>
        </Group>
        <Group
          header="左右分布"
          footer="justify-content: space-between"
        >
          <Grid align="between">
            <Col cols={2}>cols: 2</Col>
            <Col cols={2}>cols: 2</Col>
          </Grid>
        </Group>
        <Group
          header="平均分布"
        >
          <Grid align="around">
            <Col cols={2}>cols: 2</Col>
            <Col cols={2}>cols: 2</Col>
          </Grid>
        </Group>
        <h2>网格边框</h2>
        <Group
          header="bordered 属性"
        >
          <p>在 Grid 上添加 <code>bordered</code> 结合 <code>avg</code> 属性可以实现九宫格效果。</p>
          <p><Link to="/icon">九宫格演示</Link></p>
        </Group>
      </Container>
    );
  }
});
export default GridExample;

DemoCopy

原文: http://t.amazeui.org/#/docs/grid