Loading加载 - 图1

Loading 加载

基本用法

  1. import { Loading, Cell, Button, ActivityIndicator } from 'zarm';
  3. class Demo extends React.Component {
  4.   render() {
  5.     return (
  6.       <>
  7.         <Cell
  8.           description={
  9.             <Button
  10.               size="xs"
  11.               onClick={() => {
  12.                 Loading.show();
  13.                 setTimeout(() => {
  14.                   Loading.hide();
  15.                 }, 3000);
  16.               }}
  17.             >
  18.               开启
  19.             </Button>
  20.           }
  21.         >
  22.           普通
  23.         </Cell>
  25.         <Cell
  26.           description={
  27.             <Button
  28.               size="xs"
  29.               onClick={() => {
  30.                 Loading.show({
  31.                   content: <ActivityIndicator size="lg" />,
  32.                   stayTime: 3000,
  33.                 });
  34.               }}
  35.             >
  36.               开启
  37.             </Button>
  38.           }
  39.         >
  40.           自定义内容
  41.         </Cell>
  42.       </>
  43.     )
  44.   }
  45. }
  47. ReactDOM.render(<Demo />, mountNode);

API

属性类型默认值说明
visiblebooleanfalse是否展示
contentReactNode-显示的内容
stayTimenumber3000自动关闭前停留的时间（单位：毫秒）
maskbooleantrue是否展示遮罩层
onMaskClick() => void-点击遮罩层时触发的回调函数
afterClose() => void-Loading隐藏后的回调函数
getContainerHTMLElement | () => HTMLElementdocument.body指定 Loading 挂载的 HTML 节点

静态方法

  1. // 显示加载 Loading.show(content: LoadingProps)
  2. Loading.show();
  3. Loading.show({
  4.   content: <ActivityIndicator size="lg" />,
  5. });
  7. // 隐藏Loading
  8. Loading.hide();