1.0.20 • Published 4 years ago
abc-general v1.0.20
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 | - |
1.0.20
4 years ago