import React, { useState } from 'react'; import { Col, Row, Slider } from 'antd'; const gutters: Record = {}; const vgutters: Record = {}; const colCounts: Record = {}; [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(
Column
, ); colCode += ` \n`; } return ( <> Horizontal Gutter (px):
gutters[value] }} />
Vertical Gutter (px):
vgutters[value] }} />
Column Count:
colCounts[value] }} />
{cols} {cols} Another Row: {cols}
{`\n${colCode}\n${colCode}`}
{`\n${colCode}`}
); }; export default App;