ReactAntd(十二) ANTD-Spin

React-Antd-Spin

Loading 组件

基础用法

• 引入组件

import { Card, Spin, Alert, Button } from 'antd'

• 基础使用 size 表示大小

<Spin size="small" style={{ marginRight: '20px' }}></Spin>
<Spin size="middle" style={{ marginRight: '20px' }}></Spin>
<Spin size="large" style={{ marginRight: '20px' }}></Spin>

内容被遮罩层挡上

<Spin tip="Loading...">
  <Alert message="提示title" description="描述文字描述文字2" type="info" />
</Spin>

手动加载遮罩层,控制开关 loading

<Spin tip="Loading..." spinning={this.state.loading}>
  <Alert message="提示title" description="描述文字描述文字2" type="info" />
</Spin>

延迟加载遮罩层

• delay

<Spin delay={500} tip="Loading..." spinning={this.state.loading2}>
  <Alert message="提示title" description="描述文字描述文字2" type="info" />
</Spin>