mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-11-30 02:59:04 +08:00
Add Grid playground demo
This commit is contained in:
afc163
parent
0d0d63a741
commit
ee17abfa9d
@ -370,6 +370,198 @@ exports[`test renders ./components/grid/demo/offset.md correctly 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`test renders ./components/grid/demo/playground.md correctly 1`] = `
|
||||
<div>
|
||||
<div
|
||||
style="margin-bottom:16px;">
|
||||
<span
|
||||
style="margin-right:6px;">
|
||||
Gutter (px):
|
||||
</span>
|
||||
<div
|
||||
style="width:50%;">
|
||||
<div
|
||||
class="ant-slider ant-slider-with-marks">
|
||||
<div
|
||||
class="ant-slider-rail" />
|
||||
<div
|
||||
class="ant-slider-track ant-slider-track-1"
|
||||
style="visibility:visible;left:0%;width:20%;" />
|
||||
<div
|
||||
class="ant-slider-step">
|
||||
<span
|
||||
class="ant-slider-dot ant-slider-dot-active"
|
||||
style="left:0%;" />
|
||||
<span
|
||||
class="ant-slider-dot ant-slider-dot-active"
|
||||
style="left:20%;" />
|
||||
<span
|
||||
class="ant-slider-dot"
|
||||
style="left:40%;" />
|
||||
<span
|
||||
class="ant-slider-dot"
|
||||
style="left:60%;" />
|
||||
<span
|
||||
class="ant-slider-dot"
|
||||
style="left:80%;" />
|
||||
<span
|
||||
class="ant-slider-dot"
|
||||
style="left:100%;" />
|
||||
</div>
|
||||
<div
|
||||
class="ant-slider-handle ant-slider-handle-2 ant-slider-handle-upper"
|
||||
style="left:20%;" />
|
||||
<div
|
||||
class="ant-slider-mark">
|
||||
<span
|
||||
class="ant-slider-mark-text ant-slider-mark-text-active"
|
||||
style="width:18%;margin-left:-9%;left:0%;">
|
||||
8
|
||||
</span>
|
||||
<span
|
||||
class="ant-slider-mark-text ant-slider-mark-text-active"
|
||||
style="width:18%;margin-left:-9%;left:20%;">
|
||||
16
|
||||
</span>
|
||||
<span
|
||||
class="ant-slider-mark-text"
|
||||
style="width:18%;margin-left:-9%;left:40%;">
|
||||
24
|
||||
</span>
|
||||
<span
|
||||
class="ant-slider-mark-text"
|
||||
style="width:18%;margin-left:-9%;left:60%;">
|
||||
32
|
||||
</span>
|
||||
<span
|
||||
class="ant-slider-mark-text"
|
||||
style="width:18%;margin-left:-9%;left:80%;">
|
||||
40
|
||||
</span>
|
||||
<span
|
||||
class="ant-slider-mark-text"
|
||||
style="width:18%;margin-left:-9%;left:100%;">
|
||||
48
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
style="margin-right:6px;">
|
||||
Column Count:
|
||||
</span>
|
||||
<div
|
||||
style="width:50%;">
|
||||
<div
|
||||
class="ant-slider ant-slider-with-marks">
|
||||
<div
|
||||
class="ant-slider-rail" />
|
||||
<div
|
||||
class="ant-slider-track ant-slider-track-1"
|
||||
style="visibility:visible;left:0%;width:33.33333333333333%;" />
|
||||
<div
|
||||
class="ant-slider-step">
|
||||
<span
|
||||
class="ant-slider-dot ant-slider-dot-active"
|
||||
style="left:0%;" />
|
||||
<span
|
||||
class="ant-slider-dot ant-slider-dot-active"
|
||||
style="left:16.666666666666664%;" />
|
||||
<span
|
||||
class="ant-slider-dot ant-slider-dot-active"
|
||||
style="left:33.33333333333333%;" />
|
||||
<span
|
||||
class="ant-slider-dot"
|
||||
style="left:50%;" />
|
||||
<span
|
||||
class="ant-slider-dot"
|
||||
style="left:66.66666666666666%;" />
|
||||
<span
|
||||
class="ant-slider-dot"
|
||||
style="left:83.33333333333334%;" />
|
||||
<span
|
||||
class="ant-slider-dot"
|
||||
style="left:100%;" />
|
||||
</div>
|
||||
<div
|
||||
class="ant-slider-handle ant-slider-handle-2 ant-slider-handle-upper"
|
||||
style="left:33.33333333333333%;" />
|
||||
<div
|
||||
class="ant-slider-mark">
|
||||
<span
|
||||
class="ant-slider-mark-text ant-slider-mark-text-active"
|
||||
style="width:15.000000000000002%;margin-left:-7.500000000000001%;left:0%;">
|
||||
2
|
||||
</span>
|
||||
<span
|
||||
class="ant-slider-mark-text ant-slider-mark-text-active"
|
||||
style="width:15.000000000000002%;margin-left:-7.500000000000001%;left:16.666666666666664%;">
|
||||
3
|
||||
</span>
|
||||
<span
|
||||
class="ant-slider-mark-text ant-slider-mark-text-active"
|
||||
style="width:15.000000000000002%;margin-left:-7.500000000000001%;left:33.33333333333333%;">
|
||||
4
|
||||
</span>
|
||||
<span
|
||||
class="ant-slider-mark-text"
|
||||
style="width:15.000000000000002%;margin-left:-7.500000000000001%;left:50%;">
|
||||
6
|
||||
</span>
|
||||
<span
|
||||
class="ant-slider-mark-text"
|
||||
style="width:15.000000000000002%;margin-left:-7.500000000000001%;left:66.66666666666666%;">
|
||||
8
|
||||
</span>
|
||||
<span
|
||||
class="ant-slider-mark-text"
|
||||
style="width:15.000000000000002%;margin-left:-7.500000000000001%;left:83.33333333333334%;">
|
||||
12
|
||||
</span>
|
||||
<span
|
||||
class="ant-slider-mark-text"
|
||||
style="width:15.000000000000002%;margin-left:-7.500000000000001%;left:100%;">
|
||||
24
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-row"
|
||||
style="margin-left:-8px;margin-right:-8px;">
|
||||
<div
|
||||
class="ant-col-6"
|
||||
style="padding-left:8px;padding-right:8px;">
|
||||
<div>
|
||||
Column
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col-6"
|
||||
style="padding-left:8px;padding-right:8px;">
|
||||
<div>
|
||||
Column
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col-6"
|
||||
style="padding-left:8px;padding-right:8px;">
|
||||
<div>
|
||||
Column
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col-6"
|
||||
style="padding-left:8px;padding-right:8px;">
|
||||
<div>
|
||||
Column
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`test renders ./components/grid/demo/reponsive.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-row">
|
||||
|
||||
94
components/grid/demo/playground.md
Normal file
94
components/grid/demo/playground.md
Normal file
@ -0,0 +1,94 @@
|
||||
---
|
||||
order: 9
|
||||
title:
|
||||
zh-CN: 栅格配置器
|
||||
en-US: Playground
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
可以简单配置几种等分栅格和间距。
|
||||
|
||||
## en-US
|
||||
|
||||
A simple playground for column count and gutter.
|
||||
|
||||
````jsx
|
||||
import { Row, Col, Slider } from 'antd';
|
||||
|
||||
class App extends React.Component {
|
||||
gutters = {};
|
||||
colCounts = {};
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
gutterKey: 1,
|
||||
colCountKey: 2,
|
||||
};
|
||||
[8, 16, 24, 32, 40, 48].forEach((value, i) => { this.gutters[i] = value; });
|
||||
[2, 3, 4, 6, 8, 12, 24].forEach((value, i) => { this.colCounts[i] = value; });
|
||||
}
|
||||
onGutterChange = (gutterKey) => {
|
||||
this.setState({ gutterKey });
|
||||
}
|
||||
onColCountChange = (colCountKey) => {
|
||||
this.setState({ colCountKey });
|
||||
}
|
||||
render() {
|
||||
const { gutterKey, colCountKey } = this.state;
|
||||
const cols = [];
|
||||
const colCount = this.colCounts[colCountKey];
|
||||
for (let i = 0; i < colCount; i++) {
|
||||
cols.push(
|
||||
<Col key={i.toString()} span={24 / colCount}>
|
||||
<div>Column</div>
|
||||
</Col>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<span style={{ marginRight: 6 }}>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 }}>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>
|
||||
</div>
|
||||
<Row gutter={this.gutters[gutterKey]}>{cols}</Row>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<App />, mountNode);
|
||||
````
|
||||
|
||||
````css
|
||||
#components-grid-demo-playground [class^="ant-col-"] {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
}
|
||||
#components-grid-demo-playground [class^="ant-col-"] > div {
|
||||
background: #00A0E9;
|
||||
height: 120px;
|
||||
line-height: 120px;
|
||||
font-size: 13px;
|
||||
}
|
||||
````
|
||||
Loading…
Reference in New Issue
Block a user