ant-design/components/grid/demo/playground.md

104 lines
2.5 KiB
Markdown
Raw Normal View History

2016-12-25 21:09:49 +08:00
---
order: 9
title:
zh-CN: 栅格配置器
en-US: Playground
---
## zh-CN
可以简单配置几种等分栅格和间距。
## en-US
A simple playground for column count and gutter.
2017-01-19 15:19:03 +08:00
````__react
2016-12-25 21:09:49 +08:00
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; });
2016-12-25 21:31:33 +08:00
[2, 3, 4, 6, 8, 12].forEach((value, i) => { this.colCounts[i] = value; });
2016-12-25 21:09:49 +08:00
}
onGutterChange = (gutterKey) => {
this.setState({ gutterKey });
}
onColCountChange = (colCountKey) => {
this.setState({ colCountKey });
}
render() {
const { gutterKey, colCountKey } = this.state;
const cols = [];
const colCount = this.colCounts[colCountKey];
2016-12-25 21:31:33 +08:00
let colCode = '';
2016-12-25 21:09:49 +08:00
for (let i = 0; i < colCount; i++) {
cols.push(
<Col key={i.toString()} span={24 / colCount}>
<div>Column</div>
</Col>
);
2016-12-25 21:31:33 +08:00
colCode += ` <Col span={${24 / colCount}} />\n`;
2016-12-25 21:09:49 +08:00
}
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>
2016-12-25 21:31:33 +08:00
<pre>{`<Row gutter={${this.gutters[gutterKey]}}>\n${colCode}</Row>`}</pre>
2016-12-25 21:09:49 +08:00
</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;
}
2016-12-25 21:31:33 +08:00
#components-grid-demo-playground pre {
background: #f9f9f9;
border-radius: 6px;
font-size: 13px;
padding: 8px 16px;
}
2016-12-25 21:09:49 +08:00
````