同时支持Intact/Vue/React框架的开源高质量前端组件库——KPC

作者：爱分享Coder

https://www.toutiao.com/i6749433978710655495

KPC，全称King design Public Components，即可以将它理解成是一个组件框架，也可以称其为一门通用设计语言（King Design），它为前端多框架提供了高质量的组件库，由金山云前端团队打造，一起来看看吧！

官网

https://design.ksyun.com/

https://github.com/ksc-fe/kpc

King Designer

• 节省设计和构建模块的时间；

• 网站变更时节省时间，复用的模式更新时将在任何使用的地方自动更新，重复工作浪费的时间越少，就有更多时间做有价值的事；

• 更快的发布产品，现成的模式库缩短了新功能设计研发上线时间；

• 品牌统一性、视觉一致性、提升团队协作效率，不用每次重新创造。

为什么会出现KPC

KPC的作者为我们说明了了一个设计并开发出KPC的动机：

目前市面上已经存在大量组件库，我们为什么还要造这个轮子呢？下面我们解释下这个组件库开发的动机。随着公司业务和团队的壮大，我们很难统一全公司的技术栈，或者也没有必要统一全公司技术栈，但是统一 全公司所有产品线的设计和交互风格，却是很有必要的。众所周知，前端单页应用的开发无非基于3大框架：React/Vue/Angular。如果不同框架维护一套自己的组件库，一方面维护成本非常高，存在大量重复劳动力；另一方面，即使大家都按统一的交互设计稿开发组件库，也很难保证各个组件库设计和交互的完全统一。这就是我们开发KPC的目的，它存在的意义就是：同一套组件库源码适应不同框架，来保证不同技术栈所开发出来的产品 的风格统一(write once, run anywhere)

KPC特性

• 支持多框架 Intact / Vue / React
• 完全可自定义的主题系统
• 360°全方位定位系统
• 声明式表单验证
• 完善的文档和单元测试文档

浏览器兼容性

同时支持IE以及其它主流的浏览器，如Chrome、火狐、Opera、Safari等，其中IE支持最低到IE10

组件截图预览

本文将截取部分组件截图，以便于对其有简单的认识：

按钮

级联选择器

代码编辑器（微软Monaco Editor）

日期及区间选择器

模态对话框

抽屉组件

表单

栅格

消息提示

分页

进度条

KPC主题定制工具

KPC提供了在线主题定制工具，可以根据需要自行定制：

总结

KPC的出现可以解决项目中不同前端技术栈的兼容问题，有效的避免因为技术栈导致的各类问题，如果你的项目存在此问题，可以尝试使用KPC，Enjoy it！

---

粉丝福利

141期留言+在看幸运用户：暂无。

临走前留下，今天的福利

• 福利1：《JavaScript高级与设计模式》视频教程 获取资源请在公众号对话框中回复关键字：042，如果没有关注请扫下面的二维码
• 福利2：在看+留言，我随机抽取一位认真留言的小伙伴，给他发一个5~10不等的红包奖励

相关阅读

- END -

点赞 + 在看 + 留言，下一个幸运儿就是你！
走心的分享更容易被抽中~
开奖时间 下期文末