支持多框架的组件库KPC 1.0正式发布

自从17年11月份对外公布以来,KPC已经通过了8个月的迭代,期间发布了几十个正式版本,但一直没有到1.0,由于咱们以为1.0是个里程碑版本,咱们必须作的足够完善才敢称之为1.0。而现在咱们有信心对外宣布:KPC 1.0终于来了!css

其实距离0.0.1的发布,到如今已经1年多了,可是KPC并无收货太多的关注,伴随着一个接一个的小版本迭代,github上星星的数量也不紧不慢地突破100大关。但咱们并无放弃对KPC的细心呵护,每一次star,每个issue,都使咱们备受鼓舞,促使咱们打磨每个细节,力争作出本身的特点,作到精益求精。vue

关注KPC的用户应该注意到了,KPC已经两个月没有发版了,是的,由于咱们这段时间一直在专一1.0的开发,下面便说说这两个月的工做成果吧。react

新增4个经常使用组件

走马灯(轮播图)组件Carousel

除了支持最基本的走马灯效果外,Carousel还支持同时展现多个内容块webpack

图片描述

基于Monaco Editor的代码编辑器组件Code

Monaco Editor是VSCode的web版,功能很是强大git

图片描述

图钉组件Affix

图钉组件,用于在滚动页面时,固定一些内容es6

图片描述

卡片组件Card

除了经常使用的卡片外,还支持分栏卡片github

图片描述

新增大量特性

除了上述新增的组件外,对现有组件的功能也进行了大量优化和改进。web

表格组件Table支持表头分组,合并单元格,保存列宽信息等功能

图片描述

弹窗组件Dialog支持静态方法定义带标题的样式

图片描述

图片描述

时间选择组件Timepicker支持步长设置时不展现秒钟

图片描述

提示弹层组件Tooltip,新增深色主题dark,而且默认为深色

图片描述
图片描述

(级联)选择框组件Cascader/Select新增无数据提示

图片描述

新增Vue/React编译包,减小配置项

以前须要配置webpack alias才能是KPC在Vue/React下使用,如今不须要,直接引用相应的组件便可,例如:浏览器

Vue: import Button from 'kpc/@vue/@css/components/button';
React: import Button from 'kpc/@react/@css/components/button';babel

固然你也能够设置alias来简化引用路径

细节打磨

1.0中咱们使用展现/隐藏(show/hide)动画来替代以前的建立/删除(create/remove)动画,同时打磨动画的细节,使动画更天然流畅。

例如:以前的版本中,若是快速点击,使一个展开的元素在收起和展开之间切换,则收起动画会当即跳至最终状态,而后再展开,这样会显得动画很突兀

图片描述
而1.0中,对于上述状况,它不会跳至最终状态,而是从收起的中间状态回到展开状态,使动画更天然
图片描述

文档

1.0中对部分文档进行了补充,使之更易上手。同时对文档中的示例代码,能够在CodeSandbox中打开进行预览和调试

Vue示例:Edit serverless-wood-n6ppy
React示例:Edit practical-chatelet-3phlh

结语

没有什么东西是完美的,但应该保持追求完美的赤子之心。一样,1.0也并不是完美,还有大量工做亟待完成,它只是漫漫长征路上的第一个落脚点而已,至此,再出发,开启新的篇章...

KPC文档 github

更新日志

新增组件

  1. Add 新增图钉组件Affix,用于滚动页面固定某些内容 #300
  2. Add 新增走马灯(轮播图)组件Carousel #299
  3. Add 新增代码编辑器组件Code,基于Monaco Editor(VSCode)封装而来 #288
  4. Add 新增卡片组件Card #241

新增特性

  1. Add 新增全局配置方法configure,使用configure({useWrapper: true})能够开启Dropdown/Tooltip兼容模式 #291
  2. Add Tree若是初始化数据中包含children,当异步加载时,不会再次调用loadData函数去加载数据 #290
  3. Add Table支持保存调整列宽后的列宽信息 #292
  4. Add Table新增表头分组功能 #265
  5. Add Table新增合并单元格功能 #265
  6. Add Upload支持文件类型强检测,不合法是抛出error事件,由于浏览器accept属性仅仅只是建议类型,并不能限制类型 #271
  7. Add Progress新增warning状态 #301
  8. Add Tree支持父子Checkbox非关联模式,该模式下父子的选中状态单独控制,互不影响 #302
  9. Add FormItem新增fluid属性,展现100%宽度的表单项 #303
  10. Add 新增Vue/React编译包,减小webpack alias配置项 #308
  11. Add Button组件新增secondarylink类型 #320
  12. Add Dialog支持点击遮罩层关闭弹窗 #324
  13. Add Dialog静态方法支持展现带标题title的弹窗 #324
  14. Add SelectCascader在无内容时,展现“无内容”的提示层 #321
  15. Add DatepickerTimepicker新增“肯定”按钮,以方便用户关闭弹层 #322
  16. Add Timepicker支持设置step时,隐藏“分钟”或/和“秒钟”的展现 #323
  17. Add Tooltip新增主题支持,默认展现为dark主题 #326
  18. Add Transfer新增list header扩展点,以及左右箭头按钮的控制,使之能够更灵活地定义穿梭框逻辑 #314
  19. AddTable fixHeader设为true时,表格高度自动设为100%,而后根据父容器高度肯定表格体的高度来展现滚动条 #310

组件优化

  1. Refactor 优化Table hover以及滚动的性能 #310
  2. Refactor 优化Slider滚动条热区,更容易点击 #307
  3. Refactor 优化弹出元素动画,使用show/hide动画替代create/remove动画,使动画更流畅 #278

Bug修复

  1. Fix 修复错误地引入babel-types致使可能不存在该模块而编译报错的问题 #283
  2. Fix 修复Pagination当页码过长时溢出的问题 #286
  3. Fix 修复Timepicker范围选择时,首次弹出若是先选择结束时间,时间取值不对的问题 #289
  4. Fix 修复Table调整列宽后,若是表格容器宽度变大,会出现表格宽度小于容器宽度的状况 #293
  5. Fix 修复SliderSpinner输入框时,在设置了step的状况下,输入的过程当中也会修正值,致使没法输入想要的值的问题 #294
  6. Fix 修复webpack配置可能禁用了require.ensure(如:新版Create React App)致使有些异步加载的模块报错的问题 #304
  7. Fix 修复Switch点击滑块,因为click事件被stopPropagation而在外部监听不到click事件的问题 #309
  8. Fix 修复Table当表格高度固定时,data改变致使出现滚动条,固定表头和表格体没对齐的问题 #310
  9. Fix 修复默认主题下Message icon颜色丢失的问题 #317

破坏性变动

  1. Change Drawer由以前的点击抽屉外任何区域关闭抽屉,改成点击遮罩层才关闭
  2. Change Datepicker在选择时间时,去掉无用的年月展现信息
  3. Change 使用es6 module进行构建,例如代码编译优化 #297

文档

  1. Add 支持Vue/React示例代码,在CodeSandbox中打开 #267
  2. Vue/React开始文档补充CDN用法
相关文章
相关标签/搜索