ant组件---spin

ゝ一纸荒年。 2022-04-22 11:44 343阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70][]

import React from 'react'  
import \{ Card, Button, Spin, Icon, Alert\} from  'antd'  
import './ui.less'  
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 style=\{ \{margin:'0 10px'\}\}/>  
                    <Spin size="large"/>  
                    <Spin indicator=\{icon\} style=\{ \{ marginLeft: 10 \}\} spinning=\{true\}/>  
                </Card>  
                <Card title="内容遮罩" className="card-wrap">  
                    <Alert  
                        message="React"  
                        description="欢迎来到React高级实战课程"  
                        type="info"  
                        style=\{ \{ marginBottom: 10 \}\}  
                    />  
                    <Spin>  
                        <Alert  
                            message="React"  
                            description="欢迎来到React高级实战课程"  
                            type="warning"  
                            style=\{ \{ marginBottom: 10 \}\}  
                        />  
                    </Spin>  
                    <Spin tip="加载中...">  
                        <Alert  
                            message="React"  
                            description="欢迎来到React高级实战课程"  
                            type="warning"  
                            style=\{ \{ marginBottom: 10 \}\}  
                        />  
                    </Spin>  
                    <Spin indicator=\{iconLoading\}>  
                        <Alert  
                            message="React"  
                            description="欢迎来到React高级实战课程"  
                            type="warning"  
                        />  
                    </Spin>  
                </Card>  
            </div>  
        );  
    \}  
\}

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70]: /images/20220422/99799c27cd2145e5ad3bacfda6f59e28.png