首先说下哈,不是造轮子,从来也不提倡造轮子…
作为一名前端程序员,个人感觉轮子已经够多了,留下来的时间不如摸鱼,比如发发沸点、逛逛掘金,或者下班了陪陪女朋友
最近发现了一个好的工具 dumi
突然心血来潮,想起过往使用 antd 的诸多不便,索性基于 antd 自己搞一个易用版 antd
基于 antd 的也有许多,比如 procomponent ,我也认真去看过,感觉还不错,但是写法上感觉很奇怪,明明是 antd 的升级版,为何 API 设计的如此不同,凭空增加了学习成本,所以,秉承能不造轮子就不造轮子的原则,还是自己封装一下吧。
按照国际惯例,先上链接
- 组件库主页 remons-components
- github remons-components
还请各位客官如果觉得不足的话提 issue, 同时也别忘了帮忙点个 star
正文开始
ActionList
行动点组
你可以看做是按钮组,当然,他们也可以在表格的操作列中使用,为了方便书写,这里还对事件进行了封装,actions 是数据源,继承了 Button 的 API const onActionClick = (key, data) => {
console.log(key, data);
};
return <ActionList onActionClick={
onActionClick} actions={
actions} />;
ButtonBar
按钮栏
通常用来做编辑页的提交重置,affixProps 还可以传递 Affix API
Descriptions
描述列表
完全继承 Descriptions API,只不过使用了配置化的方式
import React from 'react';
import {
Descriptions } from 'remons-components';
const dataSource = {
username: 'Zhou Maomao',
tel: 1810000000,
live: 'Hangzhou, Zhejiang',
remark: 'empty',
address: 'No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China',
month: 1658217401814,
};
const columns = [
{
label