mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-28 05:05:48 +08:00
Code Issues Actions 43 Packages Projects Releases Wiki Activity

update layout demo style

Browse Source
This commit is contained in:
afc163 2016-02-25 15:53:28 +08:00
parent 38f98fa1ee
commit b4d4fb4d4a
9 changed files with 91 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
components/layout/demo/basic.md
View File

@ -1,6 +1,6 @@
# 基础布局
- order: 1
- order: 0
从堆叠到水平排列。
@ -14,19 +14,19 @@ import { Row, Col } from 'antd';
ReactDOM.render(
<div>
<Row>
<Col span="12">.col-12</Col>
<Col span="12">.col-12</Col>
<Col span={12}>.col-12</Col>
<Col span={12}>.col-12</Col>
</Row>
<Row>
<Col span="8">.col-8</Col>
<Col span="8">.col-8</Col>
<Col span="8">.col-8</Col>
<Col span={8}>.col-8</Col>
<Col span={8}>.col-8</Col>
<Col span={8}>.col-8</Col>
</Row>
<Row>
<Col span="6">.col-6</Col>
<Col span="6">.col-6</Col>
<Col span="6">.col-6</Col>
<Col span="6">.col-6</Col>
<Col span={6}>.col-6</Col>
<Col span={6}>.col-6</Col>
<Col span={6}>.col-6</Col>
<Col span={6}>.col-6</Col>
</Row>
</div>,
mountNode

24
components/layout/demo/flex-align.md
View File

@ -24,26 +24,26 @@ ReactDOM.render(
<div>
<p>顶部对齐</p>
<Row type="flex" justify="center" align="top">
<Col span="4"><DemoBox value="100">.col-4</DemoBox></Col>
<Col span="4"><DemoBox value="50">.col-4</DemoBox></Col>
<Col span="4"><DemoBox value="120">.col-4</DemoBox></Col>
<Col span="4"><DemoBox value="80">.col-4</DemoBox></Col>
<Col span={4}><DemoBox value={100}>.col-4</DemoBox></Col>
<Col span={4}><DemoBox value={50}>.col-4</DemoBox></Col>
<Col span={4}><DemoBox value={120}>.col-4</DemoBox></Col>
<Col span={4}><DemoBox value={80}>.col-4</DemoBox></Col>
</Row>
<p>居中对齐</p>
<Row type="flex" justify="space-around" align="middle">
<Col span="4"><DemoBox value="100">.col-4</DemoBox></Col>
<Col span="4"><DemoBox value="50">.col-4</DemoBox></Col>
<Col span="4"><DemoBox value="120">.col-4</DemoBox></Col>
<Col span="4"><DemoBox value="80">.col-4</DemoBox></Col>
<Col span={4}><DemoBox value={100}>.col-4</DemoBox></Col>
<Col span={4}><DemoBox value={50}>.col-4</DemoBox></Col>
<Col span={4}><DemoBox value={120}>.col-4</DemoBox></Col>
<Col span={4}><DemoBox value={80}>.col-4</DemoBox></Col>
</Row>
<p>底部对齐</p>
<Row type="flex" justify="space-between" align="bottom">
<Col span="4"><DemoBox value="100">.col-4</DemoBox></Col>
<Col span="4"><DemoBox value="50">.col-4</DemoBox></Col>
<Col span="4"><DemoBox value="120">.col-4</DemoBox></Col>
<Col span="4"><DemoBox value="80">.col-4</DemoBox></Col>
<Col span={4}><DemoBox value={100}>.col-4</DemoBox></Col>
<Col span={4}><DemoBox value={50}>.col-4</DemoBox></Col>
<Col span={4}><DemoBox value={120}>.col-4</DemoBox></Col>
<Col span={4}><DemoBox value={80}>.col-4</DemoBox></Col>
</Row>
</div>,
mountNode

8
components/layout/demo/flex-order.md
View File

@ -14,10 +14,10 @@ import { Row, Col } from 'antd';
ReactDOM.render(
<div>
<Row type="flex">
<Col span="6" order="4">1 col-order-4</Col>
<Col span="6" order="3">2 col-order-3</Col>
<Col span="6" order="2">3 col-order-2</Col>
<Col span="6" order="1">4 col-order-1</Col>
<Col span={6} order={4}>1 col-order-4</Col>
<Col span={6} order={3}>2 col-order-3</Col>
<Col span={6} order={2}>3 col-order-2</Col>
<Col span={6} order={1}>4 col-order-1</Col>
</Row>
</div>,
mountNode

40
components/layout/demo/flex.md
View File

@ -15,42 +15,42 @@ ReactDOM.render(
<div>
<p>子元素居左排列</p>
<Row type="flex" justify="start">
<Col span="4">.col-4</Col>
<Col span="4">.col-4</Col>
<Col span="4">.col-4</Col>
<Col span="4">.col-4</Col>
<Col span={4}>.col-4</Col>
<Col span={4}>.col-4</Col>
<Col span={4}>.col-4</Col>
<Col span={4}>.col-4</Col>
</Row>
<p>子元素居中排列</p>
<Row type="flex" justify="center">
<Col span="4">.col-4</Col>
<Col span="4">.col-4</Col>
<Col span="4">.col-4</Col>
<Col span="4">.col-4</Col>
<Col span={4}>.col-4</Col>
<Col span={4}>.col-4</Col>
<Col span={4}>.col-4</Col>
<Col span={4}>.col-4</Col>
</Row>
<p>子元素居右排列</p>
<Row type="flex" justify="end">
<Col span="4">.col-4</Col>
<Col span="4">.col-4</Col>
<Col span="4">.col-4</Col>
<Col span="4">.col-4</Col>
<Col span={4}>.col-4</Col>
<Col span={4}>.col-4</Col>
<Col span={4}>.col-4</Col>
<Col span={4}>.col-4</Col>
</Row>
<p>子元素等宽排列</p>
<Row type="flex" justify="space-between">
<Col span="4">.col-4</Col>
<Col span="4">.col-4</Col>
<Col span="4">.col-4</Col>
<Col span="4">.col-4</Col>
<Col span={4}>.col-4</Col>
<Col span={4}>.col-4</Col>
<Col span={4}>.col-4</Col>
<Col span={4}>.col-4</Col>
</Row>
<p>子元素分散对齐</p>
<Row type="flex" justify="space-around">
<Col span="4">.col-4</Col>
<Col span="4">.col-4</Col>
<Col span="4">.col-4</Col>
<Col span="4">.col-4</Col>
<Col span={4}>.col-4</Col>
<Col span={4}>.col-4</Col>
<Col span={4}>.col-4</Col>
<Col span={4}>.col-4</Col>
</Row>
</div>,
mountNode

15
components/layout/demo/gutter.md
View File

@ -1,8 +1,8 @@
# 区块间隔
- order: 6
- order: 1
栅格常常需要和间隔进行配置，我们推荐使用 `(16+8n)px` 作为栅格间隔。
栅格常常需要和间隔进行配合，我们推荐使用 `(16+8n)px` 作为栅格间隔。
---
@ -12,16 +12,16 @@ import { Row, Col } from 'antd';
ReactDOM.render(
<div className="gutter-example">
<Row gutter={16}>
<Col span="6">
<Col span={6}>
<div className="gutter-box">.col-6</div>
</Col>
<Col span="6">
<Col span={6}>
<div className="gutter-box">.col-6</div>
</Col>
<Col span="6">
<Col span={6}>
<div className="gutter-box">.col-6</div>
</Col>
<Col span="6">
<Col span={6}>
<div className="gutter-box">.col-6</div>
</Col>
</Row>
@ -30,9 +30,6 @@ ReactDOM.render(
````
````css
.gutter-example {
background: #f4f4f4;
}
.gutter-example .row > div {
background: transparent;
border: 0;

10
components/layout/demo/offset.md
View File

@ -14,15 +14,15 @@ import { Row, Col } from 'antd';
ReactDOM.render(
<div>
<Row>
<Col span="8">.col-8</Col>
<Col span="8" offset="8">.col-8</Col>
<Col span={8}>.col-8</Col>
<Col span={8} offset={8}>.col-8</Col>
</Row>
<Row>
<Col span="6" offset="6">.col-6 .col-offset-6</Col>
<Col span="6" offset="6">.col-6 .col-offset-6</Col>
<Col span={6} offset={6}>.col-6 .col-offset-6</Col>
<Col span={6} offset={6}>.col-6 .col-offset-6</Col>
</Row>
<Row>
<Col span="12" offset="6">.col-12 .col-offset-6</Col>
<Col span={12} offset={6}>.col-12 .col-offset-6</Col>
</Row>
</div>,
mountNode

30
components/layout/demo/responsive.md Normal file
View File

@ -0,0 +1,30 @@
# 响应式
- order: 7
支持 xs、sm、md、lg 四种屏幕大小的响应式设计配置。
---
````jsx
import { Row, Col } from 'antd';
ReactDOM.render(
<div className="gutter-example">
<Row gutter={16}>
<Col xs={0} xs={2} xs={4} lg={6}>
<div className="gutter-box">col</div>
</Col>
<Col xs={12} xs={10} xs={8} lg={6}>
<div className="gutter-box">col</div>
</Col>
<Col xs={12} xs={10} xs={8} lg={6}>
<div className="gutter-box">col</div>
</Col>
<Col xs={0} xs={10} xs={4} lg={6}>
<div className="gutter-box">col</div>
</Col>
</Row>
</div>
, mountNode);
````

4
components/layout/demo/sort.md
View File

@ -14,8 +14,8 @@ import { Row, Col } from 'antd';
ReactDOM.render(
<div>
<Row>
<Col span="18" push="6">.col-18 .col-push-6</Col>
<Col span="6" pull="18">.col-6 .col-pull-18</Col>
<Col span={18} push={6}>.col-18 .col-push-6</Col>
<Col span={6} pull={18}>.col-6 .col-pull-18</Col>
</Row>
</div>,
mountNode

4
style/core/layouts.less
View File

@ -68,12 +68,12 @@
// 居中对齐
.row-flex-middle {
align-items: center;
align-items: center;
}
// 底部对齐
.row-flex-bottom {
align-items: flex-end;
align-items: flex-end;
}
.col {