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> ); } }