Grid 栅格

24 栅格系统。

设计理念

100%

25%

25%

25%

25%

33.33%

33.33%

33.33%

50%

50%

66.66%

33.33%

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

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

概述

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

  • 通过row在水平方向建立一组column（简写 col）
  • 你的内容应当放置于col内，并且，只有col可以作为row的直接元素
  • 栅格系统中的列是指 1 到 24 的值来表示其跨越的范围。例如，三个等宽的列可以使用.col-8来创建
  • 如果一个row中的col总和超过 24，那么多余的col会作为一个整体另起一行排列

Flex 布局

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

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

代码演示

基础栅格

从堆叠到水平排列。

使用单一的一组 Row 和 Col 栅格组件，就可以创建一个基本的栅格系统，所有列（Col）必须放在 Row 内。

Grid栅格 - 图1

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Row, Col } from 'choerodon-ui';
  4. ​
  5. ReactDOM.render(
  6.   <div>
  7.     <Row>
  8.       <Col span={12}>col-12</Col>
  9.       <Col span={12}>col-12</Col>
  10.     </Row>
  11.     <Row>
  12.       <Col span={8}>col-8</Col>
  13.       <Col span={8}>col-8</Col>
  14.       <Col span={8}>col-8</Col>
  15.     </Row>
  16.     <Row>
  17.       <Col span={6}>col-6</Col>
  18.       <Col span={6}>col-6</Col>
  19.       <Col span={6}>col-6</Col>
  20.       <Col span={6}>col-6</Col>
  21.     </Row>
  22.   </div>,
  23.   document.getElementById('container'),
  24. );
  25. ​

区块间隔

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

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

Grid栅格 - 图2

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Row, Col } from 'choerodon-ui';
  4. ​
  5. ReactDOM.render(
  6.   <div className="gutter-example">
  7.     <Row gutter={16}>
  8.       <Col className="gutter-row" span={6}>
  9.         <div className="gutter-box">col-6</div>
  10.       </Col>
  11.       <Col className="gutter-row" span={6}>
  12.         <div className="gutter-box">col-6</div>
  13.       </Col>
  14.       <Col className="gutter-row" span={6}>
  15.         <div className="gutter-box">col-6</div>
  16.       </Col>
  17.       <Col className="gutter-row" span={6}>
  18.         <div className="gutter-box">col-6</div>
  19.       </Col>
  20.     </Row>
  21.   </div>,
  22.   document.getElementById('container'));
  23. ​

左右偏移

列偏移。

使用 offset 可以将列向右侧偏。例如，offset={4} 将元素向右侧偏移了 4 个列（column）的宽度。

Grid栅格 - 图3

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Row, Col } from 'choerodon-ui';
  4. ​
  5. ReactDOM.render(
  6.   <div>
  7.     <Row>
  8.       <Col span={8}>col-8</Col>
  9.       <Col span={8} offset={8}>
  10.         col-8
  11.       </Col>
  12.     </Row>
  13.     <Row>
  14.       <Col span={6} offset={6}>
  15.         col-6 col-offset-6
  16.       </Col>
  17.       <Col span={6} offset={6}>
  18.         col-6 col-offset-6
  19.       </Col>
  20.     </Row>
  21.     <Row>
  22.       <Col span={12} offset={6}>
  23.         col-12 col-offset-6
  24.       </Col>
  25.     </Row>
  26.   </div>,
  27.   document.getElementById('container'),
  28. );
  29. ​

栅格排序

列排序。

通过使用 push 和 pull 类就可以很容易的改变列（column）的顺序。

Grid栅格 - 图4

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Row, Col } from 'choerodon-ui';
  4. ​
  5. ReactDOM.render(
  6.   <div>
  7.     <Row>
  8.       <Col span={18} push={6}>
  9.         col-18 col-push-6
  10.       </Col>
  11.       <Col span={6} pull={18}>
  12.         col-6 col-pull-18
  13.       </Col>
  14.     </Row>
  15.   </div>,
  16.   document.getElementById('container'),
  17. );
  18. ​

