0.0.13 • Published 3 years ago
@bondli/mini-ui v0.0.13
@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} />
</>
);
}