From 54db7ec32b2b42b53d943672f03e6453eb4c7980 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 25 Feb 2016 16:48:03 +0800 Subject: [PATCH] Remove layout-fixed --- components/layout/col.jsx | 20 ++++++++++--------- components/layout/demo/gutter.md | 2 +- components/layout/demo/responsive.md | 30 ---------------------------- components/layout/index.md | 26 ++++++++++++++++++++++++ style/core/layouts.less | 21 ------------------- style/mixins/grid.less | 8 -------- 6 files changed, 38 insertions(+), 69 deletions(-) delete mode 100644 components/layout/demo/responsive.md diff --git a/components/layout/col.jsx b/components/layout/col.jsx index 125b980158..c932119703 100644 --- a/components/layout/col.jsx +++ b/components/layout/col.jsx @@ -1,15 +1,17 @@ -import React from 'react'; +import React, { PropTypes } from 'react'; import classNames from 'classnames'; +const stringOrNumber = PropTypes.oneOfType([PropTypes.string, PropTypes.number]); + const Col = React.createClass({ propTypes: { - span: React.PropTypes.string, - order: React.PropTypes.string, - offset: React.PropTypes.string, - push: React.PropTypes.string, - pull: React.PropTypes.string, - className: React.PropTypes.string, - children: React.PropTypes.node, + span: stringOrNumber, + order: stringOrNumber, + offset: stringOrNumber, + push: stringOrNumber, + pull: stringOrNumber, + className: PropTypes.string, + children: PropTypes.node, }, render() { const { span, order, offset, push, pull, className, ...others } = this.props; @@ -19,7 +21,7 @@ const Col = React.createClass({ [`col-offset-${offset}`]: offset, [`col-push-${push}`]: push, [`col-pull-${pull}`]: pull, - [className]: className, + [className]: !!className, }); return
{ this.props.children }
; }, diff --git a/components/layout/demo/gutter.md b/components/layout/demo/gutter.md index acd982c13a..345d2b8bb5 100644 --- a/components/layout/demo/gutter.md +++ b/components/layout/demo/gutter.md @@ -2,7 +2,7 @@ - order: 1 -栅格常常需要和间隔进行配合，我们推荐使用 `(16+8n)px` 作为栅格间隔。 +栅格常常需要和间隔进行配合，你可以使用 `Row` 的 `gutter` 属性，我们推荐使用 `(16+8n)px` 作为栅格间隔。 --- diff --git a/components/layout/demo/responsive.md b/components/layout/demo/responsive.md deleted file mode 100644 index efb9335e22..0000000000 --- a/components/layout/demo/responsive.md +++ /dev/null @@ -1,30 +0,0 @@ -# 响应式 - -- order: 7 - -支持 xs、sm、md、lg 四种屏幕大小的响应式设计配置。 - ---- - -````jsx -import { Row, Col } from 'antd'; - -ReactDOM.render( -
- - -
col
- - -
col
- - -
col
- - -
col
- - -
-, mountNode); -```` diff --git a/components/layout/index.md b/components/layout/index.md index 9ac8ed9e81..e4095979f5 100644 --- a/components/layout/index.md +++ b/components/layout/index.md @@ -79,6 +79,32 @@ Flex 布局是基于 24 栅格来定义每一个『盒子』的宽度，但排版则不拘泥于栅格。 +## API + +Ant Design 的布局组件暂不支持响应式设计和元素对齐等特性，若不能满足你的需求，你可以直接使用社区的优秀布局组件： + +- [react-flexbox-grid](http://roylee0704.github.io/react-flexbox-grid/) +- [react-blocks](http://whoisandie.github.io/react-blocks/) + +### Row + +| 成员 | 说明 | 类型 | 默认值 | +|------------|-----------------|--------------------|-------------| +| gutter | 栅格间隔 | number | 0 | +| type | 布局模式，可选 `flex`，现代浏览器下有效 | string | | +| align | flex 布局下的垂直对齐方式：`top` `middle` `bottom` | string | `top` | +| justify | flex 布局下的水平排列方式：`start` `end` `center` `space-around` `space-between` | string | `start` | + +### Col + +| 成员 | 说明 | 类型 | 默认值 | +|------------|-----------------|--------------------|-------------| +| span | 栅格占位格数 | number | 0 | +| order | 栅格顺序，`flex` 布局模式下有效 | number | 0 | +| offset | 栅格左侧的间隔格数，间隔内不可以有栅格 | number | 0 | +| push | 栅格向右移动格数 | number | 0 | +| pull | 栅格向左移动格数 | number | 0 | +