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

栏目: 软件资讯 · 发布时间: 4年前

内容简介:自从17年11月份对外公布以来,KPC已经经过了8个月的迭代,期间发布了几十个正式版本,但一直没有到1.0,因为我们觉得1.0是个里程碑版本,我们必须做的足够完善才敢称之为1.0。而如今我们有信心对外宣布:KPC 1.0...

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

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

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

新增4个常用组件

1. 走马灯(轮播图)组件Carousel

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

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

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

Monaco Editor是VSCode的web版,功能非常强大

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

3. 图钉组件Affix

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

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

4. 卡片组件Card

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

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

新增大量特性

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

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

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

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

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

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

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

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

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

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

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

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

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

6. 新增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';

当然你也可以设置alias来简化引用路径

细节打磨

1.0中我们使用展示/隐藏(show/hide)动画来替代之前的创建/删除(create/remove)动画,同时打磨动画的细节,使动画更自然流畅。

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

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

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

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

文档

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

Vue示例:https://codesandbox.io/embed/serverless-wood-n6ppy?fontsize=14

React示例:https://codesandbox.io/embed/practical-chatelet-3phlh?fontsize=14

结语

没有什么东西是完美的,但应该保持追求完美的赤子之心。同样,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用法

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

设计模式之禅

设计模式之禅

秦小波 / 机械工业出版社 / 2010年3月 / 69.00元

如果说“四人帮”的《设计模式》是设计模式领域的“圣经”,那么之后出版的各种关于设计模式的书都可称之为“圣经”的“注释版”或“圣经的故事”。本书是得道者对“圣经”的“禅悟”,它既不像“圣经”那样因为惜字如金、字字珠玑而深奥、晦涩和难懂,又比“圣经”的“注释版”更深刻和全面、更通俗和生动、更接近开发者遇到的实践场景,更具指导性。本书兼收并蓄、博采众长,也许是设计模式领域里的下一个里程碑之作。 全......一起来看看 《设计模式之禅》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

URL 编码/解码
URL 编码/解码

URL 编码/解码