Element 2.0 正式发布

11,445 阅读4分钟
原文链接: zhuanlan.zhihu.com

Element 2.0 已经在今天上午发布正式版,官网也同步更新为默认显示 2.0 版本的文档(当然,你仍然可以从下拉菜单中选择查看 1.x 版本的文档)。另外,最近收到一些大陆用户反馈官网加载慢的问题,随着 2.0 版本的上线,你也可以访问部署在国内的 element-cn.eleme.io ,未来它会与 element.eleme.io 保持同步。


Element 2.0 一共积累了 210 个 commit,包含了 90 多项新增功能和优化,大致分为以下几个部分:

组件功能

支持合并单元格的 Table
  • 首先,我们提升了 Element 的易用性。比如在 1.x 版本中,如果需要改变组件的默认尺寸,只能在每个组件上添加 size 属性,而现在我们支持了尺寸的全局设置,用一行代码就可以改变所有组件的默认尺寸;主题采用 SCSS 编写,因此 SCSS 用户能够很容易地修改样式变量,从而达到自定义主题的效果。同时,我们还为部分组件增加了一些方法,方便用户通过代码控制组件的行为,增强了组件的可控性,比如 Menu 的 open 和 close 方法可以打开和关闭子菜单、Table 的 toggleRowExpansion 方法可以展开或关闭扩展行等
  • 其次,我们对用户呼声比较高的需求提供了支持,比如 Dialog 支持嵌套书写、Table 支持合并单元格、MessageBox 支持渲染 HTML 字符串等
  • 再次,组件的 API 得到了丰富,因此能够适应更多的业务场景,比如 Notification 支持配置出现位置、Loading 支持自定义图标等
  • 最后,我们还修正了 1.x 中一些功能设计不合理的地方,并且提高了部分 API 的一致性,比如表单组件的 change 事件现在仅响应用户交互,与原生事件保持了一致

具体的改动请参考更新日志

新主题

theme-chalk 中的日期选择器

2.0 版本包含了一套全新的主题:theme-chalk。这套视觉背后有着怎样的设计理念呢?负责 theme-chalk 的设计师这样说:

经过重新设计的 Element 2.0,符合当前设计趋势,适应当前时代审美。摒弃多余的设计修饰,坚持「少即是多」的设计原则。比如,高分屏普及的当下,我们让组件的整体比 1.x「大」了一圈,这样阅读体验会更加友好。与此同时,在默认组件尺寸的基础上,我们也提供了多种不同尺寸,以适应大家的不同需求。

另外,保持组件的一致性,在设计中克制、严谨地使用数值,也是 2.0 贯穿始终的原则。比如我们先定义了按钮的四种默认高度(40px、36px、32px、28px);此后输入框、选择器等其他组件都与之保持高度上的统一。无法保持统一的,如 Table 的行高,也会保持一个公差为 4 的等差数列关系。这使得基于 Element 2.0 的设计产出能保证高度的严谨性。

总体来说,2.0 与 1.x 相比较,会显得更加的现代、更加的友好。

可访问性

使用 macOS 的 VoiceOver 读取 Radio 组件的信息

我们还在 2.0 版本中提升了组件的可访问性。以下是负责这方面工作的@maranran 为大家带来的介绍:

可访问性是指页面上的组件、行为和 DOM 结构具有语义化和可操作性,使得 AT 设备可以正确地传达页面信息给残障人士,包括盲人、肢体残疾和认知残疾等。

Element 作为基础组件库,封装了底层的 DOM 结构,在 2.0 版本里,我们在可访问性方面做了一些基础工作来提升残障人士理解和操作组件的能力,同时方便 Web 开发者在自己的项目中开展可访问性工作。

我们所做的工作包括提升组件的键盘可操作性和语义化两个方面:键盘可操作性使得残障人士可以通过键盘导航到可交互组件然后使用 left、right、up、down、enter、esc 等键进行组件交互;语义化方面则是通过使用 WAI-ARIA 技术为组件添加 roles、states、properties 等属性,使得 UA 和 AT 能够正确地传达组件的语义。

文档

文档加入了搜索功能

2.0 的官网和文档也进行了相应的升级,比如提供了搜索功能、左侧导航栏独立滚动等,希望能够方便各位用户查阅。


Element 2.0 的主要贡献者为(按照首字母顺序):@baiyaaaaa @Dreamacro @Leopoldthecoder @liril-net @maranran @wacky6 @waynecz 。此外,有不少社区用户为 2.0 提出了建议,在此对他们表示感谢。

2.0 版本的发布标志着 Element 进入了一个新的时代,同时也意味着 1.x 版本将进入维护模式,我们会在 2017 年 12 月 01 日之前继续为其提供支持。

欢迎大家在项目中使用 Element 2.0,希望各位能够喜欢。