@bondli/mini-ui

Install

$ npm install @bondli/mini-ui --save

Usage

import { createElement } from 'rax';

import { StatusPage, Loading } from '@bondli/mini-ui';

import './index.css';

export default function Home() {
  return (
    <>
      <Loading />
      <StatusPage type="error" needRetry={true} />
    </>
  );
}

Component List

Loading

加载中组件

Props

|name|type|default|describe| |:---------------|:--------|:----|:----------| |showSpinner|Bealoon|false|是否显示加载中组件| |loadingPic|String|null|提示加载中的图标| |loadingText|String|null|提示加载中的文案|

Example

import { createElement } from 'rax';
import { Loading } from '@bondli/mini-ui';

export default function Home() {
  return (
    <>
      <Loading showSpinner={true} />
    </>
  );
}

StatusPage

状态页，支持三种情况：loading, empty, error

Props

|name|type|default|describe| |:---------------|:--------|:----|:----------| |type|String|empty|页面类型,empty: 无数据，空页面；error: 出错了的页面；| |needRetry|Bealoon|false|是否显示重试按钮| |retry|Function|null|点击重试的回调函数| |pic|String|null|显示的图标| |title|String|null|提示文案主信息| |text|String|null|提示文案的详细信息|

Example

import { createElement } from 'rax';
import { StatusPage } from '@bondli/mini-ui';

export default function Home() {
  return (
    <>
      <StatusPage type="empty" needRetry={true} />
    </>
  );
}