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/...
Material Extensions: https://github.com/ng-matero/...

再谈 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 的设计。Material 官网并无关于 color-picker 的介绍，因此具体用什么形式的交互实现彻底由本身探索，最终设计成如今的样子。其中还有不少的技术细节，好比焦点事件处理、判断是否在 ShadowRoot 组件内、浏览器窗口的 blur 交互等。目前 color-picker 在使用方式上设计的并很差，后期将会重构。

关于扩展组件库的详细内容会写一篇专门的文章介绍。若是你们以为 Material 还有欠缺的组件或者使用不习惯的地方，能够在 GitHub 提 issue。

最后，仍是庆祝一下 Ng-Matero V9 的发布吧，若是你喜欢 Angular Material 或者对 Ng-Matero 感兴趣，欢迎与我交流！