mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-23 23:18:36 +08:00
14a1e6bd51
* feat: tsconfig enable strict * feat: add no-explicit-any * feat: strict * feat: as THEME * feat: 优化 keys 类型写法 * feat: demo remove any * feat: as number * feat: this any * feat: add eslint * feat: cascader * feat: props any * feat: remove any * feat: remove any * feat: any 提示错误 * feat: remove any * feat: add eslint * feat: 允许 T = any 存在 * feat: color funciton * feat: 恢复 lint * feat: merge master * feat: as ReactElement * feat: type
86 lines
2.5 KiB
TypeScript
86 lines
2.5 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Col, Row, Slider } from 'antd';
|
|
|
|
const gutters: Record<PropertyKey, number> = {};
|
|
const vgutters: Record<PropertyKey, number> = {};
|
|
const colCounts: Record<PropertyKey, number> = {};
|
|
|
|
[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;
|
|
});
|
|
|
|
const App: React.FC = () => {
|
|
const [gutterKey, setGutterKey] = useState(1);
|
|
const [vgutterKey, setVgutterKey] = useState(1);
|
|
const [colCountKey, setColCountKey] = useState(2);
|
|
|
|
const cols = [];
|
|
const colCount = colCounts[colCountKey];
|
|
let colCode = '';
|
|
for (let i = 0; i < colCount; i++) {
|
|
cols.push(
|
|
<Col key={i.toString()} span={24 / colCount}>
|
|
<div>Column</div>
|
|
</Col>,
|
|
);
|
|
colCode += ` <Col span={${24 / colCount}} />\n`;
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<span>Horizontal Gutter (px): </span>
|
|
<div style={{ width: '50%' }}>
|
|
<Slider
|
|
min={0}
|
|
max={Object.keys(gutters).length - 1}
|
|
value={gutterKey}
|
|
onChange={setGutterKey}
|
|
marks={gutters}
|
|
step={null}
|
|
tooltip={{ formatter: (value) => gutters[value as number] }}
|
|
/>
|
|
</div>
|
|
<span>Vertical Gutter (px): </span>
|
|
<div style={{ width: '50%' }}>
|
|
<Slider
|
|
min={0}
|
|
max={Object.keys(vgutters).length - 1}
|
|
value={vgutterKey}
|
|
onChange={setVgutterKey}
|
|
marks={vgutters}
|
|
step={null}
|
|
tooltip={{ formatter: (value) => vgutters[value as number] }}
|
|
/>
|
|
</div>
|
|
<span>Column Count:</span>
|
|
<div style={{ width: '50%', marginBottom: 48 }}>
|
|
<Slider
|
|
min={0}
|
|
max={Object.keys(colCounts).length - 1}
|
|
value={colCountKey}
|
|
onChange={setColCountKey}
|
|
marks={colCounts}
|
|
step={null}
|
|
tooltip={{ formatter: (value) => colCounts[value as number] }}
|
|
/>
|
|
</div>
|
|
<Row gutter={[gutters[gutterKey], vgutters[vgutterKey]]}>
|
|
{cols}
|
|
{cols}
|
|
</Row>
|
|
Another Row:
|
|
<Row gutter={[gutters[gutterKey], vgutters[vgutterKey]]}>{cols}</Row>
|
|
<pre className="demo-code">{`<Row gutter={[${gutters[gutterKey]}, ${vgutters[vgutterKey]}]}>\n${colCode}\n${colCode}</Row>`}</pre>
|
|
<pre className="demo-code">{`<Row gutter={[${gutters[gutterKey]}, ${vgutters[vgutterKey]}]}>\n${colCode}</Row>`}</pre>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default App;
|