React共享单车后台管理系统开发（记录笔记4）——4.2 Spin组件的使用

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_35812380/article/details/84553525

4.2 Spin组件的使用

用于页面和区块的加载中状态。

何时使用#

Spin(英文意思:旋转),用于页面局部需要进行加载的页面使用

合适的加载动效会有效缓解用户的焦虑。

一.Spin组件

1.Spin组件

• 引入Card:import {Spin} from ‘antd’;

• import React from "react";
  import "./ui.less";
  import { Card, Button, Spin, Icon, Alert } from "antd";
  
  export default class Loadings extends React.Component {
    render() {
      return (
        <div>
          <Card title="Spin用法" className="card-wrap">
            <Spin />
          </Card>
        </div>
      );
    }
  }
  

• 效果如下:

• 

• indicator: indicator={icon}加载指定的图标

• • const icon = <Icon type="loading"/>;
• • <Spin indicator={icon}/>

• size:small/default/large 设置大小

• 注意:style={{marginLeft:10}},marginLeft:xx ,xx是数字可以省略px

• 如果是style={{margin:'0 10px'}},xx 是字符串的情况,则不能省略px

• style={{fontSize:24}} 调整显示图标的大小

• tip:当作为包裹元素时，可以自定义描述文案

• tip:"加载中"

  //src\pages\ui\loadings.js
  import React from "react";
  import "./ui.less";
  import { Card, Button, Spin, Icon, Alert } from "antd";
  
  export default class Loadings extends React.Component {
    render() {
      const icon = <Icon type="loading" style={{ fontSize: 24 }}/>;
      return (
        <div>
          <Card title="Spin用法" className="card-wrap" >
            <Spin size="small" />
            <Spin size="default" style={{margin:'0 10px'}} />
            <Spin size="large" />
            <Spin indicator={icon} style={{marginLeft:10}}/>
          </Card>
        </div>
      );
    }
  }
  
  

二.Alert组件

警告提示，展现需要关注的信息。

import { Alert } from 'antd';

ReactDOM.render(
  <Alert message="Success Text" type="success" />,
  mountNode);

1.Alert组件

• 引入Card:import {Alert} from ‘antd’;

• type	指定警告提示的样式，有四种选择 success、info、warning、error
  message	警告提示内容(设置标题信息)
  description	警告提示的辅助性文字介绍(设置具体描述的内容)
  type	指定警告提示的样式，有四种选择 success、info、warning、error

  基本实例

  //src\pages\ui\loadings.js
  import React from "react";
  import "./ui.less";
  import { Card, Button, Spin, Icon, Alert } from "antd";
  
  export default class Loadings extends React.Component {
    render() {
      const icon = <Icon type="loading" style={{ fontSize: 24 }}/>;
      return (
        <div>
          <Card title="Spin用法" className="card-wrap" >
            <Spin size="small" />
            <Spin size="default" style={{ margin: "0 10px" }} />
            <Spin size="large" />
            <Spin indicator={icon} style={{ marginLeft: 10 }} />
          </Card>
          <Card title="内容遮罩" className="card-wrap">
            <Alert 
            message="React" 
            description="欢迎来到React高级实战课程!"
            type="info"
            />
          </Card>
        </div>
      );
    }
  }
  
  

• 

• 完整效果

• 

• //src\pages\ui\loadings.js
  import React from "react";
  import "./ui.less";
  import { Card, Button, Spin, Icon, Alert } from "antd";
  
  export default class Loadings extends React.Component {
    render() {
      const icon = <Icon type="loading" style={{ fontSize: 24 }}/>;
      return (
        <div>
          <Card title="Spin用法" className="card-wrap" >
            <Spin size="small" />
            <Spin size="default" style={{ margin: "0 10px" }} />
            <Spin size="large" />
            <Spin indicator={icon} style={{ marginLeft: 10 }} />
          </Card>
          <Card title="内容遮罩" className="card-wrap">
            <Alert 
            message="React" 
            description="欢迎来到React高级实战课程!"
            type="info"
            />
            <Alert 
            message="React" 
            description="欢迎来到React高级实战课程!"
            type="warning"
            />
          </Card>
        </div>
      );
    }
  }
  

三.Alert组件蒙版效果

Spin组件内部使用自闭和(使颜色变浅)

• tip	当作为包裹元素时，可以自定义描述文案
  	+ tip:“加载中”
  	+ style={{ marginTop: 10}} :调整页面间距

• 

• 完整实例代码

• //src\pages\ui\loadings.js
  import React from "react";
  import "./ui.less";
  import { Card, Button, Spin, Icon, Alert } from "antd";
  
  export default class Loadings extends React.Component {
    render() {
      const icon = <Icon type="loading" style={{ fontSize: 24 }} />;
      const iconLoading = <Icon type="loading" style={{ fontSize: 24 }} />;
      return (
        <div>
          <Card title="Spin用法" className="card-wrap">
            <Spin size="small" />
            <Spin size="default" style={{ margin: "0 10px" }} />
            <Spin size="large" />
            <Spin indicator={icon} style={{ marginLeft: 10 }} />
          </Card>
          <Card title="内容遮罩" className="card-wrap">
            <Alert
              message="React"
              description="欢迎来到React高级实战课程!"
              type="info"
            />
  
            <Spin>
              <Alert
                message="React"
                description="欢迎来到React高级实战课程!"
                type="warning"
                style={{ marginTop: 10 }}
              />
            </Spin>
            <Spin tip="加载中...">
              <Alert
                message="React"
                description="欢迎来到React高级实战课程!"
                type="warning"
                style={{ marginTop: 10 }}
              />
            </Spin>
            <Spin indicator={iconLoading} tip="加载中...">
              <Alert
                message="React"
                description="欢迎来到React高级实战课程!"
                type="warning"
                style={{ marginTop: 10}}
              />
            </Spin>
          </Card>
        </div>
      );
    }
  }