import './demo3.css';
import Grid from '..';
import React from 'react';
import ReactDOM from 'react-dom';
import { Range } from '../..';
const { Row, Col } = Grid;
class Demo extends React.Component {
    constructor() {
        super(...arguments);
        this.state = {
            gutter: 0,
        };
        this.handleChange = gutter => {
            this.setState({
                gutter,
            });
        };
    }
    render() {
        const { gutter } = this.state;
        return (React.createElement("div", { className: "gutter-demo" },
            React.createElement(Range, { value: gutter, onChange: this.handleChange, marks: 4, step: 4, max: 16, hasTip: false, style: { width: '400px', marginLeft: '20px', marginTop: '30px' } }),
            React.createElement(Row, { gutter: gutter },
                React.createElement(Col, { span: "6" },
                    React.createElement("div", { className: "demo-col-inset" }, "col-6")),
                React.createElement(Col, { span: "6" },
                    React.createElement("div", { className: "demo-col-inset" }, "col-6")),
                React.createElement(Col, { span: "6" },
                    React.createElement("div", { className: "demo-col-inset" }, "col-6")),
                React.createElement(Col, { span: "6" },
                    React.createElement("div", { className: "demo-col-inset" }, "col-6")))));
    }
}
ReactDOM.render(React.createElement(Demo, null), document.getElementById('grid-demo-3'));
