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

docs: 🎬 fix Grid demo slider tooltip

Browse Source 
close #23768
This commit is contained in:
afc163 2020-04-30 11:19:09 +08:00
parent 815baee4d9
commit 9c3bf77b92
1 changed files with 33 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,30 +16,26 @@ A simple playground for column count and gutter.
```jsx ```jsx
import { Row, Col, Slider } from 'antd'; import { Row, Col, Slider } from 'antd';
const gutters = {};
const vgutters = {};
const colCounts = {};
[8, 16, 24, 32, 40, 48].forEach((value, i) => {
gutters[i] = value;
});
[8, 16, 24, 32, 40, 48].forEach((value, i) => {
vgutters[i] = value;
});
[2, 3, 4, 6, 8, 12].forEach((value, i) => {
colCounts[i] = value;
});
class App extends React.Component { class App extends React.Component {
gutters = {}; state = {
gutterKey: 1,
vgutters = {}; vgutterKey: 1,
colCountKey: 2,
colCounts = {}; };
constructor() {
super();
this.state = {
gutterKey: 1,
vgutterKey: 1,
colCountKey: 2,
};
[8, 16, 24, 32, 40, 48].forEach((value, i) => {
this.gutters[i] = value;
});
[8, 16, 24, 32, 40, 48].forEach((value, i) => {
this.vgutters[i] = value;
});
[2, 3, 4, 6, 8, 12].forEach((value, i) => {
this.colCounts[i] = value;
});
}
onGutterChange = gutterKey => { onGutterChange = gutterKey => {
this.setState({ gutterKey }); this.setState({ gutterKey });
@ -56,7 +52,7 @@ class App extends React.Component {
render() { render() {
const { gutterKey, vgutterKey, colCountKey } = this.state; const { gutterKey, vgutterKey, colCountKey } = this.state;
const cols = []; const cols = [];
const colCount = this.colCounts[colCountKey]; const colCount = colCounts[colCountKey];
let colCode = ''; let colCode = '';
for (let i = 0; i < colCount; i++) { for (let i = 0; i < colCount; i++) {
cols.push( cols.push(
@ -72,39 +68,42 @@ class App extends React.Component {
<div style={{ width: '50%' }}> <div style={{ width: '50%' }}>
<Slider <Slider
min={0} min={0}
max={Object.keys(this.gutters).length - 1} max={Object.keys(gutters).length - 1}
value={gutterKey} value={gutterKey}
onChange={this.onGutterChange} onChange={this.onGutterChange}
marks={this.gutters} marks={gutters}
step={null} step={null}
tipFormatter={value => gutters[value]}
/> />
</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(vgutters).length - 1}
value={vgutterKey} value={vgutterKey}
onChange={this.onVGutterChange} onChange={this.onVGutterChange}
marks={this.vgutters} marks={vgutters}
step={null} step={null}
tipFormatter={value => vgutters[value]}
/> />
</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%', marginBottom: 48 }}>
<Slider <Slider
min={0} min={0}
max={Object.keys(this.colCounts).length - 1} max={Object.keys(colCounts).length - 1}
value={colCountKey} value={colCountKey}
onChange={this.onColCountChange} onChange={this.onColCountChange}
marks={this.colCounts} marks={colCounts}
step={null} step={null}
tipFormatter={value => colCounts[value]}
/> />
</div> </div>
<Row gutter={[this.gutters[gutterKey], this.vgutters[vgutterKey]]}>{cols}</Row> <Row gutter={[gutters[gutterKey], vgutters[vgutterKey]]}>{cols}</Row>
<Row gutter={[this.gutters[gutterKey], this.vgutters[vgutterKey]]}>{cols}</Row> <Row gutter={[gutters[gutterKey], vgutters[vgutterKey]]}>{cols}</Row>
<pre className="demo-code">{`<Row gutter={[${this.gutters[gutterKey]}, ${this.vgutters[vgutterKey]}]}>\n${colCode}</Row>`}</pre> <pre className="demo-code">{`<Row gutter={[${gutters[gutterKey]}, ${vgutters[vgutterKey]}]}>\n${colCode}</Row>`}</pre>
<pre className="demo-code">{`<Row gutter={[${this.gutters[gutterKey]}, ${this.vgutters[vgutterKey]}]}>\n${colCode}</Row>`}</pre> <pre className="demo-code">{`<Row gutter={[${gutters[gutterKey]}, ${vgutters[vgutterKey]}]}>\n${colCode}</Row>`}</pre>
</> </>
); );
} }