Flex 布局

Flex 布局基础。

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

Grid栅格 - 图5

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Row, Col } from 'choerodon-ui';
  4. ​
  5. ReactDOM.render(
  6.   <div>
  7.     <p>sub-element align left</p>
  8.     <Row type="flex" justify="start">
  9.       <Col span={4}>col-4</Col>
  10.       <Col span={4}>col-4</Col>
  11.       <Col span={4}>col-4</Col>
  12.       <Col span={4}>col-4</Col>
  13.     </Row>
  14. ​
  15.     <p>sub-element align center</p>
  16.     <Row type="flex" justify="center">
  17.       <Col span={4}>col-4</Col>
  18.       <Col span={4}>col-4</Col>
  19.       <Col span={4}>col-4</Col>
  20.       <Col span={4}>col-4</Col>
  21.     </Row>
  22. ​
  23.     <p>sub-element align right</p>
  24.     <Row type="flex" justify="end">
  25.       <Col span={4}>col-4</Col>
  26.       <Col span={4}>col-4</Col>
  27.       <Col span={4}>col-4</Col>
  28.       <Col span={4}>col-4</Col>
  29.     </Row>
  30. ​
  31.     <p>sub-element monospaced arrangement</p>
  32.     <Row type="flex" justify="space-between">
  33.       <Col span={4}>col-4</Col>
  34.       <Col span={4}>col-4</Col>
  35.       <Col span={4}>col-4</Col>
  36.       <Col span={4}>col-4</Col>
  37.     </Row>
  38. ​
  39.     <p>sub-element align full</p>
  40.     <Row type="flex" justify="space-around">
  41.       <Col span={4}>col-4</Col>
  42.       <Col span={4}>col-4</Col>
  43.       <Col span={4}>col-4</Col>
  44.       <Col span={4}>col-4</Col>
  45.     </Row>
  46.   </div>,
  47.   document.getElementById('container'),
  48. );
  49. ​

Flex 对齐

Flex 子元素垂直对齐。

Grid栅格 - 图6

  1. ​
  2. import React from 'react';
  3. import ReactDOM from 'react-dom';
  4. import { Row, Col } from 'choerodon-ui';
  5. ​
  6. const DemoBox = props => <p className={`height-${props.value}`}>{props.children}</p>;
  7. ​
  8. ReactDOM.render(
  9.   <div>
  10.     <p>Align Top</p>
  11.     <Row type="flex" justify="center" align="top">
  12.       <Col span={4}>
  13.         <DemoBox value={100}>col-4</DemoBox>
  14.       </Col>
  15.       <Col span={4}>
  16.         <DemoBox value={50}>col-4</DemoBox>
  17.       </Col>
  18.       <Col span={4}>
  19.         <DemoBox value={120}>col-4</DemoBox>
  20.       </Col>
  21.       <Col span={4}>
  22.         <DemoBox value={80}>col-4</DemoBox>
  23.       </Col>
  24.     </Row>
  25. ​
  26.     <p>Align Center</p>
  27.     <Row type="flex" justify="space-around" align="middle">
  28.       <Col span={4}>
  29.         <DemoBox value={100}>col-4</DemoBox>
  30.       </Col>
  31.       <Col span={4}>
  32.         <DemoBox value={50}>col-4</DemoBox>
  33.       </Col>
  34.       <Col span={4}>
  35.         <DemoBox value={120}>col-4</DemoBox>
  36.       </Col>
  37.       <Col span={4}>
  38.         <DemoBox value={80}>col-4</DemoBox>
  39.       </Col>
  40.     </Row>
  41. ​
  42.     <p>Align Bottom</p>
  43.     <Row type="flex" justify="space-between" align="bottom">
  44.       <Col span={4}>
  45.         <DemoBox value={100}>col-4</DemoBox>
  46.       </Col>
  47.       <Col span={4}>
  48.         <DemoBox value={50}>col-4</DemoBox>
  49.       </Col>
  50.       <Col span={4}>
  51.         <DemoBox value={120}>col-4</DemoBox>
  52.       </Col>
  53.       <Col span={4}>
  54.         <DemoBox value={80}>col-4</DemoBox>
  55.       </Col>
  56.     </Row>
  57.   </div>,

Flex 排序

通过 Flex 布局的 Order 来改变元素的排序。

Grid栅格 - 图7

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Row, Col } from 'choerodon-ui';
  4. ​
  5. ReactDOM.render(
  6.   <div>
  7.     <Row type="flex">
  8.       <Col span={6} order={4}>
  9.         1 col-order-4
  10.       </Col>
  11.       <Col span={6} order={3}>
  12.         2 col-order-3
  13.       </Col>
  14.       <Col span={6} order={2}>
  15.         3 col-order-2
  16.       </Col>
  17.       <Col span={6} order={1}>
  18.         4 col-order-1
  19.       </Col>
  20.     </Row>
  21.   </div>,
  22.   document.getElementById('container'),
  23. );
  24. ​

