abc-general

Generals 统一UI组件

各种小的控件集合，各种提醒文字可配置

适用范围

适合需要小控件的场景,下图为各组件效果截图：

设计规范链接：https://pro.modao.cc/app/rYK4HcqD68sJYYZWHCWyO5PuDbgF2UJ#screen=s6878562d54154285551100

代码演示

import { NoAddGroup,NoAct,NoFindReport,StocksOfEmpty,NetWorkError,Empty,Loading,CountDown,Ellipsis } from 'abc-generals';

<Empty />
<NetWordError />
<StocksOfEmpty />
<NoFindReport />
<NoAct />
<NoAddGroup />
<Loading />
<CountDown style={{ fontSize: 20 }} target={targetTime} />
<Ellipsis length={100}>{article}</Ellipsis>

API

空状态

参数	说明	类型	默认值
title	提示文字，可配置	string/element
theme	主题	string	浅色主题
img	图片	element	浅色默认图片

ps:img属性可自定义大小间距等样式，如不需要自定义样式 可直接引用如下示例

const Img = styled.img`
    margin: 0 auto;
    display:block;
    width: 129px;
    height:99px;
`
<Empty img={<Img src={require("../EmptyComponent/Empty/empty-dark.png")} alt="empty" />}/>

loading状态

参数	说明	类型	默认值
title	提示文字，可配置	string/element
color	颜色	string	灰色
type	类型	number	波浪形

CountDown倒计时

参数	说明	类型	默认值
format	时间格式化显示	Function(time)
target	目标时间	Date	-
onEnd	倒计时结束回调	function	-

文本自动省略Ellipsis

参数	说明	类型	默认值
tooltip	移动到文本展示完整内容的提示	boolean	-
length	在按照长度截取下的文本最大字符数，超过则截取省略	number	-
lines	在按照行数截取下最大的行数，超过则截取省略	number	1
fullWidthRecognition	是否将全角字符的长度视为2来计算字符串长度	boolean	-