import React, { useState } from 'react';
import { Button } from 'antd';
import LoadBox from '../index';
const Demo = (props) => {
  const [spinning, setSpinning] = useState(true);
  const startClick = () => {
    setSpinning(true);
  };
  const endClick = () => {
    setSpinning(false);
  };
  return (
    <div
      style={{
        width: '100%',
        height: '100px',
        display: 'flex',
        alignContent: 'center',
        justifyContent: 'center',
        flexDirection: 'column',
      }}
    >
      <div
        style={{
          height: '100px',
          display: 'flex',
          alignContent: 'center',
          justifyContent: 'center',
        }}
      >
        <LoadBox spinning={spinning} tip={'加载'} />
      </div>
      <div style={{ marginTop: '20px' }}>
        <Button onClick={startClick} style={{ marginRight: '20px' }}>
          加载
        </Button>
        <Button onClick={endClick}>取消加载</Button>
      </div>
    </div>
  );
};

export default Demo;