响应式布局

参照 Bootstrap 的 响应式设计，预设五个响应尺寸：xs sm md lg xl xxl。

Grid栅格 - 图8

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Row, Col } from 'choerodon-ui';
  4. ​
  5. ReactDOM.render(
  6.   <Row>
  7.     <Col xs={2} sm={4} md={6} lg={8} xl={10}>Col</Col>
  8.     <Col xs={20} sm={16} md={12} lg={8} xl={4}>Col</Col>
  9.     <Col xs={2} sm={4} md={6} lg={8} xl={10}>Col</Col>
  10.   </Row>,
  11.   document.getElementById('container'));
  12. ​

其他属性的响应式

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

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

Grid栅格 - 图9

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Row, Col } from 'choerodon-ui';
  4. ​
  5. ReactDOM.render(
  6.   <Row>
  7.     <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}>Col</Col>
  8.     <Col xs={{ span: 11, offset: 1 }} lg={{ span: 6, offset: 2 }}>Col</Col>
  9.     <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}>Col</Col>
  10.   </Row>,
  11.   document.getElementById('container'));
  12. ​

栅格配置器

可以简单配置几种等分栅格和间距。

Grid栅格 - 图10

  1. ​
  2. import React from 'react';
  3. import ReactDOM from 'react-dom';
  4. import { Row, Col, Slider } from 'choerodon-ui';
  5. ​
  6. class App extends React.Component {
  7.   gutters = {};
  8. ​
  9.   colCounts = {};
  10. ​
  11.   constructor() {
  12.     super();
  13.     this.state = {
  14.       gutterKey: 1,
  15.       colCountKey: 2,
  16.     };
  17.     [8, 16, 24, 32, 40, 48].forEach((value, i) => {
  18.       this.gutters[i] = value;
  19.     });
  20.     [2, 3, 4, 6, 8, 12].forEach((value, i) => {
  21.       this.colCounts[i] = value;
  22.     });
  23.   }
  24. ​
  25.   onGutterChange = gutterKey => {
  26.     this.setState({ gutterKey });
  27.   };
  28. ​
  29.   onColCountChange = colCountKey => {
  30.     this.setState({ colCountKey });
  31.   };
  32. ​
  33.   render() {
  34.     const { gutterKey, colCountKey } = this.state;
  35.     const cols = [];
  36.     const colCount = this.colCounts[colCountKey];
  37.     let colCode = '';
  38.     for (let i = 0; i < colCount; i++) {
  39.       cols.push(
  40.         <Col key={i.toString()} span={24 / colCount}>
  41.           <div>Column</div>
  42.         </Col>,
  43.       );
  44.       colCode += `  <Col span={${24 / colCount}} />\n`;
  45.     }
  46.     return (
  47.       <div>
  48.         <div style={{ marginBottom: 16 }}>
  49.           <span style={{ marginRight: 6 }}>Gutter (px): </span>
  50.           <div style={{ width: '50%' }}>
  51.             <Slider

API

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

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 的部分)。