emptyStatus 页面缺省态组件

渲染出一个缺省态组件

特别提示

3.0.0 版本后默认视图替换为lottie动画，实际预览效果请点击右侧”查看demo“，使用客户端扫码预览

安装

npm install @qnpm/q-components --save --registry=http://npmrepo.corp.qunar.com

使用说明

显示代码

import { EmptyStatus } from '@qnpm/q-components';

<EmptyStatus type="netError" text="网络异常" />
<EmptyStatus type="noResult" text="搜索无结果" />
<EmptyStatus type="noData" text="获取数据失败" />
<EmptyStatus type="emptyData" text="数据为空" />
<EmptyStatus type="noCollections" text="无收藏" />
<EmptyStatus type="noOrders" text="无订单" />
<EmptyStatus type="defaultError" text="默认错误" />

显示代码

import { EmptyStatus } from '@qnpm/q-components';

<EmptyStatus type="noResult" size="normal" />
<EmptyStatus type="noResult" size="small" />

显示代码

import { EmptyStatus } from '@qnpm/q-components';

<EmptyStatus
  type="emptyData"
  showButton
  buttonText="按钮"
  onPress={() => {}}
/>,
<EmptyStatus
  type="emptyData"
  showButton
  buttonText="按钮自定义背景色"
  onPress={() => {}}
  customStyle={{buttonBgColor: 'red'}}
/>

显示代码

import { EmptyStatus } from '@qnpm/q-components';

<EmptyStatus
 type="emptyData"
 title="标题"
 text="自定义文本内容"
/>

显示代码

import { EmptyStatus } from '@qnpm/q-components';

<EmptyStatus
 mode="lottie"
 type="emptyData"
 title="标题"
 text="自定义文本内容"
/>

属性说明

属性名 类型 默认值 是否必须 说明
buttonText string - false 按钮文案
customStyle Object - false 自定义样式，目前仅支持buttonBgColor
needScale boolean - false 是否根据屏幕大小缩放
onPress Function - false 按钮点击回调
showButton boolean false false 是否展示按钮
size normal|small normal false 缺省态展示大小
text string | ReactElement<any> - false 文案
title string - false 标题
type netError|noResult|noData
emptyData		 - false 缺省态类型,netError和noData 默认带按钮
mode lottie|image lottie false 图画展示模式
Dialog
FloatingButton