React+AntDesign入门：四、AntDesign UI组件-局部加载效果Spin

Z时代
2024-01-10
分类：综合

react

AntDesign UI组件-局部加载效果Spin

1.简单的使用一下

新建用于展示局部加载效果Spin的页面UiSpin.js

代码：

/**
 * AntDesign UI 局部加载效果Spin示例
 */
import React from 'react'
import {Card, Spin, Icon} from 'antd'
class UiSpin extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
render() {
    return (
      <div>
        <Card title="Spin示例">
          <Spin size={"small"}></Spin>
          <Spin/>
          <Spin size={"large"}></Spin>
        </Card>
      </div>
    )
  }
}
export default UiSpin;

效果：

2.在信息框Alert上加载效果

只需要将要被加载的内容放在中即可

代码：

/**
 * AntDesign UI 局部加载效果Spin示例
 */
import React from 'react'
import {Card, Spin, Icon, Alert} from 'antd'
class UiSpin extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    //使用我们自定义的Icon,使用type给Icon指定一个图标，为一个圆圈
    const loadingIcon = <Icon type="loading" style={{fontSize:24}}/>
    return (
      <div>
        <Card title="Spin示例">
          <Spin size={"small"}></Spin>
          <Spin/>
          <Spin size={"large"}></Spin>
          {/*通过indicator指定局部加载效果的图标*/}
          <Spin indicator={loadingIcon}></Spin>
        </Card>
        <Card title="内容遮罩-信息框Alert">
          <Alert message="信息框Alert"
                 description="这是信息框Aleat的description"
                 type="info" />
          <Alert message="警告框Alert"
                 description="这是警告框Aleat的description"
                 type="warning" />
        </Card>
        <Card title="内容遮罩-信息框Alert-加载效果">
          <Spin>
            <Alert message="信息框Alert"
                   description="这是信息框Aleat的description"
                   type="info" />
          </Spin>
          <Spin tip="加载中...">
            <Alert message="信息框Alert"
                   description="这是信息框Aleat的description"
                   type="info" />
          </Spin>
        </Card>
      </div>
    )
  }
}
export default UiSpin;