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

🎬 Improve Grid demo style (#21625)

Browse Source
This commit is contained in:
偏右 2020-02-26 21:00:43 +08:00 committed by GitHub
parent 928ff9ae69
commit 3c6faa6cb4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 749 additions and 502 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

970
components/grid/__tests__/__snapshots__/demo.test.js.snap
View File

File diff suppressed because it is too large Load Diff

4
components/grid/demo/basic.md
View File

@ -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'; import { Row, Col } from 'antd';
ReactDOM.render( ReactDOM.render(
<div> <>
<Row> <Row>
<Col span={24}>col</Col> <Col span={24}>col</Col>
</Row> </Row>
@ -40,7 +40,7 @@ ReactDOM.render(
<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> </Row>
</div>, </>,
mountNode, mountNode,
); );
``` ```

18
components/grid/demo/flex-align.md
View File

@ -14,13 +14,15 @@ title:
Child elements vertically aligned. Child elements vertically aligned.
```jsx ```jsx
import { Row, Col } from 'antd'; import { Row, Col, Divider } from 'antd';
const DemoBox = props => <p className={`height-${props.value}`}>{props.children}</p>; const DemoBox = props => <p className={`height-${props.value}`}>{props.children}</p>;
ReactDOM.render( ReactDOM.render(
<div> <>
<p>Align Top</p> <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
Align Top
</Divider>
<Row justify="center" align="top"> <Row justify="center" align="top">
<Col span={4}> <Col span={4}>
<DemoBox value={100}>col-4</DemoBox> <DemoBox value={100}>col-4</DemoBox>
@ -36,7 +38,9 @@ ReactDOM.render(
</Col> </Col>
</Row> </Row>
<p>Align Center</p> <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
Align Center
</Divider>
<Row justify="space-around" align="middle"> <Row justify="space-around" align="middle">
<Col span={4}> <Col span={4}>
<DemoBox value={100}>col-4</DemoBox> <DemoBox value={100}>col-4</DemoBox>
@ -52,7 +56,9 @@ ReactDOM.render(
</Col> </Col>
</Row> </Row>
<p>Align Bottom</p> <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
Align Bottom
</Divider>
<Row justify="space-between" align="bottom"> <Row justify="space-between" align="bottom">
<Col span={4}> <Col span={4}>
<DemoBox value={100}>col-4</DemoBox> <DemoBox value={100}>col-4</DemoBox>
@ -67,7 +73,7 @@ ReactDOM.render(
<DemoBox value={80}>col-4</DemoBox> <DemoBox value={80}>col-4</DemoBox>
</Col> </Col>
</Row> </Row>
</div>, </>,
mountNode, mountNode,
); );
``` ```

30
components/grid/demo/flex-order.md
View File

@ -17,22 +17,20 @@ To change the element sort by order.
import { Row, Col } from 'antd'; import { Row, Col } from 'antd';
ReactDOM.render( ReactDOM.render(
<div> <Row>
<Row> <Col span={6} order={4}>
<Col span={6} order={4}> 1 col-order-4
1 col-order-4 </Col>
</Col> <Col span={6} order={3}>
<Col span={6} order={3}> 2 col-order-3
2 col-order-3 </Col>
</Col> <Col span={6} order={2}>
<Col span={6} order={2}> 3 col-order-2
3 col-order-2 </Col>
</Col> <Col span={6} order={1}>
<Col span={6} order={1}> 4 col-order-1
4 col-order-1 </Col>
</Col> </Row>,
</Row>
</div>,
mountNode, mountNode,
); );
``` ```

18
components/grid/demo/flex-stretch.md
View File

@ -14,26 +14,32 @@ Col 提供 `flex` 属性以支持填充。
Col provides `flex` prop to support fill rest. Col provides `flex` prop to support fill rest.
```jsx ```jsx
import { Row, Col } from 'antd'; import { Row, Col, Divider } from 'antd';
ReactDOM.render( ReactDOM.render(
<div> <>
<p>Percentage columns</p> <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
Percentage columns
</Divider>
<Row> <Row>
<Col flex={2}>2 / 5</Col> <Col flex={2}>2 / 5</Col>
<Col flex={3}>3 / 5</Col> <Col flex={3}>3 / 5</Col>
</Row> </Row>
<p>Fill rest</p> <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
Fill rest
</Divider>
<Row> <Row>
<Col flex="100px">100px</Col> <Col flex="100px">100px</Col>
<Col flex="auto">Fill Rest</Col> <Col flex="auto">Fill Rest</Col>
</Row> </Row>
<p>Raw flex style</p> <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
Raw flex style
</Divider>
<Row> <Row>
<Col flex="1 1 200px">1 1 200px</Col> <Col flex="1 1 200px">1 1 200px</Col>
<Col flex="0 1 300px">0 1 300px</Col> <Col flex="0 1 300px">0 1 300px</Col>
</Row> </Row>
</div>, </>,
mountNode, mountNode,
); );
``` ```

26
components/grid/demo/flex.md
View File

@ -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. 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 ```jsx
import { Row, Col } from 'antd'; import { Row, Col, Divider } from 'antd';
ReactDOM.render( 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"> <Row 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>
@ -28,7 +30,9 @@ ReactDOM.render(
<Col span={4}>col-4</Col> <Col span={4}>col-4</Col>
</Row> </Row>
<p>sub-element align center</p> <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
sub-element align center
</Divider>
<Row justify="center"> <Row 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>
@ -36,7 +40,9 @@ ReactDOM.render(
<Col span={4}>col-4</Col> <Col span={4}>col-4</Col>
</Row> </Row>
<p>sub-element align right</p> <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
sub-element align right
</Divider>
<Row justify="end"> <Row 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>
@ -44,7 +50,9 @@ ReactDOM.render(
<Col span={4}>col-4</Col> <Col span={4}>col-4</Col>
</Row> </Row>
<p>sub-element monospaced arrangement</p> <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
sub-element monospaced arrangement
</Divider>
<Row justify="space-between"> <Row 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>
@ -52,14 +60,16 @@ ReactDOM.render(
<Col span={4}>col-4</Col> <Col span={4}>col-4</Col>
</Row> </Row>
<p>sub-element align full</p> <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
sub-element align full
</Divider>
<Row justify="space-around"> <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>
<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> </Row>
</div>, </>,
mountNode, mountNode,
); );
``` ```

67
components/grid/demo/gutter.md
View File

@ -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`. > vertical gutter was supported after `3.24.0`.
```jsx ```jsx
import { Row, Col } from 'antd'; import { Row, Col, Divider } from 'antd';
const style = { background: '#0092ff', padding: '8px 0' };
ReactDOM.render( ReactDOM.render(
<div className="gutter-example"> <>
<Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
Horizontal
</Divider>
<Row gutter={16}> <Row gutter={16}>
<Col className="gutter-row" span={6}> <Col className="gutter-row" span={6}>
<div className="gutter-box">col-6</div> <div style={style}>col-6</div>
</Col> </Col>
<Col className="gutter-row" span={6}> <Col className="gutter-row" span={6}>
<div className="gutter-box">col-6</div> <div style={style}>col-6</div>
</Col> </Col>
<Col className="gutter-row" span={6}> <Col className="gutter-row" span={6}>
<div className="gutter-box">col-6</div> <div style={style}>col-6</div>
</Col> </Col>
<Col className="gutter-row" span={6}> <Col className="gutter-row" span={6}>
<div className="gutter-box">col-6</div> <div style={style}>col-6</div>
</Col> </Col>
</Row> </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}> <Col className="gutter-row" span={6}>
<div className="gutter-box">col-6</div> <div style={style}>col-6</div>
</Col> </Col>
<Col className="gutter-row" span={6}> <Col className="gutter-row" span={6}>
<div className="gutter-box">col-6</div> <div style={style}>col-6</div>
</Col> </Col>
<Col className="gutter-row" span={6}> <Col className="gutter-row" span={6}>
<div className="gutter-box">col-6</div> <div style={style}>col-6</div>
</Col> </Col>
<Col className="gutter-row" span={6}> <Col className="gutter-row" span={6}>
<div className="gutter-box">col-6</div> <div style={style}>col-6</div>
</Col> </Col>
</Row> </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, mountNode,
); );
``` ```
```css ```css
.gutter-example .ant-row > div {
background: transparent;
border: 0;
}
.gutter-box { .gutter-box {
padding: 8px 0;
background: #00a0e9; background: #00a0e9;
padding: 5px 0;
} }
``` ```

4
components/grid/demo/offset.md
View File

@ -19,7 +19,7 @@ title:
import { Row, Col } from 'antd'; import { Row, Col } from 'antd';
ReactDOM.render( ReactDOM.render(
<div> <>
<Row> <Row>
<Col span={8}>col-8</Col> <Col span={8}>col-8</Col>
<Col span={8} offset={8}> <Col span={8} offset={8}>
@ -39,7 +39,7 @@ ReactDOM.render(
col-12 col-offset-6 col-12 col-offset-6
</Col> </Col>
</Row> </Row>
</div>, </>,
mountNode, mountNode,
); );
``` ```

79
components/grid/demo/playground.md
View File

@ -67,47 +67,45 @@ class App extends React.Component {
colCode += ` <Col span={${24 / colCount}} />\n`; colCode += ` <Col span={${24 / colCount}} />\n`;
} }
return ( return (
<div> <>
<div style={{ marginBottom: 16 }}> <span style={{ marginRight: 6 }}>Horizontal Gutter (px): </span>
<span style={{ marginRight: 6 }}>Horizontal Gutter (px): </span> <div style={{ width: '50%' }}>
<div style={{ width: '50%' }}> <Slider
<Slider min={0}
min={0} max={Object.keys(this.gutters).length - 1}
max={Object.keys(this.gutters).length - 1} value={gutterKey}
value={gutterKey} onChange={this.onGutterChange}
onChange={this.onGutterChange} marks={this.gutters}
marks={this.gutters} step={null}
step={null} />
/> </div>
</div> <span style={{ marginRight: 6 }}>Vertical Gutter (px): </span>
<span style={{ marginRight: 6 }}>Vertical Gutter (px): </span> <div style={{ width: '50%' }}>
<div style={{ width: '50%' }}> <Slider
<Slider min={0}
min={0} max={Object.keys(this.vgutters).length - 1}
max={Object.keys(this.vgutters).length - 1} value={vgutterKey}
value={vgutterKey} onChange={this.onVGutterChange}
onChange={this.onVGutterChange} marks={this.vgutters}
marks={this.vgutters} step={null}
step={null} />
/> </div>
</div> <span style={{ marginRight: 6 }}>Column Count:</span>
<span style={{ marginRight: 6 }}>Column Count:</span> <div style={{ width: '50%', marginBottom: 48 }}>
<div style={{ width: '50%' }}> <Slider
<Slider min={0}
min={0} max={Object.keys(this.colCounts).length - 1}
max={Object.keys(this.colCounts).length - 1} value={colCountKey}
value={colCountKey} onChange={this.onColCountChange}
onChange={this.onColCountChange} marks={this.colCounts}
marks={this.colCounts} step={null}
step={null} />
/>
</div>
</div> </div>
<Row gutter={[this.gutters[gutterKey], this.vgutters[vgutterKey]]}>{cols}</Row> <Row gutter={[this.gutters[gutterKey], this.vgutters[vgutterKey]]}>{cols}</Row>
<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>
<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; border: 0;
} }
#components-grid-demo-playground [class~='ant-col'] > div { #components-grid-demo-playground [class~='ant-col'] > div {
background: #00a0e9;
height: 120px; height: 120px;
font-size: 14px;
line-height: 120px; line-height: 120px;
font-size: 13px; background: #0092ff;
border-radius: 4px;
} }
#components-grid-demo-playground pre { #components-grid-demo-playground pre {
padding: 8px 16px;
font-size: 13px;
background: #f9f9f9; background: #f9f9f9;
border-radius: 6px; border-radius: 6px;
font-size: 13px;
padding: 8px 16px;
} }
``` ```

