From bf25bfe4887db88851b9a735efe3a1e9e11dae64 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 7 Mar 2016 21:03:17 +0800 Subject: [PATCH] reponsive layout --- components/layout/col.jsx | 29 ++++++++++++++++++-- components/layout/demo/reponsive-more.md | 21 +++++++++++++++ components/layout/demo/reponsive.md | 19 +++++++++++++ components/layout/index.md | 2 +- style/core/layouts.less | 34 ++++++++++++++++++++++++ style/mixins/grid.less | 22 +++++++-------- 6 files changed, 113 insertions(+), 14 deletions(-) create mode 100644 components/layout/demo/reponsive-more.md create mode 100644 components/layout/demo/reponsive.md diff --git a/components/layout/col.jsx b/components/layout/col.jsx index c932119703..56691d36b6 100644 --- a/components/layout/col.jsx +++ b/components/layout/col.jsx @@ -2,6 +2,7 @@ import React, { PropTypes } from 'react'; import classNames from 'classnames'; const stringOrNumber = PropTypes.oneOfType([PropTypes.string, PropTypes.number]); +const objectOrNumber = PropTypes.oneOfType([PropTypes.object, PropTypes.number]); const Col = React.createClass({ propTypes: { @@ -12,9 +13,31 @@ const Col = React.createClass({ pull: stringOrNumber, className: PropTypes.string, children: PropTypes.node, + xs: objectOrNumber, + sm: objectOrNumber, + md: objectOrNumber, + lg: objectOrNumber, }, render() { - const { span, order, offset, push, pull, className, ...others } = this.props; + const props = this.props; + const { span, order, offset, push, pull, className, children, ...others } = props; + let sizeClassObj = {}; + ['xs', 'sm', 'md', 'lg'].forEach(size => { + let sizeProps = {}; + if (typeof props[size] === 'number') { + sizeProps.span = props[size]; + } else if (typeof props[size] === 'object') { + sizeProps = props[size] || {}; + } + sizeClassObj = { + ...sizeClassObj, + [`col-${size}-${sizeProps.span}`]: sizeProps.span, + [`col-${size}-order-${sizeProps.order}`]: sizeProps.order, + [`col-${size}-offset-${sizeProps.offset}`]: sizeProps.offset, + [`col-${size}-push-${sizeProps.push}`]: sizeProps.push, + [`col-${size}-pull-${sizeProps.pull}`]: sizeProps.pull, + }; + }); const classes = classNames({ [`col-${span}`]: span, [`col-order-${order}`]: order, @@ -22,8 +45,10 @@ const Col = React.createClass({ [`col-push-${push}`]: push, [`col-pull-${pull}`]: pull, [className]: !!className, + ...sizeClassObj, }); - return
{ this.props.children }
; + + return
{children}
; }, }); diff --git a/components/layout/demo/reponsive-more.md b/components/layout/demo/reponsive-more.md new file mode 100644 index 0000000000..7ca794e79f --- /dev/null +++ b/components/layout/demo/reponsive-more.md @@ -0,0 +1,21 @@ +# 其他属性的响应式 + +- order: 8 + +`span` `pull` `push` `offset` `order` 属性可以通过内嵌到 `xs` `sm` `md` `lg` 属性中来使用。 + +其中 `xs={6}` 相当于 `xs={{ span: 6 }}`。 + +--- + +````jsx +import { Row, Col } from 'antd'; + +ReactDOM.render( + + + + + +, mountNode); +```` diff --git a/components/layout/demo/reponsive.md b/components/layout/demo/reponsive.md new file mode 100644 index 0000000000..a6d39b262e --- /dev/null +++ b/components/layout/demo/reponsive.md @@ -0,0 +1,19 @@ +# 响应式布局 + +- order: 7 + +参照 Bootstrap 的[响应式设计](http://getbootstrap.com/css/#grid-media-queries)，预设四个响应尺寸：`xs` `sm` `md` `lg`。 + +--- + +````jsx +import { Row, Col } from 'antd'; + +ReactDOM.render( + + + + + +, mountNode); +```` diff --git a/components/layout/index.md b/components/layout/index.md index e4095979f5..692638246c 100644 --- a/components/layout/index.md +++ b/components/layout/index.md @@ -81,7 +81,7 @@ Flex 布局是基于 24 栅格来定义每一个『盒子』的宽度，但排 ## API -Ant Design 的布局组件暂不支持响应式设计和元素对齐等特性，若不能满足你的需求，你可以直接使用社区的优秀布局组件： +Ant Design 的布局组件若不能满足你的需求，你也可以直接使用社区的优秀布局组件： - [react-flexbox-grid](http://roylee0704.github.io/react-flexbox-grid/) - [react-blocks](http://whoisandie.github.io/react-blocks/) diff --git a/style/core/layouts.less b/style/core/layouts.less index 6193872fbd..b9f37edd02 100644 --- a/style/core/layouts.less +++ b/style/core/layouts.less @@ -64,3 +64,37 @@ .make-grid-columns(); .make-grid(); + +// Extra small grid +// +// Columns, offsets, pushes, and pulls for extra small devices like +// smartphones. + +.make-grid(-xs); + +// Small grid +// +// Columns, offsets, pushes, and pulls for the small device range, from phones +// to tablets. + +@media (min-width: @screen-sm-min) { + .make-grid(-sm); +} + + +// Medium grid +// +// Columns, offsets, pushes, and pulls for the desktop device range. + +@media (min-width: @screen-md-min) { + .make-grid(-md); +} + + +// Large grid +// +// Columns, offsets, pushes, and pulls for the large desktop device range. + +@media (min-width: @screen-lg-min) { + .make-grid(-lg); +} diff --git a/style/mixins/grid.less b/style/mixins/grid.less index 302e936636..ae825e891c 100644 --- a/style/mixins/grid.less +++ b/style/mixins/grid.less @@ -10,11 +10,11 @@ .make-grid-columns() { .col(@index) { - @item: ~".col-@{index}"; + @item: ~".col-@{index}, .col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}"; .col((@index + 1), @item); } .col(@index, @list) when (@index =< @grid-columns) { - @item: ~".col-@{index}"; + @item: ~".col-@{index}, .col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}"; .col((@index + 1), ~"@{list}, @{item}"); } .col(@index, @list) when (@index > @grid-columns) { @@ -30,23 +30,23 @@ .col(1); } -.loop-grid-columns(@index) when (@index > 0) { - .col-@{index} { +.loop-grid-columns(@index, @class) when (@index > 0) { + .col@{class}-@{index} { width: percentage((@index / @grid-columns)); } - .col-push-@{index} { + .col@{class}-push-@{index} { left: percentage((@index / @grid-columns)); } - .col-pull-@{index} { + .col@{class}-pull-@{index} { right: percentage((@index / @grid-columns)); } - .col-offset-@{index} { + .col@{class}-offset-@{index} { margin-left: percentage((@index / @grid-columns)); } - .col-order-@{index} { + .col@{class}-order-@{index} { order: @index; } - .loop-grid-columns((@index - 1)); + .loop-grid-columns((@index - 1), @class); } .loop-grid-columns(@index) when (@index = 0) { @@ -58,6 +58,6 @@ } } -.make-grid() { - .loop-grid-columns(@grid-columns); +.make-grid(@class: ~'') { + .loop-grid-columns(@grid-columns, @class); }