新鑫一家 發表於 2022-12-30 13:51:00

Ng-Matero v15 正式发布

<p><img src="https://img2023.cnblogs.com/blog/999445/202212/999445-20221228234311746-270343609.jpg" alt="" loading="lazy"></p>
<h2 id="前言">前言</h2>
<p>Angular 按照既定的发版计划在 11 月中旬发布了 v15 版本。推迟了一个月（几乎每个版本都是这个节奏😳），Ng-Matero 也终于更新到了 v15。其实 Ng-Matero 本身的更新非常简单，但是同步维护的 Material Extensions 这个库要先于 Ng-Matero 发布，所以大部分精力都耗费在组件库上面了。</p>
<p>我已经很久没有写关于 Ng-Matero 的发版文章了。上次介绍发版还是 v10 版本，竟然已经是两年前的事情了。在这两年的开源生涯中，主要精力都在 Material 的扩展组件库上面。值得兴奋的是，就在 2022 即将过去时，Material Extensions 的周下载量终于<strong>破万</strong>了🚀，六月份时这个数据还只是 5k+。从 0 到 5k 用了两年，而从 5k 到 1w 只用了半年。</p>
<p>本文主要聊一下 Ng-Matero 升级 v15 时遇到的一些问题及感触。同时也简单说一下近期在 v14 中新增的几个功能。</p>
<blockquote>
<p>GitHub: https://github.com/ng-matero/ng-matero</p>
</blockquote>
<h2 id="日期时间组件-datetimepicker-的重磅更新">日期时间组件 Datetimepicker 的重磅更新</h2>
<p>日期时间组件 <code>datetimepicker</code> 是在 v12 中添加的，同时也增加了 <code>moment-adapter</code> 日期模块。但是 <code>datetimepicker</code> 的时间选择模块并没有完全遵循 Material 规范（缺少时间输入模式），这也影响了很多需求的实现。在外国友人的帮助下，<code>14.6.0</code> 终于加上了时间输入功能，效果如下所示：</p>
<p><img src="https://img2023.cnblogs.com/blog/999445/202212/999445-20221228232905774-1347264509.jpg" alt="" loading="lazy"></p>
<p>👉 在线体验地址</p>
<p>时间输入功能默认是关闭的，需要添加 <code>timeInput</code> 参数启用该特性。</p>
<pre><code class="language-html">&lt;mat-form-field&gt;
&lt;input ="datetimePicker" matInput&gt;
&lt;mtx-datetimepicker #datetimePicker ="true"&gt;&lt;/mtx-datetimepicker&gt;
&lt;mtx-datetimepicker-toggle ="datetimePicker" matSuffix&gt;&lt;/mtx-datetimepicker-toggle&gt;
&lt;/mat-form-field&gt;
</code></pre>
<p>另外一个比较重要的更新是增加了 <code>luxon-adapter</code> 和 <code>date-fns-adapter</code> 两个日期模块，这算是和 Angular Material 对齐了，同样要感谢外国友人的帮助。具体使用方式可以参考这个 issue。</p>
<h2 id="侧边栏导航的焦点管理">侧边栏导航的焦点管理</h2>
<p>侧边栏导航的聚焦功能是在 <code>14.3.0</code> 中添加的，可能很多人没有注意到这个不显眼的功能（使用 TAB 键即可快速的切换焦点，按 <kbd>space</kbd> 或者 <kbd>enter</kbd> 键可以展开收起二级菜单，按 <kbd>enter</kbd> 键可以跳转路由）。具体效果如下图所示：</p>
<p><img src="https://img2023.cnblogs.com/blog/999445/202212/999445-20221229204018716-635474248.gif" alt="" loading="lazy"></p>
<p>👉 在线体验地址</p>
<p>焦点管理属于 a11y 的范畴，使用 Angular Material 可以很轻松的完成 a11y 的需求，同时 Angular CDK 中也有 <code>A11yModule</code> 用于自定义焦点管理，总之非常方便。但是我并没有借助 CDK 来实现侧边栏导航的聚焦，只是使用了原生的 HTML 标签，具体方法不在此赘述，感兴趣的小伙伴可以留言咨询。</p>
<p>另外，侧边栏菜单按钮使用语义化标签进行了优化，关于按钮的选择可以参考 Angular Material 在 Button 文档中的说明：</p>
<blockquote>
<p>Angular Material 使用原生的 <code>&lt;button&gt;</code> 和 <code>&lt;a&gt;</code> 元素，来保留默认的无障碍性体验。 当要执行某些动作时，应该使用 <code>&lt;button&gt;</code> 元素。 当用户要导航到其它视图时，应该使用 <code>&lt;a&gt;</code> 元素。</p>
</blockquote>
<p>很多人可能觉得这个功能不重要，但是作为一个<strong>交互细节强迫症</strong>患者来说，真的无法忍受按 TAB 键时焦点乱飞且不知所踪的问题。题外话，我好奇的尝试了大部分高人气的 admin 后台（包括其它技术栈 React、Vue），发现 99% 的项目都没有处理 TAB 聚焦😑。</p>
<h2 id="基于-mdc-的-angular-material-组件">基于 MDC 的 Angular Material 组件</h2>
<p><img src="https://img2023.cnblogs.com/blog/999445/202212/999445-20221229194842284-1186960836.png" alt="" loading="lazy"></p>
<p>我觉得 v15 最大的变化不是 Angular，而是 Angular Material。大部分组件都切换到了 MDC 风格，之前这些组件都是在 <code>material-experimental</code> 这个库中，现在转正了，而之前的组件都加上了 <code>legacy-</code> 前缀。</p>
<p>直接使用 <code>ng update</code> 升级的话，所有引用的组件都会自动改为 legacy 组件，所以并不会出现 break changes，但是 legacy 的组件都被标记为 <code>deprecated</code>（会显示中划线），看起来不舒服。update 完成之后可以再使用迁移工具将指定的组件升级到 MDC，还是挺方便的。详情参考官方文档 迁移到基于 MDC 的 Angular Material Components，里面详细介绍了组件的变化内容以及升级时的注意事项。</p>
<p>说一下自己的感受：</p>
<p>在第一次得知 Angular 官方将在 v15 全面迁移 MDC 时，内心还是很抵触的，主要是觉得 MDC 的很多效果做的不如 Angular Material 细腻（比如 <code>form-field</code> 的过渡动画）。但是在陆续升级完扩展组件库及 ng-matero 之后，发现 MDC 还是挺香的。很多样式得到优化，不需要自己再用 patch 方式修补（比如 <code>icon</code> 按钮的 hover 效果）。</p>
<p>影响最大的组件应该是 <code>slider</code> 和 <code>chips</code>，之前的写法都会报错，必须手动修复。再就是 <code>card</code> 组件，必须配合 <code>mat-card-content</code> 才会出现边距，如果用到的 card 组件很多，这块的工作量也挺大的。如果项目中有对 Material 样式的魔改，大部分的样式需要将 class 前缀 <code>.mat-</code> 替换成 <code>.mat-mdc-</code>。</p>
<p>另外，<code>form-field</code> 组件移除了 <code>legacy</code> 样式，其实我最喜欢的还是这个风格。比较坑的是外层容器使用了 <code>overflow: hidden</code> 属性，影响到了 Material Extensions 中的 select 组件，暂时通过设置默认参数 <code>appendTo="body"</code> 临时修复，后面再考虑更好的方案。</p>
<h2 id="停止更新的-angular-flex-layout">停止更新的 Angular Flex-Layout</h2>
<p>万万没想到 Angular Flex-Layout 竟然不再更新到 v15，虽然早就知道一直处于 beta 版本的 Flex-Layout 会在某个版本发生重大变化，但是等来的不是转正而是弃更😂。Angular 官方还专门写了一篇文章来介绍这件事，建议使用 CSS 来替换 Flex-Layout。其实 Flex-Layout 和 CSS 并不能完全划等号，Flex-Layout 是一套指令集，GitHub 上面有下面一段介绍：</p>
<blockquote>
<p>The <strong>real</strong> power of Flex Layout, however, is its <strong>responsive</strong> engine. The Responsive API enables developers to easily specify different layouts, sizing, visibilities for different viewport sizes and display devices.</p>
</blockquote>
<p>Flex-Layout 的响应式 API 确实非常强大，它的栅格不受限制，你可以使用 %、px 等任意单位设置响应式布局。使用 CSS 很难做到这一点，一般的 CSS 都是 12 或者 24 列栅格，无法随意设置栅格的列数。而且想要实现一套基于 CSS 的响应式系统，编译出来的代码非常庞大，划分的列数越细，编译出来的体积就越大。而基于 JS 动态生成的响应式系统就不会有这种烦恼。如果项目中有自定义 DSL 的话，使用 Flex-Layout 编译栅格会更加简便。</p>
<p>说了这么多，其实 Flex-Layout 只是停止更新，v14 还是可以用的😁，只是会提示依赖错误。不过 Ng-Matero 已经移除了 Flex-Layout，主要是示例项目中没有必须依赖 Flex-Layout 的地方。Ng-Matero 早就有一套和 Flex-Layout 断点相同的 grid class，只要将指令替换成 CSS class 就可以，使用方式和 Bootstrap 是一样的。</p>
<p><img src="https://img2023.cnblogs.com/blog/999445/202212/999445-20221230001644808-1584517629.jpg" alt="" loading="lazy"></p>
<p>使用 Flex-Layout 实现响应式栅格：</p>
<pre><code class="language-html">&lt;div fxLayout="row wrap" fxLayoutGap="16px grid"&gt;
&lt;div fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-sm="25" fxFlex.gt-md="20"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<p>使用 grid class 实现响应式栅格：</p>
<pre><code class="language-html">&lt;div class="row"&gt;
&lt;div class="col-sm-6 col-md-3 col-xl-2"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<h2 id="总结">总结</h2>
<p>这篇文章是本年度的第一篇文章，也是最后一篇，说来真是惭愧。Ng-Matero 从第一版发布至今已有三年半的时间，总共发布了 8 个大版本，但是很多功能依然没有时间和精力去完善。这几年持续维护了多个开源项目，感觉很疲惫，但是已经当成了生活的一部分，后面还会一直不忘初心的坚持下去，特别感谢所有朋友的支持与鼓励。</p>


