mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 06:03:38 +08:00
Code Issues Actions 29 Packages Projects Releases Wiki Activity

Improve Layout demo style

Browse Source 
learn from https://www.iviewui.com/components/layout
This commit is contained in:
afc163 2016-09-30 14:24:41 +08:00
parent 73986289b7
commit 36e50ed794
9 changed files with 82 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -22,26 +22,26 @@ ReactDOM.render(
<div> <div>
<p>Align Top</p> <p>Align Top</p>
<Row type="flex" justify="center" align="top"> <Row type="flex" justify="center" align="top">
<Col span={4}><DemoBox value={100}>.ant-col-4</DemoBox></Col> <Col span={4}><DemoBox value={100}>col-4</DemoBox></Col>
<Col span={4}><DemoBox value={50}>.ant-col-4</DemoBox></Col> <Col span={4}><DemoBox value={50}>col-4</DemoBox></Col>
<Col span={4}><DemoBox value={120}>.ant-col-4</DemoBox></Col> <Col span={4}><DemoBox value={120}>col-4</DemoBox></Col>
<Col span={4}><DemoBox value={80}>.ant-col-4</DemoBox></Col> <Col span={4}><DemoBox value={80}>col-4</DemoBox></Col>
</Row> </Row>
<p>Align Center</p> <p>Align Center</p>
<Row type="flex" justify="space-around" align="middle"> <Row type="flex" justify="space-around" align="middle">
<Col span={4}><DemoBox value={100}>.ant-col-4</DemoBox></Col> <Col span={4}><DemoBox value={100}>col-4</DemoBox></Col>
<Col span={4}><DemoBox value={50}>.ant-col-4</DemoBox></Col> <Col span={4}><DemoBox value={50}>col-4</DemoBox></Col>
<Col span={4}><DemoBox value={120}>.ant-col-4</DemoBox></Col> <Col span={4}><DemoBox value={120}>col-4</DemoBox></Col>
<Col span={4}><DemoBox value={80}>.ant-col-4</DemoBox></Col> <Col span={4}><DemoBox value={80}>col-4</DemoBox></Col>
</Row> </Row>
<p>Align Bottom</p> <p>Align Bottom</p>
<Row type="flex" justify="space-between" align="bottom"> <Row type="flex" justify="space-between" align="bottom">
<Col span={4}><DemoBox value={100}>.ant-col-4</DemoBox></Col> <Col span={4}><DemoBox value={100}>col-4</DemoBox></Col>
<Col span={4}><DemoBox value={50}>.ant-col-4</DemoBox></Col> <Col span={4}><DemoBox value={50}>col-4</DemoBox></Col>
<Col span={4}><DemoBox value={120}>.ant-col-4</DemoBox></Col> <Col span={4}><DemoBox value={120}>col-4</DemoBox></Col>
<Col span={4}><DemoBox value={80}>.ant-col-4</DemoBox></Col> <Col span={4}><DemoBox value={80}>col-4</DemoBox></Col>
</Row> </Row>
</div>, </div>,
mountNode mountNode

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

@ -1,6 +1,6 @@
--- ---
order: 4 order: 4
title: title:
zh-CN: Flex 布局 zh-CN: Flex 布局
en-US: Flex Layout en-US: Flex Layout
--- ---
@ -22,42 +22,42 @@ ReactDOM.render(
<div> <div>
<p>sub-element align left</p> <p>sub-element align left</p>
<Row type="flex" justify="start"> <Row type="flex" justify="start">
<Col span={4}>.ant-col-4</Col> <Col span={4}>col-4</Col>
<Col span={4}>.ant-col-4</Col> <Col span={4}>col-4</Col>
<Col span={4}>.ant-col-4</Col> <Col span={4}>col-4</Col>
<Col span={4}>.ant-col-4</Col> <Col span={4}>col-4</Col>
</Row> </Row>
<p>sub-element align center</p> <p>sub-element align center</p>
<Row type="flex" justify="center"> <Row type="flex" justify="center">
<Col span={4}>.ant-col-4</Col> <Col span={4}>col-4</Col>
<Col span={4}>.ant-col-4</Col> <Col span={4}>col-4</Col>
<Col span={4}>.ant-col-4</Col> <Col span={4}>col-4</Col>
<Col span={4}>.ant-col-4</Col> <Col span={4}>col-4</Col>
</Row> </Row>
<p>sub-element align right</p> <p>sub-element align right</p>
<Row type="flex" justify="end"> <Row type="flex" justify="end">
<Col span={4}>.ant-col-4</Col> <Col span={4}>col-4</Col>
<Col span={4}>.ant-col-4</Col> <Col span={4}>col-4</Col>
<Col span={4}>.ant-col-4</Col> <Col span={4}>col-4</Col>
<Col span={4}>.ant-col-4</Col> <Col span={4}>col-4</Col>
</Row> </Row>
<p>sub-element monospaced arrangement</p> <p>sub-element monospaced arrangement</p>
<Row type="flex" justify="space-between"> <Row type="flex" justify="space-between">
<Col span={4}>.ant-col-4</Col> <Col span={4}>col-4</Col>
<Col span={4}>.ant-col-4</Col> <Col span={4}>col-4</Col>
<Col span={4}>.ant-col-4</Col> <Col span={4}>col-4</Col>
<Col span={4}>.ant-col-4</Col> <Col span={4}>col-4</Col>
</Row> </Row>
<p>sub-element align full</p> <p>sub-element align full</p>
<Row type="flex" justify="space-around"> <Row type="flex" justify="space-around">
<Col span={4}>.ant-col-4</Col> <Col span={4}>col-4</Col>
<Col span={4}>.ant-col-4</Col> <Col span={4}>col-4</Col>
<Col span={4}>.ant-col-4</Col> <Col span={4}>col-4</Col>
<Col span={4}>.ant-col-4</Col> <Col span={4}>col-4</Col>
</Row> </Row>
</div>, </div>,
mountNode mountNode

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

@ -1,8 +1,8 @@
--- ---
order: 1 order: 1
title: title:
zh-CN: 区块间隔 zh-CN: 区块间隔
en-US: Block Interval en-US: Grid Gutter
--- ---
## zh-CN ## zh-CN
@ -11,7 +11,7 @@ title:
## en-US ## en-US
Raster intervals and often need to cooperate, you can use the `gutter`` Row` property, we recommend using `(16 + 8n) px` as grid spacing. You can use the `gutter` property of `Row` as grid spacing, we recommend set it to `(16 + 8n) px`.
````jsx ````jsx
import { Row, Col } from 'antd'; import { Row, Col } from 'antd';
@ -20,16 +20,16 @@ ReactDOM.render(
<div className="gutter-example"> <div className="gutter-example">
<Row gutter={16}> <Row gutter={16}>
<Col className="gutter-row" span={6}> <Col className="gutter-row" span={6}>
<div className="gutter-box">.ant-col-6</div> <div className="gutter-box">col-6</div>
</Col> </Col>
<Col className="gutter-row" span={6}> <Col className="gutter-row" span={6}>
<div className="gutter-box">.ant-col-6</div> <div className="gutter-box">col-6</div>
</Col> </Col>
<Col className="gutter-row" span={6}> <Col className="gutter-row" span={6}>
<div className="gutter-box">.ant-col-6</div> <div className="gutter-box">col-6</div>
</Col> </Col>
<Col className="gutter-row" span={6}> <Col className="gutter-row" span={6}>
<div className="gutter-box">.ant-col-6</div> <div className="gutter-box">col-6</div>
</Col> </Col>
</Row> </Row>
</div> </div>
@ -42,9 +42,6 @@ ReactDOM.render(
border: 0; border: 0;
} }
.gutter-box { .gutter-box {
background: #2db7f5; background: #00A0E9;
height: 80px;
line-height: 80px;
border-radius: 6px;
} }
```` ````

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

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

8
components/layout/demo/reponsive-more.md
View File

@ -1,6 +1,6 @@
--- ---
order: 8 order: 8
title: title:
zh-CN: 其他属性的响应式 zh-CN: 其他属性的响应式
en-US: More responsive en-US: More responsive
--- ---
@ -21,9 +21,9 @@ import { Row, Col } from 'antd';
ReactDOM.render( ReactDOM.render(
<Row> <Row>
<Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }} /> <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}>Col</Col>
<Col xs={{ span: 11, offset: 1 }} lg={{ span: 6, offset: 2 }} /> <Col xs={{ span: 11, offset: 1 }} lg={{ span: 6, offset: 2 }}>Col</Col>
<Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }} /> <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}>Col</Col>
</Row> </Row>
, mountNode); , mountNode);
```` ````

