mirror of
https://github.com/ant-design/ant-design.git
synced 2025-07-24 15:38:45 +08:00
Add gutter for Row
This commit is contained in:
afc163
parent
400b7b8a27
commit
ff2cb6142a
@ -4,7 +4,7 @@
|
||||
|
||||
从堆叠到水平排列。
|
||||
|
||||
使用单一的一组 `.col-*` 栅格类，就可以创建一个基本的栅格系统，所有列（column）必须放在 `.row` 内。
|
||||
使用单一的一组 `Row` 和 `Col` 栅格组件，就可以创建一个基本的栅格系统，所有列（Col）必须放在 `Row` 内。
|
||||
|
||||
---
|
||||
|
||||
@ -17,10 +17,10 @@ ReactDOM.render(
|
||||
<Col span="12">.col-12</Col>
|
||||
<Col span="12">.col-12</Col>
|
||||
</Row>
|
||||
<Row className="testRowClassName">
|
||||
<Row>
|
||||
<Col span="8">.col-8</Col>
|
||||
<Col span="8">.col-8</Col>
|
||||
<Col span="8">.col-8</Col>
|
||||
<Col span="8" className="testColClassName">.col-8</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col span="6">.col-6</Col>
|
||||
@ -32,12 +32,3 @@ ReactDOM.render(
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
||||
<style>
|
||||
.testRowClassName {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
div.testColClassName {
|
||||
background: rgba(24, 115, 216, 0.9);
|
||||
}
|
||||
</style>
|
||||
|
||||
46
components/layout/demo/gutter.md
Normal file
46
components/layout/demo/gutter.md
Normal file
@ -0,0 +1,46 @@
|
||||
# 区块间隔
|
||||
|
||||
- order: 6
|
||||
|
||||
栅格常常需要和间隔进行配置，我们推荐使用 `(16+8n)px` 作为栅格间隔。
|
||||
|
||||
---
|
||||
|
||||
````jsx
|
||||
import { Row, Col } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<div className="gutter-example">
|
||||
<Row gutter={16}>
|
||||
<Col span="6">
|
||||
<div className="gutter-box">.col-6</div>
|
||||
</Col>
|
||||
<Col span="6">
|
||||
<div className="gutter-box">.col-6</div>
|
||||
</Col>
|
||||
<Col span="6">
|
||||
<div className="gutter-box">.col-6</div>
|
||||
</Col>
|
||||
<Col span="6">
|
||||
<div className="gutter-box">.col-6</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
````css
|
||||
.gutter-example {
|
||||
background: #f4f4f4;
|
||||
}
|
||||
.gutter-example .row > div {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
}
|
||||
.gutter-box {
|
||||
background: #2db7f5;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
````
|
||||
@ -11,6 +11,7 @@
|
||||
|
||||
## 设计理念
|
||||
|
||||
<div style="width:80%">
|
||||
<div class="row demo-row">
|
||||
<div class="col-24 demo-col demo-col-1">
|
||||
100%
|
||||
@ -57,10 +58,11 @@
|
||||
33.33%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
在多数业务情况下，Ant Design需要在设计区域内解决大量信息收纳的问题，因此在12栅格系统的基础上，我们将整个设计建议区域按照24等分的原则进行划分。
|
||||
在多数业务情况下，Ant Design需要在设计区域内解决大量信息收纳的问题，因此在 12 栅格系统的基础上，我们将整个设计建议区域按照 24 等分的原则进行划分。
|
||||
|
||||
划分之后的信息区块我们称之为“盒子”。建议横向排列的盒子数量最多四个，最少一个。“盒子”在整个屏幕上占比见上图。设计部分基于盒子的单位定制盒子内部的排版规则，以保证视觉层面的舒适感。
|
||||
划分之后的信息区块我们称之为『盒子』。建议横向排列的盒子数量最多四个，最少一个。『盒子』在整个屏幕上占比见上图。设计部分基于盒子的单位定制盒子内部的排版规则，以保证视觉层面的舒适感。
|
||||
|
||||
## 概述
|
||||
|
||||
@ -69,29 +71,31 @@
|
||||
* 通过`row`在水平方向建立一组`column`（简写col）
|
||||
* 你的内容应当放置于`col`内，并且，只有`col`可以作为`row`的直接元素
|
||||
* 栅格系统中的列是指1到24的值来表示其跨越的范围。例如，三个等宽的列可以使用`.col-8`来创建
|
||||
* 如果一个`row`中的`col`总和超过24，那么多余的`col`会作为一个整体另起一行排列
|
||||
* 如果一个`row`中的`col`总和超过 24，那么多余的`col`会作为一个整体另起一行排列
|
||||
|
||||
## Flex 布局
|
||||
|
||||
我们的栅格化系统支持 Flex 布局，允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间，支持顶部对齐、垂直居中对齐、底部对齐的方式。同时，支持使用 order 来定义元素的排列顺序。
|
||||
|
||||
Flex 布局是基于 24 栅格来定义每一个“盒子”的宽度，但排版则不拘泥于栅格。
|
||||
Flex 布局是基于 24 栅格来定义每一个『盒子』的宽度，但排版则不拘泥于栅格。
|
||||
|
||||
<style>
|
||||
.demo-row {
|
||||
background-image: linear-gradient(90deg, #F5F5F5 4.16666667%, transparent 4.16666667%, transparent 8.33333333%, #F5F5F5 8.33333333%, #F5F5F5 12.5%, transparent 12.5%, transparent 16.66666667%, #F5F5F5 16.66666667%, #F5F5F5 20.83333333%, transparent 20.83333333%, transparent 25%, #F5F5F5 25%, #F5F5F5 29.16666667%, transparent 29.16666667%, transparent 33.33333333%, #F5F5F5 33.33333333%, #F5F5F5 37.5%, transparent 37.5%, transparent 41.66666667%, #F5F5F5 41.66666667%, #F5F5F5 45.83333333%, transparent 45.83333333%, transparent 50%, #F5F5F5 50%, #F5F5F5 54.16666667%, transparent 54.16666667%, transparent 58.33333333%, #F5F5F5 58.33333333%, #F5F5F5 62.5%, transparent 62.5%, transparent 66.66666667%, #F5F5F5 66.66666667%, #F5F5F5 70.83333333%, transparent 70.83333333%, transparent 75%, #F5F5F5 75%, #F5F5F5 79.16666667%, transparent 79.16666667%, transparent 83.33333333%, #F5F5F5 83.33333333%, #F5F5F5 87.5%, transparent 87.5%, transparent 91.66666667%, #F5F5F5 91.66666667%, #F5F5F5 95.83333333%, transparent 95.83333333%);
|
||||
overflow: hidden;
|
||||
background-image: linear-gradient(90deg, #F5F5F5 4.16666667%, transparent 4.16666667%, transparent 8.33333333%, #F5F5F5 8.33333333%, #F5F5F5 12.5%, transparent 12.5%, transparent 16.66666667%, #F5F5F5 16.66666667%, #F5F5F5 20.83333333%, transparent 20.83333333%, transparent 25%, #F5F5F5 25%, #F5F5F5 29.16666667%, transparent 29.16666667%, transparent 33.33333333%, #F5F5F5 33.33333333%, #F5F5F5 37.5%, transparent 37.5%, transparent 41.66666667%, #F5F5F5 41.66666667%, #F5F5F5 45.83333333%, transparent 45.83333333%, transparent 50%, #F5F5F5 50%, #F5F5F5 54.16666667%, transparent 54.16666667%, transparent 58.33333333%, #F5F5F5 58.33333333%, #F5F5F5 62.5%, transparent 62.5%, transparent 66.66666667%, #F5F5F5 66.66666667%, #F5F5F5 70.83333333%, transparent 70.83333333%, transparent 75%, #F5F5F5 75%, #F5F5F5 79.16666667%, transparent 79.16666667%, transparent 83.33333333%, #F5F5F5 83.33333333%, #F5F5F5 87.5%, transparent 87.5%, transparent 91.66666667%, #F5F5F5 91.66666667%, #F5F5F5 95.83333333%, transparent 95.83333333%);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.row-flex {
|
||||
background: #F5F5F5;
|
||||
}
|
||||
|
||||
.row div,
|
||||
.row-flex div {
|
||||
.row > div,
|
||||
.row-flex > div {
|
||||
padding: 5px 0;
|
||||
background: rgba(24, 115, 216, 0.7);
|
||||
text-align: center;
|
||||
min-height: 28px;
|
||||
border-radius: 6px;
|
||||
min-height: 30px;
|
||||
background: #6AC2F5;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
@ -108,17 +112,17 @@ Flex 布局是基于 24 栅格来定义每一个“盒子”的宽度，但排
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.row .demo-col-1 {
|
||||
background: rgba(24, 115, 216, 0.7);
|
||||
background: rgba(29, 128, 211, 0.7);
|
||||
}
|
||||
.row .demo-col-2 {
|
||||
background: rgba(24, 115, 216, 0.5);
|
||||
background: rgba(29, 128, 211, 0.5);
|
||||
}
|
||||
.row .demo-col-3 {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: #999;
|
||||
}
|
||||
.row .demo-col-4 {
|
||||
background: rgba(24, 115, 216, 0.6);
|
||||
background: rgba(29, 128, 211, 0.6);
|
||||
}
|
||||
.row .demo-col-5 {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
import React, { Children, cloneElement } from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
const Row = React.createClass({
|
||||
@ -8,9 +8,15 @@ const Row = React.createClass({
|
||||
justify: React.PropTypes.string,
|
||||
className: React.PropTypes.string,
|
||||
children: React.PropTypes.node,
|
||||
gutter: React.PropTypes.number,
|
||||
},
|
||||
getDefaultProps() {
|
||||
return {
|
||||
gutter: 0,
|
||||
};
|
||||
},
|
||||
render() {
|
||||
const { type, justify, align, className, ...others } = this.props;
|
||||
const { type, justify, align, className, gutter, style, children, ...others } = this.props;
|
||||
const classes = classNames({
|
||||
row: true,
|
||||
[`row-${type}`]: type,
|
||||
@ -18,7 +24,20 @@ const Row = React.createClass({
|
||||
[`row-${type}-${align}`]: align,
|
||||
[className]: className,
|
||||
});
|
||||
return <div {...others} className={classes}>{ this.props.children }</div>;
|
||||
const rowStyle = gutter > 0 ? {
|
||||
marginLeft: gutter / -2,
|
||||
marginRight: gutter / -2,
|
||||
...style,
|
||||
} : style;
|
||||
const cols = Children.map(children, col =>
|
||||
cloneElement(col, {
|
||||
style: gutter > 0 ? {
|
||||
paddingLeft: gutter / 2,
|
||||
paddingRight: gutter / 2,
|
||||
} : null
|
||||
})
|
||||
);
|
||||
return <div {...others} className={classes} style={rowStyle}>{cols}</div>;
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user