• Grid 栅格

    24 栅格系统。

    设计理念

    100%
    25%
    25%
    25%
    25%
    33.33%
    33.33%
    33.33%
    50%
    50%
    66.66%
    33.33%

    在多数业务情况下,Choerodon需要在设计区域内解决大量信息收纳的问题,因此在 12 栅格系统的基础上,我们将整个设计建议区域按照 24 等分的原则进行划分。

    划分之后的信息区块我们称之为『盒子』。建议横向排列的盒子数量最多四个,最少一个。『盒子』在整个屏幕上占比见上图。设计部分基于盒子的单位定制盒子内部的排版规则,以保证视觉层面的舒适感。

    概述

    布局的栅格化系统,我们是基于行(row)和列(col)来定义信息区块的外部框架,以保证页面的每个区域能够稳健地排布起来。下面简单介绍一下它的工作原理:

    Flex 布局

    我们的栅格化系统支持 Flex 布局,允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间,支持顶部对齐、垂直居中对齐、底部对齐的方式。同时,支持使用 order 来定义元素的排列顺序。

    Flex 布局是基于 24 栅格来定义每一个『盒子』的宽度,但排版则不拘泥于栅格。

    代码演示

    从堆叠到水平排列。

    使用单一的一组 RowCol 栅格组件,就可以创建一个基本的栅格系统,所有列(Col)必须放在 Row 内。

    expand code expand code
    import { Row, Col } from 'choerodon-ui';
    
    ReactDOM.render(
      <div>
        <Row>
          <Col span={12}>col-12</Col>
          <Col span={12}>col-12</Col>
        </Row>
        <Row>
          <Col span={8}>col-8</Col>
          <Col span={8}>col-8</Col>
          <Col span={8}>col-8</Col>
        </Row>
        <Row>
          <Col span={6}>col-6</Col>
          <Col span={6}>col-6</Col>
          <Col span={6}>col-6</Col>
          <Col span={6}>col-6</Col>
        </Row>
      </div>,
      mountNode
    );
    

    栅格常常需要和间隔进行配合,你可以使用 Rowgutter 属性,我们推荐使用 (16+8n)px 作为栅格间隔。(n 是自然数)

    如果要支持响应式,可以写成 { xs: 8, sm: 16, md: 24, lg: 32 }

    expand code expand code
    import { Row, Col } from 'choerodon-ui';
    
    ReactDOM.render(
      <div className="gutter-example">
        <Row gutter={16}>
          <Col className="gutter-row" span={6}>
            <div className="gutter-box">col-6</div>
          </Col>
          <Col className="gutter-row" span={6}>
            <div className="gutter-box">col-6</div>
          </Col>
          <Col className="gutter-row" span={6}>
            <div className="gutter-box">col-6</div>
          </Col>
          <Col className="gutter-row" span={6}>
            <div className="gutter-box">col-6</div>
          </Col>
        </Row>
      </div>,
      mountNode);
    

    从堆叠到水平排列。

    使用单一的一组 RowCol 栅格组件,就可以创建一个基本的栅格系统,所有列(Col)必须放在 Row 内。

    expand code expand code
    import { Row, Col } from 'choerodon-ui';
    
    ReactDOM.render(
      <div>
        <Row>
          <Col span={12}>col-12</Col>
          <Col span={12}>col-12</Col>
        </Row>
        <Row>
          <Col span={8}>col-8</Col>
          <Col span={8}>col-8</Col>
          <Col span={8}>col-8</Col>
        </Row>
        <Row>
          <Col span={6}>col-6</Col>
          <Col span={6}>col-6</Col>
          <Col span={6}>col-6</Col>
          <Col span={6}>col-6</Col>
        </Row>
      </div>,
      mountNode
    );
    

    列排序。

    通过使用 pushpull 类就可以很容易的改变列(column)的顺序。

    expand code expand code
    import { Row, Col } from 'choerodon-ui';
    
    ReactDOM.render(
      <div>
        <Row>
          <Col span={18} push={6}>col-18 col-push-6</Col>
          <Col span={6} pull={18}>col-6 col-pull-18</Col>
        </Row>
      </div>,
      mountNode
    );
    

    Flex 布局基础。

    使用 row-flex 定义 flex 布局,其子元素根据不同的值 start,center,end,space-between,space-around,分别定义其在父节点里面的排版方式。

    expand code expand code
    import { Row, Col } from 'choerodon-ui';
    
    ReactDOM.render(
      <div>
        <p>sub-element align left</p>
        <Row type="flex" justify="start">
          <Col span={4}>col-4</Col>
          <Col span={4}>col-4</Col>
          <Col span={4}>col-4</Col>
          <Col span={4}>col-4</Col>
        </Row>
    
        <p>sub-element align center</p>
        <Row type="flex" justify="center">
          <Col span={4}>col-4</Col>
          <Col span={4}>col-4</Col>
          <Col span={4}>col-4</Col>
          <Col span={4}>col-4</Col>
        </Row>
    
        <p>sub-element align right</p>
        <Row type="flex" justify="end">
          <Col span={4}>col-4</Col>
          <Col span={4}>col-4</Col>
          <Col span={4}>col-4</Col>
          <Col span={4}>col-4</Col>
        </Row>
    
        <p>sub-element monospaced arrangement</p>
        <Row type="flex" justify="space-between">
          <Col span={4}>col-4</Col>
          <Col span={4}>col-4</Col>
          <Col span={4}>col-4</Col>
          <Col span={4}>col-4</Col>
        </Row>
    
        <p>sub-element align full</p>
        <Row type="flex" justify="space-around">
          <Col span={4}>col-4</Col>
          <Col span={4}>col-4</Col>
          <Col span={4}>col-4</Col>
          <Col span={4}>col-4</Col>
        </Row>
      </div>,
      mountNode
    );
    
    Flex 子元素垂直对齐。
    expand code expand code
    import { Row, Col } from 'choerodon-ui';
    
    const DemoBox = props => <p className={`height-${props.value}`}>{props.children}</p>;
    
    ReactDOM.render(
      <div>
        <p>Align Top</p>
        <Row type="flex" justify="center" align="top">
          <Col span={4}><DemoBox value={100}>col-4</DemoBox></Col>
          <Col span={4}><DemoBox value={50}>col-4</DemoBox></Col>
          <Col span={4}><DemoBox value={120}>col-4</DemoBox></Col>
          <Col span={4}><DemoBox value={80}>col-4</DemoBox></Col>
        </Row>
    
        <p>Align Center</p>
        <Row type="flex" justify="space-around" align="middle">
          <Col span={4}><DemoBox value={100}>col-4</DemoBox></Col>
          <Col span={4}><DemoBox value={50}>col-4</DemoBox></Col>
          <Col span={4}><DemoBox value={120}>col-4</DemoBox></Col>
          <Col span={4}><DemoBox value={80}>col-4</DemoBox></Col>
        </Row>
    
        <p>Align Bottom</p>
        <Row type="flex" justify="space-between" align="bottom">
          <Col span={4}><DemoBox value={100}>col-4</DemoBox></Col>
          <Col span={4}><DemoBox value={50}>col-4</DemoBox></Col>
          <Col span={4}><DemoBox value={120}>col-4</DemoBox></Col>
          <Col span={4}><DemoBox value={80}>col-4</DemoBox></Col>
        </Row>
      </div>,
      mountNode
    );
    
    通过 Flex 布局的 Order 来改变元素的排序。
    expand code expand code
    import { Row, Col } from 'choerodon-ui';
    
    ReactDOM.render(
      <div>
        <Row type="flex">
          <Col span={6} order={4}>1 col-order-4</Col>
          <Col span={6} order={3}>2 col-order-3</Col>
          <Col span={6} order={2}>3 col-order-2</Col>
          <Col span={6} order={1}>4 col-order-1</Col>
        </Row>
      </div>,
      mountNode
    );
    
    参照 Bootstrap 的 响应式设计,预设五个响应尺寸:xs sm md lg xl xxl
    expand code expand code
    import { Row, Col } from 'choerodon-ui';
    
    ReactDOM.render(
      <Row>
        <Col xs={2} sm={4} md={6} lg={8} xl={10}>Col</Col>
        <Col xs={20} sm={16} md={12} lg={8} xl={4}>Col</Col>
        <Col xs={2} sm={4} md={6} lg={8} xl={10}>Col</Col>
      </Row>,
      mountNode);
    

    span pull push offset order 属性可以通过内嵌到 xs sm md lg xl xxl 属性中来使用。

    其中 xs={6} 相当于 xs={{ span: 6 }}

    expand code expand code
    import { Row, Col } from 'choerodon-ui';
    
    ReactDOM.render(
      <Row>
        <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}>Col</Col>
        <Col xs={{ span: 11, offset: 1 }} lg={{ span: 6, offset: 2 }}>Col</Col>
        <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}>Col</Col>
      </Row>,
      mountNode);
    
    可以简单配置几种等分栅格和间距。
    expand code expand code
    import { Row, Col, Slider } from 'choerodon-ui';
    
    class App extends React.Component {
      gutters = {};
    
      colCounts = {};
    
      constructor() {
        super();
        this.state = {
          gutterKey: 1,
          colCountKey: 2,
        };
        [8, 16, 24, 32, 40, 48].forEach((value, i) => { this.gutters[i] = value; });
        [2, 3, 4, 6, 8, 12].forEach((value, i) => { this.colCounts[i] = value; });
      }
    
      onGutterChange = (gutterKey) => {
        this.setState({ gutterKey });
      }
    
      onColCountChange = (colCountKey) => {
        this.setState({ colCountKey });
      }
    
      render() {
        const { gutterKey, colCountKey } = this.state;
        const cols = [];
        const colCount = this.colCounts[colCountKey];
        let colCode = '';
        for (let i = 0; i < colCount; i++) {
          cols.push(
            <Col key={i.toString()} span={24 / colCount}>
              <div>Column</div>
            </Col>
          );
          colCode += `  <Col span={${24 / colCount}} />
    `;
        }
        return (
          <div>
            <div style={{ marginBottom: 16 }}>
              <span style={{ marginRight: 6 }}>Gutter (px): </span>
              <div style={{ width: '50%' }}>
                <Slider
                  min={0}
                  max={Object.keys(this.gutters).length - 1}
                  value={gutterKey}
                  onChange={this.onGutterChange}
                  marks={this.gutters}
                  step={null}
                />
              </div>
              <span style={{ marginRight: 6 }}>Column Count:</span>
              <div style={{ width: '50%' }}>
                <Slider
                  min={0}
                  max={Object.keys(this.colCounts).length - 1}
                  value={colCountKey}
                  onChange={this.onColCountChange}
                  marks={this.colCounts}
                  step={null}
                />
              </div>
            </div>
            <Row gutter={this.gutters[gutterKey]}>{cols}</Row>
            <pre>{`<Row gutter={${this.gutters[gutterKey]}}>
    ${colCode}</Row>`}</pre>
          </div>
        );
      }
    }
    
    ReactDOM.render(<App />, mountNode);
    

    API

    Choerodon 的布局组件若不能满足你的需求,你也可以直接使用社区的优秀布局组件:

    Row

    成员说明类型默认值
    alignflex 布局下的垂直对齐方式:top middle bottomstringtop
    gutter栅格间隔,可以写成像素值或支持响应式的对象写法 { xs: 8, sm: 16, md: 24}number/object0
    justifyflex 布局下的水平排列方式:start end center space-around space-betweenstringstart
    type布局模式,可选 flex现代浏览器 下有效string

    Col

    成员说明类型默认值
    offset栅格左侧的间隔格数,间隔内不可以有栅格number0
    order栅格顺序,flex 布局模式下有效number0
    pull栅格向左移动格数number0
    push栅格向右移动格数number0
    span栅格占位格数,为 0 时相当于 display: nonenumber-
    xs<576px 响应式栅格,可为栅格数或一个包含其他属性的对象number|object-
    sm≥576px 响应式栅格,可为栅格数或一个包含其他属性的对象number|object-
    md≥768px 响应式栅格,可为栅格数或一个包含其他属性的对象number|object-
    lg≥992px 响应式栅格,可为栅格数或一个包含其他属性的对象number|object-
    xl≥1200px 响应式栅格,可为栅格数或一个包含其他属性的对象number|object-
    xxl≥1600px 响应式栅格,可为栅格数或一个包含其他属性的对象number|object-

    响应式栅格的断点扩展自 BootStrap 4 的规则(不包含链接里 occasionally 的部分)。