8
components/layout/demo/reponsive.md
View File

@ -1,6 +1,6 @@
--- ---
order: 7 order: 7
title: title:
zh-CN: 响应式布局 zh-CN: 响应式布局
en-US: Responsive en-US: Responsive
--- ---
@ -18,9 +18,9 @@ import { Row, Col } from 'antd';
ReactDOM.render( ReactDOM.render(
<Row> <Row>
<Col xs={2} sm={4} md={6} lg={8} /> <Col xs={2} sm={4} md={6} lg={8}>Col</Col>
<Col xs={20} sm={16} md={12} lg={8} /> <Col xs={20} sm={16} md={12} lg={8}>Col</Col>
<Col xs={2} sm={4} md={6} lg={8} /> <Col xs={2} sm={4} md={6} lg={8}>Col</Col>
</Row> </Row>
, mountNode); , mountNode);
```` ````

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

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

26
site/theme/static/markdown.less
View File

@ -213,6 +213,7 @@
.code-box-demo .demo-row { .code-box-demo .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%); 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; overflow: hidden;
margin-bottom: 8px;
} }
.ant-row-flex, .ant-row-flex,
.code-box-demo .ant-row-flex { .code-box-demo .ant-row-flex {
@ -224,21 +225,24 @@
.code-box-demo .ant-row-flex > div { .code-box-demo .ant-row-flex > div {
padding: 5px 0; padding: 5px 0;
text-align: center; text-align: center;
border-radius: 6px; border-radius: 0;
min-height: 30px; min-height: 30px;
margin-top: 10px; margin-top: 8px;
margin-bottom: 10px; margin-bottom: 8px;
color: #fff; color: #fff;
} }
.code-box-demo .ant-row > div:not(.gutter-row), .code-box-demo .ant-row > div:not(.gutter-row),
.code-box-demo .ant-row-flex > div:not(.gutter-row) { .code-box-demo .ant-row-flex > div:not(.gutter-row) {
background: #6AC2F5; background: #00A0E9;
border: 1px solid rgba(0, 0, 0, 0.1); padding: 16px 0;
&:nth-child(2n+1) {
background: fade(#00A0E9, 70%);
}
} }
.ant-row .demo-col, .ant-row .demo-col,
.code-box-demo .ant-row .demo-col { .code-box-demo .ant-row .demo-col {
text-align: center; text-align: center;
padding: 40px 0; padding: 30px 0;
color: #fff; color: #fff;
font-size: 18px; font-size: 18px;
border: none; border: none;
@ -247,11 +251,11 @@
} }
.ant-row .demo-col-1, .ant-row .demo-col-1,
.ant-row .demo-col-1 { .ant-row .demo-col-1 {
background: rgba(29, 128, 211, 0.7); background: fade(#00A0E9, 70%);
} }
.ant-row .demo-col-2, .ant-row .demo-col-2,
.code-box-demo .ant-row .demo-col-2 { .code-box-demo .ant-row .demo-col-2 {
background: rgba(29, 128, 211, 0.5); background: fade(#00A0E9, 50%);
} }
.ant-row .demo-col-3, .ant-row .demo-col-3,
.code-box-demo .ant-row .demo-col-3{ .code-box-demo .ant-row .demo-col-3{
@ -260,7 +264,7 @@
} }
.ant-row .demo-col-4, .ant-row .demo-col-4,
.code-box-demo .ant-row .demo-col-4 { .code-box-demo .ant-row .demo-col-4 {
background: rgba(29, 128, 211, 0.6); background: fade(#00A0E9, 60%);
} }
.ant-row .demo-col-5, .ant-row .demo-col-5,
.code-box-demo .ant-row .demo-col-5 { .code-box-demo .ant-row .demo-col-5 {
@ -269,15 +273,19 @@
} }
.code-box-demo .height-100 { .code-box-demo .height-100 {
height: 100px; height: 100px;
line-height: 100px;
} }
.code-box-demo .height-50 { .code-box-demo .height-50 {
height: 50px; height: 50px;
line-height: 50px;
} }
.code-box-demo .height-120 { .code-box-demo .height-120 {
height: 120px; height: 120px;
line-height: 120px;
} }
.code-box-demo .height-80 { .code-box-demo .height-80 {
height: 80px; height: 80px;
line-height: 80px;
} }
} }