mmc-space/boty-design

react 组件库｜组件库学习｜从零造轮子｜pc组件库

boty-design

从零打造一套企业级react 组件库生态

文档

中文文档

安装

$ npm install @boty-design/components --save

$ yarn add @boty-design/components

$ pnpm i @boty-design/components

使用

import { Button } from "@boty-design/components";

const App = () => (
     <Button onClick={handlerSyncClick} loading={true}  >
        异步按钮
      </Button>
);

技术

• 框架支持【react】 https://zh-hans.reactjs.org/
• 组件学习【ant design】 https://ant.design/index-cn
• 本地开发【vite】 https://cn.vitejs.dev/
• 项目文档【umi文档】 https://d.umijs.org/zh-CN
• 持续集成【Travis CI】 https://travis-ci.org
• 持续部署【 github Aciton】 https://docs.github.com/cn/actions
• npm管理【lerna】https://github.com/lerna/lerna
• 组件生成【plop】https://github.com/plopjs/plop

待做清单

✅ 已完成 ⭐️ 完善中 ❌ 未开始

通用

• Button 按钮 ⭐️
• Layout 布局 ❌
• Icon 图标 ❌

表单

• Form 表单组 ⭐️
• Field 表单单位 ⭐️
• Input 输入框 ❌
• Radio单选框 ❌
• Switch开关 ❌
• Checkbox多选框 ❌
• Select 选择器 ❌
• Slider 滑块 ❌
• TimePicker 时间选择器 ❌
• DatePicker 日期选择器 ❌
• DateTimePicker 日期时间选择器 ❌
• Upload 上传 ❌

数据

• Table 表格 ❌
• tree 树 ❌
• Tag 标签 ❌
• Progress 进度条 ❌
• Pagination 分页 ❌
• Badge 标记 ❌

交互

• Dialog 对话框 ❌
• MessageBox 弹框 ❌
• Drawer 抽屉 ❌
• Calendar 日历 ❌
• Carousel 轮播走马灯 ❌

反馈

• Message 消息提示 ❌
• loading 加载 ❌
• Notification 通知 ❌

LICENSE

MIT