• Spin 加载中

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

    何时使用

    页面局部处于等待异步数据或正在渲染过程时,合适的加载动效会有效缓解用户的焦虑。

    代码演示

    一个简单的 loading 状态。
    expand code expand code
    import { Spin } from 'choerodon-ui';
    
    ReactDOM.render(<Spin />, mountNode);
    
    放入一个容器中。
    expand code expand code
    import { Spin } from 'choerodon-ui';
    
    ReactDOM.render(
      <div className="example">
        <Spin />
      </div>,
      mountNode);
    
    自定义描述文案。
    expand code expand code
    import { Spin, Alert } from 'choerodon-ui';
    
    ReactDOM.render(
      <Spin tip="Loading...">
        <Alert
          message="Alert message title"
          description="Further details about the context of this alert."
          type="info"
        />
      </Spin>,
      mountNode);
    
    使用自定义指示符。
    expand code expand code
    import { Spin } from 'choerodon-ui';
    
    const antIcon = (
      <span className="ant-spin-dot ant-spin-dot-spin" style={{ width: 20, height: 20 }}>
        <i />
        <i />
        <i />
        <i />
      </span>
    );
    
    ReactDOM.render(<Spin indicator={antIcon} />, mountNode);
    
    小的用于文本加载,默认用于卡片容器级加载,大的用于页面级加载。
    expand code expand code
    import { Spin } from 'choerodon-ui';
    
    ReactDOM.render(
      <div>
        <Spin size="small" />
        <Spin />
        <Spin size="large" />
      </div>,
      mountNode);
    
    可以直接把内容内嵌到 Spin 中,将现有容器变为加载状态。
    expand code expand code
    import { Spin, Switch, Alert } from 'choerodon-ui';
    
    class Card extends React.Component {
      state = { loading: false }
    
      toggle = (value) => {
        this.setState({ loading: value });
      }
    
      render() {
        return (
          <div>
            <Spin spinning={this.state.loading}>
              <Alert
                message="Alert message title"
                description="Further details about the context of this alert."
                type="info"
              />
            </Spin>
            <div style={{ marginTop: 16 }}>
              Loading state:<Switch checked={this.state.loading} onChange={this.toggle} />
            </div>
          </div>
        );
      }
    }
    
    ReactDOM.render(<Card />, mountNode);
    
    延迟显示 loading 效果。当 spinning 状态在 delay 时间内结束,则不显示 loading 状态。
    expand code expand code
    import { Spin, Alert, Switch } from 'choerodon-ui';
    
    class Card extends React.Component {
      state = { loading: false }
    
      toggle = (value) => {
        this.setState({ loading: value });
      }
    
      render() {
        const container = (
          <Alert
            message="Alert message title"
            description="Further details about the context of this alert."
            type="info"
          />
        );
        return (
          <div>
            <Spin spinning={this.state.loading} delay={500}>{container}</Spin>
            <div style={{ marginTop: 16 }}>
              Loading state:<Switch checked={this.state.loading} onChange={this.toggle} />
            </div>
          </div>
        );
      }
    }
    
    ReactDOM.render(<Card />, mountNode);
    

    API

    参数 说明 类型 默认值
    delay 延迟显示加载效果的时间(防止闪烁) number (毫秒) -
    indicator 加载指示符 ReactElement -
    size 组件大小,可选值为 small default large string ‘default’
    spinning 是否旋转 boolean true
    tip 当作为包裹元素时,可以自定义描述文案 string -
    wrapperClassName 包装器的类属性 string -