@rax-ui/loading
TypeScript icon, indicating that this package has built-in type declarations

1.0.0-beta.62 • Public • Published

display: Loading family: other

Loading

加载框

API

函数式调用

适合全局页面的加载框

import Loading from '@rax-ui/loading';

// 默认
Loading.show();

// 自定义
Loading.show({
  mask: true, // 默认 false
  content: '加载中', // 底部文案
  icon: 'https://img.alicdn.com/tfs/TB1aks3PpXXXXcXXFXXXXXXXXXX-150-150.gif', // 自定义加载动画图
});

// 关闭
Loading.hide();

组件式调用

适合区域的加载框

import { createElement, useState, useEffect } from 'rax';
import Loading from '@rax-ui/loading';
import View from 'rax-view';
import Text from 'rax-text';

function App() {
  const [visible, setVisible] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setVisible(false);
    }, 5000);
  });

  return (
    <View>
      <Text>自定义内容</Text>
      <Loading visible={visible} content="加载中" />
    </View>
  );
}

Props

名称 说明 类型 默认值
visible 是否显示 boolean false
mask 是否带有蒙层 boolean false
icon 加载动画图 string 地址
content 加载文案 string

CSS API

名称 说明
loading 加载框
loading--mask 蒙层样式
loading__icon 加载动画图
loading__content 文案

Readme

Keywords

Package Sidebar

Install

npm i @rax-ui/loading

Weekly Downloads

1

Version

1.0.0-beta.62

License

none

Unpacked Size

10.9 kB

Total Files

8

Last publish

Collaborators

  • lianmin
  • amdgigabyte
  • myronliu347