Welcome to ts-com-ui 👋

💬前言

一个 Ts-React 应用的基础组件库，参考 ant-design 和慕课网张轩老师的 Typescript + React 高仿 Antd 从零到一打造自己的组件库，提供一整套开箱即用的组件，也是自己学习路上的一个实践，高度可定制化，对于像我一样的刚入门的小白是一个很好的参考项目。

本项目自行构思得出，由个人独立编写程序研究。

注：此项目纯属个人瞎搞，正常使用请选择ant-design官方客户端。

💪 项目目标

基本实现 ant-design 常用组件的开发

项目还在编写完善中

🚀 如何运行

node 版本 [12.13.0]

✨ 开发过程

# 克隆
git clone https://github.com/powerdong/react-ts-component-library.git

# 打开项目目录
cd react-ts-component-library

# 安装依赖
yarn

# 开启本地服务运行项目
yarn start

# 常用命令
yarn start // 运行项目

yarn test // 测试用例

yarn storybook // 运行在线文档

yarn build-story // 生成静态文档

yarn build // 项目打包

欢迎 star，欢迎 issue

👀 项目进度

上一次更新(2020-06-09)： 增加 Pagination 分页组件

最近一次更新(2020-06-13)： 增加 Select 选择组件

使用中有任何问题或建议，欢迎 Issue！

本项目在不断完善中，请大家拭目以待~

技术栈

👉 主要依赖

• React
• ES6
• TypeScript
• jest
• Sass
• ESLint
• storybook
• Travis CI/CD

👏 项目文档

文档地址

📣 目标功能

• Button按钮
• Icon图标
• Divider分割线
• Grid栅格
• Layout布局
• Space间距
• Affix固钉
• Breadcrumb面包屑
• Dropdown下拉菜单
• Menu导航菜单
• Pagination分页
• PageHeader页头
• Steps步骤条
• AutoComplete自动完成
• Checkbox多选框
• Cascader级联选择
• DatePicker日期选择框
• Form表单
• InputNumber数字输入框
• Input输入框
• Mentions提及
• Rate评分
• Radio单选框
• Switch开关
• Slider滑动输入条
• Select选择器
• TreeSelect树选择
• Transfer穿梭框
• TimePicker时间选择框
• Upload上传
• Avatar头像
• Badge徽标数
• Comment评论
• Collapse折叠面板
• Carousel走马灯
• Card卡片
• Calendar日历
• Descriptions描述列表
• Empty空状态
• List列表
• Popover气泡卡片
• Statistic统计数值
• Tree树形控件
• Tooltip文字提示
• Timeline时间轴
• Tag标签
• Tabs标签页
• Table表格
• Alert警告提示
• Drawer抽屉
• Modal对话框
• Message全局提示
• Notification通知提醒框
• Progress进度条
• Popconfirm气泡确认框
• Result结果
• Spin加载中
• Skeleton骨架屏
• Anchor锚点
• BackTop回到顶部
• ConfigProvider全局化配置

📃 项目布局

.src
+-- components // 存放组件
+-- hooks // 自定义 hooks
+-- styles // 样式相关
+-- index.ts // 组件导出

本项目会长期更新，欢迎大家指出问题，共同学习

作者

👤 Lambda