📧叮~你有一份 DevUI 12 新版本待查收~😋

前端组件库 @ 华为

DevUI是面向企业中后台产品的开源前端解决方案,其设计价值观基于"至简"、"沉浸"、"灵活"三种自然与人文相结合的理念,旨在为设计师、前端开发者提供标准的设计体系,并满足各类落地场景,是一款企业级开箱即用的产品。如果你正在开发 ToB 的工具类产品,DevUI 将是一个很不错的选择!

DevUI是一款基于DevUI Design设计规范的Angular组件库,开源于2019年,已经持续维护2年时间,沉淀了61个组件,其中有不少都是业界组件库没有的特色组件。

前面预告了两次,今天 DevUI 12 版本终于来了!升级了最新的 Angular 12 版本,让我们一起来看看还有哪些新特性吧!

DevUI 12:全面支持 Angular Ivy 新引擎

新特性

  1. 规范化组件间距,变更为4的倍数以更好兼容缩放等计算后的展示效果
  2. Select支持多选模式下回车选中/取消选中
  3. TreeSelect支持自定义已选中项模板,支持通过设置checkRelation控制父子节点的选中关系
  4. Upload支持选择文件夹上传,单文件上传成功后保留文件显示
  5. Cascader支持设置appendTobody
  6. Button优化设置宽度后文字过长超出显示范围

Bug修复

  1. TreeSelect修复多选模式下设置treeNodeIdKey后无法删除节点的问题
  2. DataTable修复拖拽中容易失焦的问题
  3. dragDrop修复无主题设置场景下placeholder无颜色的问题
  4. Editorx中文输入法下光标定位等问题修复
  5. Tree修复调用checkAllNodes方法无法改变半选状态的问题
  6. TagsInput修复标签过长无法删除的问题

完整Changelog:12.0.0版本Changelog

特色组件展播

Datepicker Pro 日期选择器

组件链接:devui.design/components/…

特点介绍

Datepicker Pro组件借鉴移动端,利用鼠标滚轮操作范围选择,附加精准位置点击,减少用户的点击次数,缩短用户对于时间选择的操作路径。

功能详情

  1. 组件提供了单选/范围类型,支持日期/周/月份/年份的模式,支持各种自定义模板扩展,充分满足业务复杂场景
  2. 提供日历面板形式,用户可自定义嵌入各类型场景,灵活使用

datepickerPro.gif

更详细的介绍可以参考我们之前的文章:

DevUI 11.4.0 发布:DatePickerPro来啦

Category Search 分类搜索

组件链接:devui.design/components/…

特点介绍

Category Search组件将高频常用的搜索过滤内容聚合到一个组件中,形成符合搜索过滤的操作模型,减少页面冗余的搜索过滤条件的呈现,进而降低用户的理解和使用成本

功能详情

组件提供多场景菜单模式,不同操作模式下,菜单的展示内容不同:

  1. 默认提供类别信息
  2. 存在类别选中项时,展示该类别的选项详情
  3. 输入框存在搜索文本,展示符合文本的搜索分类或分类下符合条件的选项

组件提供一键清空,过滤器保存,类别过多的列表展示,最大程度兼容各类复杂的业务场景

categorySearch.gif

更详细的介绍可以参考我们之前的文章:

CategorySearch分类搜索组件初体验

Quadrant Diagram 象限图

组件链接:devui.design/components/…

特点介绍

象限图经常用于规划事件的优先级,用于分析处理数据与期望的偏离程度等。组件通过拖拽,实现对目标的位置掌控及信息呈现。

功能详情

  1. 组件通过与拖拽的联动,坐标跟随线的定位,可以轻松实现标签的移动,便于使用者进行数据的变更,掌控事项的发展;
  2. 组件内置了功能区域,提供标签的放大,缩小及象限图全屏的功能;
  3. 灵活的样式定制能力,用户可根据自己的诉求灵活搭配。

quadrantDiagram.gif

手把手教你如何使用象限图组件

Gantt 甘特图

组件链接:devui.design/components/…

特点介绍

甘特图常用于多个事务进度的跟踪与管理,每个项目以条状图的形式显示,进度与其他时间相关的进展的内在关系以可视化形式进行显示。

功能详情

  1. 基本图形形式呈现,以时间维度显示每个条目之间内在联系,支持bar、bar-parent、milestone三种不同形式条状展示;
  2. 多种交互支持:条目拖拽、进度更新、时间范围更新、快捷跳转、视图变化、全屏等;
  3. 与table搭配:可与datatable搭配使用,进行更丰富维度信息呈现与管理。

gantt.gif

致谢

感谢对DevUI组件库给予帮助的开发者们,祝大家使用愉快~

预告

DevUI Admin 2.0 版本也将在本月17号重磅发布,提供了一项神奇的黑科技,让我们拭目以待吧!

也欢迎大家参与到DevUI生态的建设中来,目前 DevUI 开源生态主要有以下产品:

  • NG DevUI:基于DevUI Design设计规范的Angular组件库
  • DevUI Icons:与DevUI组件库配套使用的字体图标库
  • NG DevUI Admin:开箱即用的企业级中后台管理系统
  • DevUI Helper:一款VSCode插件,DevUI代码助手,给你带来丝滑的代码补全体验。
  • Vue DevUI:vue3版本DevUI组件库,支持PC/Mobile(目前还在孵化中,欢迎参与建设~)
文章分类
前端