mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 09:26:06 +08:00
🎬 Improve Grid demo style (#21625)
This commit is contained in:
偏右
GitHub
parent
928ff9ae69
commit
3c6faa6cb4
@ -1,7 +1,7 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
|
||||
<div>
|
||||
Array [
|
||||
<div
|
||||
class="ant-row"
|
||||
>
|
||||
@ -10,7 +10,7 @@ exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
|
||||
>
|
||||
col
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-row"
|
||||
>
|
||||
@ -24,7 +24,7 @@ exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
|
||||
>
|
||||
col-12
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-row"
|
||||
>
|
||||
@ -43,7 +43,7 @@ exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
|
||||
>
|
||||
col-8
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-row"
|
||||
>
|
||||
@ -67,15 +67,23 @@ exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
|
||||
>
|
||||
col-6
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/grid/demo/flex.md correctly 1`] = `
|
||||
<div>
|
||||
<p>
|
||||
Array [
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
|
||||
role="separator"
|
||||
style="color:#333;font-weight:normal"
|
||||
>
|
||||
<span
|
||||
class="ant-divider-inner-text"
|
||||
>
|
||||
sub-element align left
|
||||
</p>
|
||||
</span>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-row ant-row-start"
|
||||
>
|
||||
@ -99,10 +107,18 @@ exports[`renders ./components/grid/demo/flex.md correctly 1`] = `
|
||||
>
|
||||
col-4
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
|
||||
role="separator"
|
||||
style="color:#333;font-weight:normal"
|
||||
>
|
||||
<span
|
||||
class="ant-divider-inner-text"
|
||||
>
|
||||
sub-element align center
|
||||
</p>
|
||||
</span>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-row ant-row-center"
|
||||
>
|
||||
@ -126,10 +142,18 @@ exports[`renders ./components/grid/demo/flex.md correctly 1`] = `
|
||||
>
|
||||
col-4
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
|
||||
role="separator"
|
||||
style="color:#333;font-weight:normal"
|
||||
>
|
||||
<span
|
||||
class="ant-divider-inner-text"
|
||||
>
|
||||
sub-element align right
|
||||
</p>
|
||||
</span>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-row ant-row-end"
|
||||
>
|
||||
@ -153,10 +177,18 @@ exports[`renders ./components/grid/demo/flex.md correctly 1`] = `
|
||||
>
|
||||
col-4
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
|
||||
role="separator"
|
||||
style="color:#333;font-weight:normal"
|
||||
>
|
||||
<span
|
||||
class="ant-divider-inner-text"
|
||||
>
|
||||
sub-element monospaced arrangement
|
||||
</p>
|
||||
</span>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-row ant-row-space-between"
|
||||
>
|
||||
@ -180,10 +212,18 @@ exports[`renders ./components/grid/demo/flex.md correctly 1`] = `
|
||||
>
|
||||
col-4
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
|
||||
role="separator"
|
||||
style="color:#333;font-weight:normal"
|
||||
>
|
||||
<span
|
||||
class="ant-divider-inner-text"
|
||||
>
|
||||
sub-element align full
|
||||
</p>
|
||||
</span>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-row ant-row-space-around"
|
||||
>
|
||||
@ -207,15 +247,23 @@ exports[`renders ./components/grid/demo/flex.md correctly 1`] = `
|
||||
>
|
||||
col-4
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
|
||||
<div>
|
||||
<p>
|
||||
Array [
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
|
||||
role="separator"
|
||||
style="color:#333;font-weight:normal"
|
||||
>
|
||||
<span
|
||||
class="ant-divider-inner-text"
|
||||
>
|
||||
Align Top
|
||||
</p>
|
||||
</span>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-row ant-row-center ant-row-top"
|
||||
>
|
||||
@ -255,10 +303,18 @@ exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
|
||||
col-4
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
|
||||
role="separator"
|
||||
style="color:#333;font-weight:normal"
|
||||
>
|
||||
<span
|
||||
class="ant-divider-inner-text"
|
||||
>
|
||||
Align Center
|
||||
</p>
|
||||
</span>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-row ant-row-space-around ant-row-middle"
|
||||
>
|
||||
@ -298,10 +354,18 @@ exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
|
||||
col-4
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
|
||||
role="separator"
|
||||
style="color:#333;font-weight:normal"
|
||||
>
|
||||
<span
|
||||
class="ant-divider-inner-text"
|
||||
>
|
||||
Align Bottom
|
||||
</p>
|
||||
</span>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-row ant-row-space-between ant-row-bottom"
|
||||
>
|
||||
@ -341,15 +405,14 @@ exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
|
||||
col-4
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/grid/demo/flex-order.md correctly 1`] = `
|
||||
<div>
|
||||
<div
|
||||
<div
|
||||
class="ant-row"
|
||||
>
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-col-6 ant-col-order-4"
|
||||
>
|
||||
@ -370,15 +433,22 @@ exports[`renders ./components/grid/demo/flex-order.md correctly 1`] = `
|
||||
>
|
||||
4 col-order-1
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/grid/demo/flex-stretch.md correctly 1`] = `
|
||||
<div>
|
||||
<p>
|
||||
Array [
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
|
||||
role="separator"
|
||||
style="color:#333;font-weight:normal"
|
||||
>
|
||||
<span
|
||||
class="ant-divider-inner-text"
|
||||
>
|
||||
Percentage columns
|
||||
</p>
|
||||
</span>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-row"
|
||||
>
|
||||
@ -394,10 +464,18 @@ exports[`renders ./components/grid/demo/flex-stretch.md correctly 1`] = `
|
||||
>
|
||||
3 / 5
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
|
||||
role="separator"
|
||||
style="color:#333;font-weight:normal"
|
||||
>
|
||||
<span
|
||||
class="ant-divider-inner-text"
|
||||
>
|
||||
Fill rest
|
||||
</p>
|
||||
</span>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-row"
|
||||
>
|
||||
@ -413,10 +491,18 @@ exports[`renders ./components/grid/demo/flex-stretch.md correctly 1`] = `
|
||||
>
|
||||
Fill Rest
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
|
||||
role="separator"
|
||||
style="color:#333;font-weight:normal"
|
||||
>
|
||||
<span
|
||||
class="ant-divider-inner-text"
|
||||
>
|
||||
Raw flex style
|
||||
</p>
|
||||
</span>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-row"
|
||||
>
|
||||
@ -432,14 +518,23 @@ exports[`renders ./components/grid/demo/flex-stretch.md correctly 1`] = `
|
||||
>
|
||||
0 1 300px
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/grid/demo/gutter.md correctly 1`] = `
|
||||
<div
|
||||
class="gutter-example"
|
||||
>
|
||||
Array [
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
|
||||
role="separator"
|
||||
style="color:#333;font-weight:normal"
|
||||
>
|
||||
<span
|
||||
class="ant-divider-inner-text"
|
||||
>
|
||||
Horizontal
|
||||
</span>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-row"
|
||||
style="margin-left:-8px;margin-right:-8px"
|
||||
@ -449,7 +544,7 @@ exports[`renders ./components/grid/demo/gutter.md correctly 1`] = `
|
||||
style="padding-left:8px;padding-right:8px"
|
||||
>
|
||||
<div
|
||||
class="gutter-box"
|
||||
style="background:#0092ff;padding:8px 0"
|
||||
>
|
||||
col-6
|
||||
</div>
|
||||
@ -459,7 +554,7 @@ exports[`renders ./components/grid/demo/gutter.md correctly 1`] = `
|
||||
style="padding-left:8px;padding-right:8px"
|
||||
>
|
||||
<div
|
||||
class="gutter-box"
|
||||
style="background:#0092ff;padding:8px 0"
|
||||
>
|
||||
col-6
|
||||
</div>
|
||||
@ -469,7 +564,7 @@ exports[`renders ./components/grid/demo/gutter.md correctly 1`] = `
|
||||
style="padding-left:8px;padding-right:8px"
|
||||
>
|
||||
<div
|
||||
class="gutter-box"
|
||||
style="background:#0092ff;padding:8px 0"
|
||||
>
|
||||
col-6
|
||||
</div>
|
||||
@ -479,62 +574,169 @@ exports[`renders ./components/grid/demo/gutter.md correctly 1`] = `
|
||||
style="padding-left:8px;padding-right:8px"
|
||||
>
|
||||
<div
|
||||
class="gutter-box"
|
||||
style="background:#0092ff;padding:8px 0"
|
||||
>
|
||||
col-6
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
|
||||
role="separator"
|
||||
style="color:#333;font-weight:normal"
|
||||
>
|
||||
<span
|
||||
class="ant-divider-inner-text"
|
||||
>
|
||||
Responsive
|
||||
</span>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-row"
|
||||
style="margin-left:-16px;margin-right:-16px;margin-top:-10px;margin-bottom:10px"
|
||||
style="margin-left:-16px;margin-right:-16px"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-col-6 gutter-row"
|
||||
style="padding-left:16px;padding-right:16px;padding-top:10px;padding-bottom:10px"
|
||||
style="padding-left:16px;padding-right:16px"
|
||||
>
|
||||
<div
|
||||
class="gutter-box"
|
||||
style="background:#0092ff;padding:8px 0"
|
||||
>
|
||||
col-6
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-col-6 gutter-row"
|
||||
style="padding-left:16px;padding-right:16px;padding-top:10px;padding-bottom:10px"
|
||||
style="padding-left:16px;padding-right:16px"
|
||||
>
|
||||
<div
|
||||
class="gutter-box"
|
||||
style="background:#0092ff;padding:8px 0"
|
||||
>
|
||||
col-6
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-col-6 gutter-row"
|
||||
style="padding-left:16px;padding-right:16px;padding-top:10px;padding-bottom:10px"
|
||||
style="padding-left:16px;padding-right:16px"
|
||||
>
|
||||
<div
|
||||
class="gutter-box"
|
||||
style="background:#0092ff;padding:8px 0"
|
||||
>
|
||||
col-6
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-col-6 gutter-row"
|
||||
style="padding-left:16px;padding-right:16px;padding-top:10px;padding-bottom:10px"
|
||||
style="padding-left:16px;padding-right:16px"
|
||||
>
|
||||
<div
|
||||
class="gutter-box"
|
||||
style="background:#0092ff;padding:8px 0"
|
||||
>
|
||||
col-6
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
|
||||
role="separator"
|
||||
style="color:#333;font-weight:normal"
|
||||
>
|
||||
<span
|
||||
class="ant-divider-inner-text"
|
||||
>
|
||||
Vertical
|
||||
</span>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-row"
|
||||
style="margin-left:-8px;margin-right:-8px;margin-top:-12px;margin-bottom:12px"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-col-6 gutter-row"
|
||||
style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px"
|
||||
>
|
||||
<div
|
||||
style="background:#0092ff;padding:8px 0"
|
||||
>
|
||||
col-6
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-col-6 gutter-row"
|
||||
style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px"
|
||||
>
|
||||
<div
|
||||
style="background:#0092ff;padding:8px 0"
|
||||
>
|
||||
col-6
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-col-6 gutter-row"
|
||||
style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px"
|
||||
>
|
||||
<div
|
||||
style="background:#0092ff;padding:8px 0"
|
||||
>
|
||||
col-6
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-col-6 gutter-row"
|
||||
style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px"
|
||||
>
|
||||
<div
|
||||
style="background:#0092ff;padding:8px 0"
|
||||
>
|
||||
col-6
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-col-6 gutter-row"
|
||||
style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px"
|
||||
>
|
||||
<div
|
||||
style="background:#0092ff;padding:8px 0"
|
||||
>
|
||||
col-6
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-col-6 gutter-row"
|
||||
style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px"
|
||||
>
|
||||
<div
|
||||
style="background:#0092ff;padding:8px 0"
|
||||
>
|
||||
col-6
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-col-6 gutter-row"
|
||||
style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px"
|
||||
>
|
||||
<div
|
||||
style="background:#0092ff;padding:8px 0"
|
||||
>
|
||||
col-6
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-col-6 gutter-row"
|
||||
style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px"
|
||||
>
|
||||
<div
|
||||
style="background:#0092ff;padding:8px 0"
|
||||
>
|
||||
col-6
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/grid/demo/offset.md correctly 1`] = `
|
||||
<div>
|
||||
Array [
|
||||
<div
|
||||
class="ant-row"
|
||||
>
|
||||
@ -548,7 +750,7 @@ exports[`renders ./components/grid/demo/offset.md correctly 1`] = `
|
||||
>
|
||||
col-8
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-row"
|
||||
>
|
||||
@ -562,7 +764,7 @@ exports[`renders ./components/grid/demo/offset.md correctly 1`] = `
|
||||
>
|
||||
col-6 col-offset-6
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-row"
|
||||
>
|
||||
@ -571,20 +773,17 @@ exports[`renders ./components/grid/demo/offset.md correctly 1`] = `
|
||||
>
|
||||
col-12 col-offset-6
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
|
||||
<div>
|
||||
<div
|
||||
style="margin-bottom:16px"
|
||||
>
|
||||
Array [
|
||||
<span
|
||||
style="margin-right:6px"
|
||||
>
|
||||
Horizontal Gutter (px):
|
||||
</span>
|
||||
</span>,
|
||||
<div
|
||||
style="width:50%"
|
||||
>
|
||||
@ -677,12 +876,12 @@ exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<span
|
||||
style="margin-right:6px"
|
||||
>
|
||||
Vertical Gutter (px):
|
||||
</span>
|
||||
</span>,
|
||||
<div
|
||||
style="width:50%"
|
||||
>
|
||||
@ -775,14 +974,14 @@ exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<span
|
||||
style="margin-right:6px"
|
||||
>
|
||||
Column Count:
|
||||
</span>
|
||||
</span>,
|
||||
<div
|
||||
style="width:50%"
|
||||
style="width:50%;margin-bottom:48px"
|
||||
>
|
||||
<div
|
||||
class="ant-slider ant-slider-with-marks"
|
||||
@ -873,8 +1072,7 @@ exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-row"
|
||||
style="margin-left:-8px;margin-right:-8px;margin-top:-8px;margin-bottom:8px"
|
||||
@ -911,7 +1109,7 @@ exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
|
||||
Column
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-row"
|
||||
style="margin-left:-8px;margin-right:-8px;margin-top:-8px;margin-bottom:8px"
|
||||
@ -948,7 +1146,7 @@ exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
|
||||
Column
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<pre>
|
||||
<Row gutter={[16, 16]}>
|
||||
<Col span={6} />
|
||||
@ -956,7 +1154,7 @@ exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
|
||||
<Col span={6} />
|
||||
<Col span={6} />
|
||||
</Row>
|
||||
</pre>
|
||||
</pre>,
|
||||
<pre>
|
||||
<Row gutter={[16, 16]}>
|
||||
<Col span={6} />
|
||||
@ -964,8 +1162,8 @@ exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
|
||||
<Col span={6} />
|
||||
<Col span={6} />
|
||||
</Row>
|
||||
</pre>
|
||||
</div>
|
||||
</pre>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/grid/demo/responsive.md correctly 1`] = `
|
||||
@ -1013,10 +1211,9 @@ exports[`renders ./components/grid/demo/responsive-more.md correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`renders ./components/grid/demo/sort.md correctly 1`] = `
|
||||
<div>
|
||||
<div
|
||||
<div
|
||||
class="ant-row"
|
||||
>
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-col-18 ant-col-push-6"
|
||||
>
|
||||
@ -1027,6 +1224,5 @@ exports[`renders ./components/grid/demo/sort.md correctly 1`] = `
|
||||
>
|
||||
col-6 col-pull-18
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -21,7 +21,7 @@ You can create a basic grid system by using a single set of `Row` and `Col` grid
|
||||
import { Row, Col } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<>
|
||||
<Row>
|
||||
<Col span={24}>col</Col>
|
||||
</Row>
|
||||
@ -40,7 +40,7 @@ ReactDOM.render(
|
||||
<Col span={6}>col-6</Col>
|
||||
<Col span={6}>col-6</Col>
|
||||
</Row>
|
||||
</div>,
|
||||
</>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
|
||||
@ -14,13 +14,15 @@ title:
|
||||
Child elements vertically aligned.
|
||||
|
||||
```jsx
|
||||
import { Row, Col } from 'antd';
|
||||
import { Row, Col, Divider } from 'antd';
|
||||
|
||||
const DemoBox = props => <p className={`height-${props.value}`}>{props.children}</p>;
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<p>Align Top</p>
|
||||
<>
|
||||
<Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
|
||||
Align Top
|
||||
</Divider>
|
||||
<Row justify="center" align="top">
|
||||
<Col span={4}>
|
||||
<DemoBox value={100}>col-4</DemoBox>
|
||||
@ -36,7 +38,9 @@ ReactDOM.render(
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<p>Align Center</p>
|
||||
<Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
|
||||
Align Center
|
||||
</Divider>
|
||||
<Row justify="space-around" align="middle">
|
||||
<Col span={4}>
|
||||
<DemoBox value={100}>col-4</DemoBox>
|
||||
@ -52,7 +56,9 @@ ReactDOM.render(
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<p>Align Bottom</p>
|
||||
<Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
|
||||
Align Bottom
|
||||
</Divider>
|
||||
<Row justify="space-between" align="bottom">
|
||||
<Col span={4}>
|
||||
<DemoBox value={100}>col-4</DemoBox>
|
||||
@ -67,7 +73,7 @@ ReactDOM.render(
|
||||
<DemoBox value={80}>col-4</DemoBox>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>,
|
||||
</>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
|
||||
@ -17,7 +17,6 @@ To change the element sort by order.
|
||||
import { Row, Col } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<Row>
|
||||
<Col span={6} order={4}>
|
||||
1 col-order-4
|
||||
@ -31,8 +30,7 @@ ReactDOM.render(
|
||||
<Col span={6} order={1}>
|
||||
4 col-order-1
|
||||
</Col>
|
||||
</Row>
|
||||
</div>,
|
||||
</Row>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
|
||||
@ -14,26 +14,32 @@ Col 提供 `flex` 属性以支持填充。
|
||||
Col provides `flex` prop to support fill rest.
|
||||
|
||||
```jsx
|
||||
import { Row, Col } from 'antd';
|
||||
import { Row, Col, Divider } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<p>Percentage columns</p>
|
||||
<>
|
||||
<Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
|
||||
Percentage columns
|
||||
</Divider>
|
||||
<Row>
|
||||
<Col flex={2}>2 / 5</Col>
|
||||
<Col flex={3}>3 / 5</Col>
|
||||
</Row>
|
||||
<p>Fill rest</p>
|
||||
<Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
|
||||
Fill rest
|
||||
</Divider>
|
||||
<Row>
|
||||
<Col flex="100px">100px</Col>
|
||||
<Col flex="auto">Fill Rest</Col>
|
||||
</Row>
|
||||
<p>Raw flex style</p>
|
||||
<Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
|
||||
Raw flex style
|
||||
</Divider>
|
||||
<Row>
|
||||
<Col flex="1 1 200px">1 1 200px</Col>
|
||||
<Col flex="0 1 300px">0 1 300px</Col>
|
||||
</Row>
|
||||
</div>,
|
||||
</>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
|
||||
@ -16,11 +16,13 @@ title:
|
||||
Child elements depending on the value of the `start`,`center`, `end`,`space-between`, `space-around`, which are defined in its parent node typesetting mode.
|
||||
|
||||
```jsx
|
||||
import { Row, Col } from 'antd';
|
||||
import { Row, Col, Divider } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<p>sub-element align left</p>
|
||||
<>
|
||||
<Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
|
||||
sub-element align left
|
||||
</Divider>
|
||||
<Row justify="start">
|
||||
<Col span={4}>col-4</Col>
|
||||
<Col span={4}>col-4</Col>
|
||||
@ -28,7 +30,9 @@ ReactDOM.render(
|
||||
<Col span={4}>col-4</Col>
|
||||
</Row>
|
||||
|
||||
<p>sub-element align center</p>
|
||||
<Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
|
||||
sub-element align center
|
||||
</Divider>
|
||||
<Row justify="center">
|
||||
<Col span={4}>col-4</Col>
|
||||
<Col span={4}>col-4</Col>
|
||||
@ -36,7 +40,9 @@ ReactDOM.render(
|
||||
<Col span={4}>col-4</Col>
|
||||
</Row>
|
||||
|
||||
<p>sub-element align right</p>
|
||||
<Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
|
||||
sub-element align right
|
||||
</Divider>
|
||||
<Row justify="end">
|
||||
<Col span={4}>col-4</Col>
|
||||
<Col span={4}>col-4</Col>
|
||||
@ -44,7 +50,9 @@ ReactDOM.render(
|
||||
<Col span={4}>col-4</Col>
|
||||
</Row>
|
||||
|
||||
<p>sub-element monospaced arrangement</p>
|
||||
<Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
|
||||
sub-element monospaced arrangement
|
||||
</Divider>
|
||||
<Row justify="space-between">
|
||||
<Col span={4}>col-4</Col>
|
||||
<Col span={4}>col-4</Col>
|
||||
@ -52,14 +60,16 @@ ReactDOM.render(
|
||||
<Col span={4}>col-4</Col>
|
||||
</Row>
|
||||
|
||||
<p>sub-element align full</p>
|
||||
<Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
|
||||
sub-element align full
|
||||
</Divider>
|
||||
<Row 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>
|
||||
</Row>
|
||||
</div>,
|
||||
</>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
|
||||
@ -26,51 +26,84 @@ You can use a array to set vertical spacing, `[horizontal, vertical]` `[16, { xs
|
||||
> vertical gutter was supported after `3.24.0`.
|
||||
|
||||
```jsx
|
||||
import { Row, Col } from 'antd';
|
||||
import { Row, Col, Divider } from 'antd';
|
||||
|
||||
const style = { background: '#0092ff', padding: '8px 0' };
|
||||
|
||||
ReactDOM.render(
|
||||
<div className="gutter-example">
|
||||
<>
|
||||
<Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
|
||||
Horizontal
|
||||
</Divider>
|
||||
<Row gutter={16}>
|
||||
<Col className="gutter-row" span={6}>
|
||||
<div className="gutter-box">col-6</div>
|
||||
<div style={style}>col-6</div>
|
||||
</Col>
|
||||
<Col className="gutter-row" span={6}>
|
||||
<div className="gutter-box">col-6</div>
|
||||
<div style={style}>col-6</div>
|
||||
</Col>
|
||||
<Col className="gutter-row" span={6}>
|
||||
<div className="gutter-box">col-6</div>
|
||||
<div style={style}>col-6</div>
|
||||
</Col>
|
||||
<Col className="gutter-row" span={6}>
|
||||
<div className="gutter-box">col-6</div>
|
||||
<div style={style}>col-6</div>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={[{ xs: 8, sm: 16, md: 24, lg: 32 }, 20]}>
|
||||
<Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
|
||||
Responsive
|
||||
</Divider>
|
||||
<Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
|
||||
<Col className="gutter-row" span={6}>
|
||||
<div className="gutter-box">col-6</div>
|
||||
<div style={style}>col-6</div>
|
||||
</Col>
|
||||
<Col className="gutter-row" span={6}>
|
||||
<div className="gutter-box">col-6</div>
|
||||
<div style={style}>col-6</div>
|
||||
</Col>
|
||||
<Col className="gutter-row" span={6}>
|
||||
<div className="gutter-box">col-6</div>
|
||||
<div style={style}>col-6</div>
|
||||
</Col>
|
||||
<Col className="gutter-row" span={6}>
|
||||
<div className="gutter-box">col-6</div>
|
||||
<div style={style}>col-6</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>,
|
||||
<Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
|
||||
Vertical
|
||||
</Divider>
|
||||
<Row gutter={[16, 24]}>
|
||||
<Col className="gutter-row" span={6}>
|
||||
<div style={style}>col-6</div>
|
||||
</Col>
|
||||
<Col className="gutter-row" span={6}>
|
||||
<div style={style}>col-6</div>
|
||||
</Col>
|
||||
<Col className="gutter-row" span={6}>
|
||||
<div style={style}>col-6</div>
|
||||
</Col>
|
||||
<Col className="gutter-row" span={6}>
|
||||
<div style={style}>col-6</div>
|
||||
</Col>
|
||||
<Col className="gutter-row" span={6}>
|
||||
<div style={style}>col-6</div>
|
||||
</Col>
|
||||
<Col className="gutter-row" span={6}>
|
||||
<div style={style}>col-6</div>
|
||||
</Col>
|
||||
<Col className="gutter-row" span={6}>
|
||||
<div style={style}>col-6</div>
|
||||
</Col>
|
||||
<Col className="gutter-row" span={6}>
|
||||
<div style={style}>col-6</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
|
||||
```css
|
||||
.gutter-example .ant-row > div {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
}
|
||||
.gutter-box {
|
||||
padding: 8px 0;
|
||||
background: #00a0e9;
|
||||
padding: 5px 0;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@ -19,7 +19,7 @@ title:
|
||||
import { Row, Col } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<>
|
||||
<Row>
|
||||
<Col span={8}>col-8</Col>
|
||||
<Col span={8} offset={8}>
|
||||
@ -39,7 +39,7 @@ ReactDOM.render(
|
||||
col-12 col-offset-6
|
||||
</Col>
|
||||
</Row>
|
||||
</div>,
|
||||
</>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
|
||||
@ -67,8 +67,7 @@ class App extends React.Component {
|
||||
colCode += ` <Col span={${24 / colCount}} />\n`;
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<>
|
||||
<span style={{ marginRight: 6 }}>Horizontal Gutter (px): </span>
|
||||
<div style={{ width: '50%' }}>
|
||||
<Slider
|
||||
@ -92,7 +91,7 @@ class App extends React.Component {
|
||||
/>
|
||||
</div>
|
||||
<span style={{ marginRight: 6 }}>Column Count:</span>
|
||||
<div style={{ width: '50%' }}>
|
||||
<div style={{ width: '50%', marginBottom: 48 }}>
|
||||
<Slider
|
||||
min={0}
|
||||
max={Object.keys(this.colCounts).length - 1}
|
||||
@ -102,12 +101,11 @@ class App extends React.Component {
|
||||
step={null}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Row gutter={[this.gutters[gutterKey], this.vgutters[vgutterKey]]}>{cols}</Row>
|
||||
<Row gutter={[this.gutters[gutterKey], this.vgutters[vgutterKey]]}>{cols}</Row>
|
||||
<pre>{`<Row gutter={[${this.gutters[gutterKey]}, ${this.vgutters[vgutterKey]}]}>\n${colCode}</Row>`}</pre>
|
||||
<pre>{`<Row gutter={[${this.gutters[gutterKey]}, ${this.vgutters[vgutterKey]}]}>\n${colCode}</Row>`}</pre>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -121,16 +119,17 @@ ReactDOM.render(<App />, mountNode);
|
||||
border: 0;
|
||||
}
|
||||
#components-grid-demo-playground [class~='ant-col'] > div {
|
||||
background: #00a0e9;
|
||||
height: 120px;
|
||||
font-size: 14px;
|
||||
line-height: 120px;
|
||||
font-size: 13px;
|
||||
background: #0092ff;
|
||||
border-radius: 4px;
|
||||
}
|
||||
#components-grid-demo-playground pre {
|
||||
padding: 8px 16px;
|
||||
font-size: 13px;
|
||||
background: #f9f9f9;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@ -19,7 +19,6 @@ By using `push` and`pull` class you can easily change column order.
|
||||
import { Row, Col } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<Row>
|
||||
<Col span={18} push={6}>
|
||||
col-18 col-push-6
|
||||
@ -27,8 +26,7 @@ ReactDOM.render(
|
||||
<Col span={6} pull={18}>
|
||||
col-6 col-pull-18
|
||||
</Col>
|
||||
</Row>
|
||||
</div>,
|
||||
</Row>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
|
||||
@ -128,7 +128,7 @@
|
||||
}
|
||||
|
||||
.markdown pre {
|
||||
font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
font-family: @code-family;
|
||||
background: @site-markdown-code-bg;
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
@ -193,7 +193,7 @@
|
||||
.markdown .anchor {
|
||||
margin-left: 8px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
transition: opacity .3s;
|
||||
|
||||
.ant-row-rtl & {
|
||||
margin-right: 8px;
|
||||
@ -298,6 +298,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
@demo-grid-color: #0092ff;
|
||||
|
||||
.grid-demo,
|
||||
[id^='components-grid-demo-'] {
|
||||
.demo-row,
|
||||
@ -359,16 +361,15 @@
|
||||
min-height: 30px;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
padding: 5px 0;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 0;
|
||||
}
|
||||
.code-box-demo .ant-row > div:not(.gutter-row) {
|
||||
padding: 16px 0;
|
||||
background: #00a0e9;
|
||||
background: @demo-grid-color;
|
||||
&:nth-child(2n + 1) {
|
||||
background: fade(#00a0e9, 70%);
|
||||
background: fade(@demo-grid-color, 75%);
|
||||
}
|
||||
}
|
||||
.ant-row .demo-col,
|
||||
@ -382,11 +383,11 @@
|
||||
border: none;
|
||||
}
|
||||
.ant-row .demo-col-1 {
|
||||
background: fade(#00a0e9, 70%);
|
||||
background: fade(@demo-grid-color, 75%);
|
||||
}
|
||||
.ant-row .demo-col-2,
|
||||
.code-box-demo .ant-row .demo-col-2 {
|
||||
background: fade(#00a0e9, 50%);
|
||||
background: fade(@demo-grid-color, 50%);
|
||||
}
|
||||
.ant-row .demo-col-3,
|
||||
.code-box-demo .ant-row .demo-col-3 {
|
||||
@ -395,7 +396,7 @@
|
||||
}
|
||||
.ant-row .demo-col-4,
|
||||
.code-box-demo .ant-row .demo-col-4 {
|
||||
background: fade(#00a0e9, 60%);
|
||||
background: fade(@demo-grid-color, 60%);
|
||||
}
|
||||
.ant-row .demo-col-5,
|
||||
.code-box-demo .ant-row .demo-col-5 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user