Ng-Matero V9 正式发布！

距离 Ng-Matero 第一版发布已经过去了半年多，该项目获得了越来越多的关注及喜爱，甚至得到了外国友人的赞助。借此项目也认识了很多对 Angular 和 Material 感兴趣的朋友，如今对项目的维护已经不单单是兴趣，更多的是一种责任。 Angular V9 已经在二月份重磅发布，拖沓了一个月，Ng-Matero V9 也终于发布！其中大部分时间耗在了 Material Extensions 的组件开发上。按照计划，Ng-Matero 直接从 0.x 过渡到到了 V9。虽然这是早已计划之内的事情，但是因为很多功能的欠缺，一直犹豫要不要直接发布 V9。最终还是激进了一把，先将版本号对齐，之后再慢慢迭代，毕竟 V9 对于 NG 来说也是一个关键的里程碑。 > Ng-Matero: https://github.com/ng-matero/ng-matero > Material Extensions: https://github.com/ng-matero/extensions  ## 再谈 Angular Material 我在之前的文章中狠狠的吹了一波 Angular Material 的设计之美，然而事实是 Angular Material 在设计及实现方面确实非常优秀，从`可访问性`、`焦点管理`、`键盘交互`、`CDK` 这些方面来看可以说一骑绝尘。 首先感叹一下，Bootstrap 的影响力实在在太大了，目前市面上 90% 的组件库都是以 Bootstrap 为蓝本，我也是 Bootstrap 的忠实粉丝。国内对 Bootstrap 的接受度明显高于 Material Design。其实 Material 和 Bootstrap 一样都可以作为基础库使用，通过修改样式进行风格定制。 唯一需要注意的是，Material Design 与 Bootstrap 最大的不同在于表单交互。Bootstrap 的表单元素相对比较独立，任何第三方表单类组件都可以直接使用。但是在 Angular Material 中就不能如此自由随意，比如在 Angular Material 的表单中使用 ng-select。虽然 ng-select 有 Material 的主题，但是直接使用的话，你会发现没办法展示错误信息。所有第三方表单组件都必须继承 `form-field` 类才能获得最佳交互体验。 我个人强烈建议将 Angular Material 作为基础库使用，样式方面可以根据喜好定制，实在无法接受 Material 的表单交互的话，也可以搭配 Bootstrap 亲自实现一个表单组件，或者直接引用其它组件库。 ## 扩展组件库 实话说 Angular Material 确实缺少一些比较常用的交互组件，在开发 Ng-Matero 的过程中，顺便开发了一套 Material Extensions 的组件库。这套组件库的组件大致有以下三类： - 完全独立开发的组件（e.g. alert） - Angular Material 组件的二次封装（e.g. data-grid） - 第三方组件的优化及包装（e.g. color-picker） 在开发扩展组件的时候，遇到了很多问题，简单说一下 [color-picker](https://ng-matero.github.io/extensions/color-picker) 的设计。Material 官网并没有关于 color-picker 的介绍，所以具体用什么形式的交互实现完全由自己探索，最终设计成现在的样子。其中还有很多的技术细节，比如焦点事件处理、判断是否在 `ShadowRoot` 组件内、浏览器窗口的 blur 交互等。目前 color-picker 在使用方式上设计的并不好，后期将会重构。  关于扩展组件库的详细内容会写一篇专门的文章介绍。如果大家觉得 Material 还有欠缺的组件或者使用不习惯的地方，可以在 GitHub 提 [issue](https://github.com/ng-matero/extensions/issues)。 最后，还是庆祝一下 Ng-Matero V9 的发布吧，如果你喜欢 Angular Material 或者对 Ng-Matero 感兴趣，欢迎与我交流！