Browse Source

feat: col-*-0 means `display: none`

pull/1263/head
Benjy Cui 9 years ago
parent
commit
f67548d60f
  1. 4
      components/layout/col.jsx
  2. 2
      components/layout/index.md
  3. 6
      style/mixins/grid.less

4
components/layout/col.jsx

@ -31,7 +31,7 @@ const Col = React.createClass({
} }
sizeClassObj = { sizeClassObj = {
...sizeClassObj, ...sizeClassObj,
[`col-${size}-${sizeProps.span}`]: sizeProps.span, [`col-${size}-${sizeProps.span}`]: sizeProps.span !== undefined,
[`col-${size}-order-${sizeProps.order}`]: sizeProps.order, [`col-${size}-order-${sizeProps.order}`]: sizeProps.order,
[`col-${size}-offset-${sizeProps.offset}`]: sizeProps.offset, [`col-${size}-offset-${sizeProps.offset}`]: sizeProps.offset,
[`col-${size}-push-${sizeProps.push}`]: sizeProps.push, [`col-${size}-push-${sizeProps.push}`]: sizeProps.push,
@ -39,7 +39,7 @@ const Col = React.createClass({
}; };
}); });
const classes = classNames({ const classes = classNames({
[`col-${span}`]: span, [`col-${span}`]: span !== undefined,
[`col-order-${order}`]: order, [`col-order-${order}`]: order,
[`col-offset-${offset}`]: offset, [`col-offset-${offset}`]: offset,
[`col-push-${push}`]: push, [`col-push-${push}`]: push,

2
components/layout/index.md

@ -99,7 +99,7 @@ Ant Design 的布局组件若不能满足你的需求,你也可以直接使用
| 成员 | 说明 | 类型 | 默认值 | | 成员 | 说明 | 类型 | 默认值 |
|------------|-----------------|--------------------|-------------| |------------|-----------------|--------------------|-------------|
| span | 栅格占位格数 | number | 0 | | span | 栅格占位格数,为 0 时相当于 `display: none` | number | 无 |
| order | 栅格顺序,`flex` 布局模式下有效 | number | 0 | | order | 栅格顺序,`flex` 布局模式下有效 | number | 0 |
| offset | 栅格左侧的间隔格数,间隔内不可以有栅格 | number | 0 | | offset | 栅格左侧的间隔格数,间隔内不可以有栅格 | number | 0 |
| push | 栅格向右移动格数 | number | 0 | | push | 栅格向右移动格数 | number | 0 |

6
style/mixins/grid.less

@ -32,6 +32,7 @@
.loop-grid-columns(@index, @class) when (@index > 0) { .loop-grid-columns(@index, @class) when (@index > 0) {
.col@{class}-@{index} { .col@{class}-@{index} {
display: block;
width: percentage((@index / @grid-columns)); width: percentage((@index / @grid-columns));
} }
.col@{class}-push-@{index} { .col@{class}-push-@{index} {
@ -49,7 +50,10 @@
.loop-grid-columns((@index - 1), @class); .loop-grid-columns((@index - 1), @class);
} }
.loop-grid-columns(@index) when (@index = 0) { .loop-grid-columns(@index, @class) when (@index = 0) {
.col@{class}-@{index} {
display: none;
}
.col-push-@{index} { .col-push-@{index} {
left: auto; left: auto;
} }

Loading…
Cancel
Save