1.0.19 • Published 5 years ago
abc-generals v1.0.19
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 | - |