</div>
<div id="MySignature" role="contentinfo">
    <div class="signature-main">
<p>感谢您的阅读，如果您对我的文章感兴趣，可以关注我的博客，我是叙帝利，下篇文章再见！</p>
<hr>
<p>高颜值的渐变编辑器组件，支持所有 CSS 渐变语法 https://github.com/acrodata/gradient-picker</p>
<p>一款小而美的颜色选择器组件 https://github.com/acrodata/color-picker</p>
<p>低代码平台必备轻量级 GUI 库 https://github.com/acrodata/gui</p>
<p>适用于 Angular 的 CodeMirror 6 组件 https://github.com/acrodata/code-editor</p>
<p>适用于 Angular 的水印组件（防删除，盲水印） https://github.com/acrodata/watermark</p>
<p>支持拖拽和缩放的弹窗组件 https://github.com/acrodata/rnd-dialog</p>
<p>开发低代码平台的必备拖拽库 https://github.com/ng-dnd/ng-dnd</p>
<p>基于 Angular Material 的中后台管理框架 https://github.com/ng-matero/ng-matero</p>
<p>Angular Material Extensions 扩展组件库 https://github.com/ng-matero/extensions</p>
<p>Unslider 轮播图插件纯 JS 实现 https://github.com/nzbin/unsliderjs</p>
<p>仿 Windows 照片查看器插件 https://github.com/nzbin/photoviewer</p>
<p>仿 Windows 照片查看器插件 jQuery 版 https://github.com/nzbin/magnify</p>
<p>完美替代 jQuery 的模块化 DOM 库 https://github.com/nzbin/domq</p>
<p>简化类名的轻量级 CSS 框架 https://github.com/nzbin/snack</p>
<p>与任意 UI 框架搭配使用的通用辅助类 https://github.com/nzbin/snack-helper</p>
<p>单元素纯 CSS 加载动画 https://github.com/nzbin/three-dots</p>
<p>有趣的 jQuery 卡片抽奖插件 https://github.com/nzbin/CardShow</p>
<p>悬疑科幻电影推荐 https://github.com/nzbin/movie-gallery</p>
<p>锻炼记忆力的小程序 https://github.com/nzbin/memory-stake</p>
</div><br><br>
来源：https://www.cnblogs.com/nzbin/p/17004811.html
頁: [1]
查看完整版本: Ng-Matero v15 正式发布