18
components/grid/demo/sort.md
View File

@ -19,16 +19,14 @@ By using `push` and`pull` class you can easily change column order.
import { Row, Col } from 'antd'; import { Row, Col } from 'antd';
ReactDOM.render( ReactDOM.render(
<div> <Row>
<Row> <Col span={18} push={6}>
<Col span={18} push={6}> col-18 col-push-6
col-18 col-push-6 </Col>
</Col> <Col span={6} pull={18}>
<Col span={6} pull={18}> col-6 col-pull-18
col-6 col-pull-18 </Col>
</Col> </Row>,
</Row>
</div>,
mountNode, mountNode,
); );
``` ```

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

@ -128,7 +128,7 @@
} }
.markdown pre { .markdown pre {
font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-family: @code-family;
background: @site-markdown-code-bg; background: @site-markdown-code-bg;
border-radius: @border-radius-base; border-radius: @border-radius-base;
} }
@ -193,7 +193,7 @@
.markdown .anchor { .markdown .anchor {
margin-left: 8px; margin-left: 8px;
opacity: 0; opacity: 0;
transition: opacity 0.3s ease; transition: opacity .3s;
.ant-row-rtl & { .ant-row-rtl & {
margin-right: 8px; margin-right: 8px;
@ -298,6 +298,8 @@
} }
} }
@demo-grid-color: #0092ff;
.grid-demo, .grid-demo,
[id^='components-grid-demo-'] { [id^='components-grid-demo-'] {
.demo-row, .demo-row,
@ -359,16 +361,15 @@
min-height: 30px; min-height: 30px;
margin-top: 8px; margin-top: 8px;
margin-bottom: 8px; margin-bottom: 8px;
padding: 5px 0;
color: #fff; color: #fff;
text-align: center; text-align: center;
border-radius: 0; border-radius: 0;
} }
.code-box-demo .ant-row > div:not(.gutter-row) { .code-box-demo .ant-row > div:not(.gutter-row) {
padding: 16px 0; padding: 16px 0;
background: #00a0e9; background: @demo-grid-color;
&:nth-child(2n + 1) { &:nth-child(2n + 1) {
background: fade(#00a0e9, 70%); background: fade(@demo-grid-color, 75%);
} }
} }
.ant-row .demo-col, .ant-row .demo-col,
@ -382,11 +383,11 @@
border: none; border: none;
} }
.ant-row .demo-col-1 { .ant-row .demo-col-1 {
background: fade(#00a0e9, 70%); background: fade(@demo-grid-color, 75%);
} }
.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: fade(#00a0e9, 50%); background: fade(@demo-grid-color, 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 {
@ -395,7 +396,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: fade(#00a0e9, 60%); background: fade(@demo-grid-color, 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 {