0.0.13 • Published 4 years ago
@bondli/mini-ui v0.0.13
@bondli/mini-ui
Install
$ npm install @bondli/mini-ui --saveUsage
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} />
</>
);
}