Loading

Example
基本
动画尺寸
自定义提示语及其位置
自定义动画指示符
受控关闭加载
全屏
无障碍支持
API

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

何时使用 #

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

如何使用 #

Loading 默认使用 display='inline-block' 布局的方式包裹内部元素。

如果希望通栏包裹，可以修改 <Loading style={{display: 'block'}} />。

代码演示 #

基本 #

简单的 Loading 状态，包裹需要显示加载态的组件。

动画尺寸 #

通过size设置Loading动画的尺寸，只对原生的动画指示符indicator有效。

自定义提示语及其位置 #

通过tip自定义加载提示语，通过tipAlign设置提示语的位置，目前支持 right / bottom (default)。

自定义动画指示符 #

通过indicator自定义动画指示符，传入动画元素。

受控关闭加载 #

通过visible受控显示或关闭加载动画。

import React from 'react';
import ReactDOM from 'react-dom';
import { Loading, Form, Input, Button } from '@alifd/next';
const FormItem = Form.Item;
const layout = {
  labelCol: {
    fixedSpan: 4,
  },
  wrapperCol: {
    span: 18,
  },
};
class App extends React.Component {
  constructor() {
    super(...arguments);
    this.state = {
      visible: false,
    };
  }
  setVisible(visible) {
    this.setState({
      visible,
    });
  }
  render() {
    const CustomForm = () => (
      <Form style={{ width: 500 }}>
        <FormItem label="Username" {...layout}>
          <Input />
        </FormItem>
        <FormItem label="Password" {...layout}>
          <Input htmlType="password" placeholder="please input" />
        </FormItem>
        <FormItem label="Detail" {...layout}>
          <Input multiple />
        </FormItem>
      </Form>
    );
    const ControlButton = () => (
      <div style={{ paddingLeft: 80 }}>
        <Button onClick={this.setVisible.bind(this, true)} type="primary">
          Submit
        </Button>
        <Button onClick={this.setVisible.bind(this, false)} style={{ marginLeft: 5 }}>
          Cancel
        </Button>
      </div>
    );
    return (
      <div>
        <Loading visible={this.state.visible}>
          <CustomForm />
        </Loading>
        <ControlButton />
      </div>
    );
  }
}
ReactDOM.render(<App />, mountNode);

全屏 #

通过fullScreen强制全屏显示加载态，通过safeNode指定安全节点。

无障碍支持 #

默认支持通过按下Esc键退出全屏显示加载态。

API #

Loading #

参数	说明	类型	默认值
tip	自定义内容，可以传入 string 或 reactElement	React.ReactNode \| string	-
tipAlign	自定义内容位置	'right' \| 'bottom'	'bottom'
visible	loading 状态, 默认 true	boolean	true
size	设置动画尺寸	'large' \| 'medium'	'large'
indicator	自定义动画	React.ReactNode	-
color	动画颜色	string	-
fullScreen	全屏展示	boolean	-
disableScroll	当点击 document 的时候，如果包含该节点则不会关闭弹层，如果是函数需要返回 ref，如果是字符串则是该 DOM 的 id，也可以直接传入 DOM 节点，或者以上值组成的数组是否禁用滚动，仅在 fullScreen 模式下生效	boolean	false
children	子元素	React.ReactNode	-
onVisibleChange	全屏模式下，loading弹层请求关闭时触发的回调函数签名: 参数: type: 弹层关闭的来源 e: DOM 事件	(type: string, e: React.MouseEvent) => void	-
safeNode	安全节点，仅在 fullScreen 时有效	PopupProps['safeNode']	-

无障碍键盘操作指南 #

按键	说明
Esc	全屏模式下onVisibleChange接收的键盘事件，用于退出加载态