mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 06:03:38 +08:00
Improve Layout demo style
learn from https://www.iviewui.com/components/layout
This commit is contained in:
afc163
parent
73986289b7
commit
36e50ed794
@ -23,19 +23,19 @@ import { Row, Col } from 'antd';
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<Row>
|
||||
<Col span={12}>.ant-col-12</Col>
|
||||
<Col span={12}>.ant-col-12</Col>
|
||||
<Col span={12}>col-12</Col>
|
||||
<Col span={12}>col-12</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col span={8}>.ant-col-8</Col>
|
||||
<Col span={8}>.ant-col-8</Col>
|
||||
<Col span={8}>.ant-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}>.ant-col-6</Col>
|
||||
<Col span={6}>.ant-col-6</Col>
|
||||
<Col span={6}>.ant-col-6</Col>
|
||||
<Col span={6}>.ant-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
|
||||
|
||||
@ -22,26 +22,26 @@ ReactDOM.render(
|
||||
<div>
|
||||
<p>Align Top</p>
|
||||
<Row type="flex" justify="center" align="top">
|
||||
<Col span={4}><DemoBox value={100}>.ant-col-4</DemoBox></Col>
|
||||
<Col span={4}><DemoBox value={50}>.ant-col-4</DemoBox></Col>
|
||||
<Col span={4}><DemoBox value={120}>.ant-col-4</DemoBox></Col>
|
||||
<Col span={4}><DemoBox value={80}>.ant-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>Align Center</p>
|
||||
<Row type="flex" justify="space-around" align="middle">
|
||||
<Col span={4}><DemoBox value={100}>.ant-col-4</DemoBox></Col>
|
||||
<Col span={4}><DemoBox value={50}>.ant-col-4</DemoBox></Col>
|
||||
<Col span={4}><DemoBox value={120}>.ant-col-4</DemoBox></Col>
|
||||
<Col span={4}><DemoBox value={80}>.ant-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>Align Bottom</p>
|
||||
<Row type="flex" justify="space-between" align="bottom">
|
||||
<Col span={4}><DemoBox value={100}>.ant-col-4</DemoBox></Col>
|
||||
<Col span={4}><DemoBox value={50}>.ant-col-4</DemoBox></Col>
|
||||
<Col span={4}><DemoBox value={120}>.ant-col-4</DemoBox></Col>
|
||||
<Col span={4}><DemoBox value={80}>.ant-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
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
order: 4
|
||||
title:
|
||||
title:
|
||||
zh-CN: Flex 布局
|
||||
en-US: Flex Layout
|
||||
---
|
||||
@ -22,42 +22,42 @@ ReactDOM.render(
|
||||
<div>
|
||||
<p>sub-element align left</p>
|
||||
<Row type="flex" justify="start">
|
||||
<Col span={4}>.ant-col-4</Col>
|
||||
<Col span={4}>.ant-col-4</Col>
|
||||
<Col span={4}>.ant-col-4</Col>
|
||||
<Col span={4}>.ant-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>sub-element align center</p>
|
||||
<Row type="flex" justify="center">
|
||||
<Col span={4}>.ant-col-4</Col>
|
||||
<Col span={4}>.ant-col-4</Col>
|
||||
<Col span={4}>.ant-col-4</Col>
|
||||
<Col span={4}>.ant-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>sub-element align right</p>
|
||||
<Row type="flex" justify="end">
|
||||
<Col span={4}>.ant-col-4</Col>
|
||||
<Col span={4}>.ant-col-4</Col>
|
||||
<Col span={4}>.ant-col-4</Col>
|
||||
<Col span={4}>.ant-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>sub-element monospaced arrangement</p>
|
||||
<Row type="flex" justify="space-between">
|
||||
<Col span={4}>.ant-col-4</Col>
|
||||
<Col span={4}>.ant-col-4</Col>
|
||||
<Col span={4}>.ant-col-4</Col>
|
||||
<Col span={4}>.ant-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>sub-element align full</p>
|
||||
<Row type="flex" justify="space-around">
|
||||
<Col span={4}>.ant-col-4</Col>
|
||||
<Col span={4}>.ant-col-4</Col>
|
||||
<Col span={4}>.ant-col-4</Col>
|
||||
<Col span={4}>.ant-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
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
---
|
||||
order: 1
|
||||
title:
|
||||
title:
|
||||
zh-CN: 区块间隔
|
||||
en-US: Block Interval
|
||||
en-US: Grid Gutter
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
@ -11,7 +11,7 @@ title:
|
||||
|
||||
## 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
|
||||
import { Row, Col } from 'antd';
|
||||
@ -20,16 +20,16 @@ ReactDOM.render(
|
||||
<div className="gutter-example">
|
||||
<Row gutter={16}>
|
||||
<Col className="gutter-row" span={6}>
|
||||
<div className="gutter-box">.ant-col-6</div>
|
||||
<div className="gutter-box">col-6</div>
|
||||
</Col>
|
||||
<Col className="gutter-row" span={6}>
|
||||
<div className="gutter-box">.ant-col-6</div>
|
||||
<div className="gutter-box">col-6</div>
|
||||
</Col>
|
||||
<Col className="gutter-row" span={6}>
|
||||
<div className="gutter-box">.ant-col-6</div>
|
||||
<div className="gutter-box">col-6</div>
|
||||
</Col>
|
||||
<Col className="gutter-row" span={6}>
|
||||
<div className="gutter-box">.ant-col-6</div>
|
||||
<div className="gutter-box">col-6</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
@ -42,9 +42,6 @@ ReactDOM.render(
|
||||
border: 0;
|
||||
}
|
||||
.gutter-box {
|
||||
background: #2db7f5;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
border-radius: 6px;
|
||||
background: #00A0E9;
|
||||
}
|
||||
````
|
||||
|
||||
@ -24,15 +24,15 @@ import { Row, Col } from 'antd';
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<Row>
|
||||
<Col span={8}>.ant-col-8</Col>
|
||||
<Col span={8} offset={8}>.ant-col-8</Col>
|
||||
<Col span={8}>col-8</Col>
|
||||
<Col span={8} offset={8}>col-8</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col span={6} offset={6}>.ant-col-6 .ant-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>
|
||||
<Col span={6} offset={6}>col-6 col-offset-6</Col>
|
||||
</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>
|
||||
</div>,
|
||||
mountNode
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
order: 8
|
||||
title:
|
||||
title:
|
||||
zh-CN: 其他属性的响应式
|
||||
en-US: More responsive
|
||||
---
|
||||
@ -21,9 +21,9 @@ import { Row, Col } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<Row>
|
||||
<Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }} />
|
||||
<Col xs={{ span: 11, offset: 1 }} lg={{ span: 6, offset: 2 }} />
|
||||
<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</Col>
|
||||
<Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}>Col</Col>
|
||||
</Row>
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
order: 7
|
||||
title:
|
||||
title:
|
||||
zh-CN: 响应式布局
|
||||
en-US: Responsive
|
||||
---
|
||||
@ -18,9 +18,9 @@ import { Row, Col } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<Row>
|
||||
<Col xs={2} sm={4} md={6} lg={8} />
|
||||
<Col xs={20} sm={16} md={12} lg={8} />
|
||||
<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</Col>
|
||||
<Col xs={2} sm={4} md={6} lg={8}>Col</Col>
|
||||
</Row>
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
@ -21,8 +21,8 @@ import { Row, Col } from 'antd';
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<Row>
|
||||
<Col span={18} push={6}>.ant-col-18 .ant-col-push-6</Col>
|
||||
<Col span={6} pull={18}>.ant-col-6 .ant-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
|
||||
|
||||
@ -213,6 +213,7 @@
|
||||
.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%);
|
||||
overflow: hidden;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.ant-row-flex,
|
||||
.code-box-demo .ant-row-flex {
|
||||
@ -224,21 +225,24 @@
|
||||
.code-box-demo .ant-row-flex > div {
|
||||
padding: 5px 0;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
border-radius: 0;
|
||||
min-height: 30px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
color: #fff;
|
||||
}
|
||||
.code-box-demo .ant-row > div:not(.gutter-row),
|
||||
.code-box-demo .ant-row-flex > div:not(.gutter-row) {
|
||||
background: #6AC2F5;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
background: #00A0E9;
|
||||
padding: 16px 0;
|
||||
&:nth-child(2n+1) {
|
||||
background: fade(#00A0E9, 70%);
|
||||
}
|
||||
}
|
||||
.ant-row .demo-col,
|
||||
.code-box-demo .ant-row .demo-col {
|
||||
text-align: center;
|
||||
padding: 40px 0;
|
||||
padding: 30px 0;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
border: none;
|
||||
@ -247,11 +251,11 @@
|
||||
}
|
||||
.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,
|
||||
.code-box-demo .ant-row .demo-col-2 {
|
||||
background: rgba(29, 128, 211, 0.5);
|
||||
background: fade(#00A0E9, 50%);
|
||||
}
|
||||
.ant-row .demo-col-3,
|
||||
.code-box-demo .ant-row .demo-col-3{
|
||||
@ -260,7 +264,7 @@
|
||||
}
|
||||
.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,
|
||||
.code-box-demo .ant-row .demo-col-5 {
|
||||
@ -269,15 +273,19 @@
|
||||
}
|
||||
.code-box-demo .height-100 {
|
||||
height: 100px;
|
||||
line-height: 100px;
|
||||
}
|
||||
.code-box-demo .height-50 {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
.code-box-demo .height-120 {
|
||||
height: 120px;
|
||||
line-height: 120px;
|
||||
}
|
||||
.code-box-demo .height-80 {
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user