mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 01:13:58 +08:00
🎬 Improve Grid demo style (#21625)
This commit is contained in:
偏右
GitHub
parent
928ff9ae69
commit
3c6faa6cb4
File diff suppressed because it is too large
Load Diff
@ -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,22 +17,20 @@ 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
|
||||
</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>,
|
||||
<Row>
|
||||
<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>,
|
||||
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,47 +67,45 @@ 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
|
||||
min={0}
|
||||
max={Object.keys(this.gutters).length - 1}
|
||||
value={gutterKey}
|
||||
onChange={this.onGutterChange}
|
||||
marks={this.gutters}
|
||||
step={null}
|
||||
/>
|
||||
</div>
|
||||
<span style={{ marginRight: 6 }}>Vertical Gutter (px): </span>
|
||||
<div style={{ width: '50%' }}>
|
||||
<Slider
|
||||
min={0}
|
||||
max={Object.keys(this.vgutters).length - 1}
|
||||
value={vgutterKey}
|
||||
onChange={this.onVGutterChange}
|
||||
marks={this.vgutters}
|
||||
step={null}
|
||||
/>
|
||||
</div>
|
||||
<span style={{ marginRight: 6 }}>Column Count:</span>
|
||||
<div style={{ width: '50%' }}>
|
||||
<Slider
|
||||
min={0}
|
||||
max={Object.keys(this.colCounts).length - 1}
|
||||
value={colCountKey}
|
||||
onChange={this.onColCountChange}
|
||||
marks={this.colCounts}
|
||||
step={null}
|
||||
/>
|
||||
</div>
|
||||
<>
|
||||
<span style={{ marginRight: 6 }}>Horizontal Gutter (px): </span>
|
||||
<div style={{ width: '50%' }}>
|
||||
<Slider
|
||||
min={0}
|
||||
max={Object.keys(this.gutters).length - 1}
|
||||
value={gutterKey}
|
||||
onChange={this.onGutterChange}
|
||||
marks={this.gutters}
|
||||
step={null}
|
||||
/>
|
||||
</div>
|
||||
<span style={{ marginRight: 6 }}>Vertical Gutter (px): </span>
|
||||
<div style={{ width: '50%' }}>
|
||||
<Slider
|
||||
min={0}
|
||||
max={Object.keys(this.vgutters).length - 1}
|
||||
value={vgutterKey}
|
||||
onChange={this.onVGutterChange}
|
||||
marks={this.vgutters}
|
||||
step={null}
|
||||
/>
|
||||
</div>
|
||||
<span style={{ marginRight: 6 }}>Column Count:</span>
|
||||
<div style={{ width: '50%', marginBottom: 48 }}>
|
||||
<Slider
|
||||
min={0}
|
||||
max={Object.keys(this.colCounts).length - 1}
|
||||
value={colCountKey}
|
||||
onChange={this.onColCountChange}
|
||||
marks={this.colCounts}
|
||||
step={null}
|
||||
/>
|
||||
</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,16 +19,14 @@ 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
|
||||
</Col>
|
||||
<Col span={6} pull={18}>
|
||||
col-6 col-pull-18
|
||||
</Col>
|
||||
</Row>
|
||||
</div>,
|
||||
<Row>
|
||||
<Col span={18} push={6}>
|
||||
col-18 col-push-6
|
||||
</Col>
|
||||
<Col span={6} pull={18}>
|
||||
col-6 col-pull-18
|
||||
</Col>
|
||||
</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