Ng-Matero V10 正式发布!

Ng-Matero V10 正式发布!

Angular v10 在六月下旬就悄无声息的发布了,虽然 v9 的发布延期了两个月,但是 v10 并没有受影响,仍然如期而至。

相比 v9 的重量级发布,v10 并没有颠覆性的变化,主要还是 bug 修复及细节优化。通过 ng new 生成的项目目录稍有不同,不过不用担心,使用 ng update 直接升级即可,CLI 会自动帮你替换这些文件,没有任何阻碍。

再来说一下 Angular Material, v10 有一个非常大的变化,就是增加了 datepicker 的区间选择功能,不用多说,这是一个极其实用的功能。相比很多第三方实现来说,官方组件的交互细节就是赞。

在 Angular v10 发布不久,立即就有人提 issue 要求 Ng-Matero 也升级到 v10,由于受限于第三方组件库及其它细节考虑,迟迟没有更新。耽误了一个多月,趁本周不太忙,终于完成了升级。其实 v10 版本除了将 Angular 和 Angular Material 升级之外,主要是调整了 schematics ng add 的兼容问题,其它代码和 v9 最新版是一样的。前期的工作主要是完善 v9 的版本。

本文主要说一下 Ng-Matero 以及 Material Extensions 几个关键的优化点。

国际化

Material Extensions

主要是 Data Grid 的国际化支持,涉及表头、操作按钮、弹窗等,该功能的版本需要 >=9.10.0

最开始的国际化方案是遍历 columns 数据赋值,实现方式比较粗糙,不够优雅。最终参考了 ngx-formly 的设计方案,每个文本都支持传入响应式数据流,以 ngx-translate 为例,通过 translate.stream 监听语言变化即可。

columns: MtxGridColumn[] = [
    {
      header: this.translate.stream('name'),
      field: 'name',
    },
    ...
    {
      header: this.translate.stream('operation'),
      field: 'operation',
      type: 'button',
      buttons: [
        {
          type: 'basic',
          text: this.translate.stream('delete'),
          icon: 'delete',
          tooltip: this.translate.stream('delete'),
          color: 'warn',
          pop: true,
          popTitle: this.translate.stream('confirm_delete'),
          popCloseText: this.translate.stream('close'),
          popOkText: this.translate.stream('ok'),
          click: () => {
            alert('delete');
          },
        },
      ],
    },
  ];

在线示例:https://ng-matero.github.io/extensions/data-grid#i18n-ngx-translate

Ng-Matero

Ng-Matero 在 9.2.0 的时候已经增加了 i18n 相关的代码及示例,但是并不完善。在 9.6.0 的时候重点增加了 formly 的校验提示的 i18n,而且关于 formly 的全局配置模块也移到了 app 根目录。这个变动主要是考虑到 formly 表单模块的重要性以及目录结构的合理性。

Ng-Matero V10 正式发布!

在线示例:https://ng-matero.github.io/ng-matero/#/forms/dynamic

主题化

主题化的内容可以说很多,暂时不展开讲,简单说一下 Material Extensions 和 Ng-Matero 在主题配置方面的改动。

Material Extensions

扩展组件库的大部分组件都做了主题样式分离,从 9.11.0 之后必须要定义主题样式。熟悉 Material 组件库的朋友应该都不陌生。

@import '~@ng-matero/extensions/theming';

@include material-extensions-theme($theme);

主题化改动最大的组件是 mtx-select,因为 ng-select 不支持主题定制,所以 mtx-select 重写了 ng-select 的所有样式。

Ng-Matero V10 正式发布!

在线示例:https://ng-matero.github.io/extensions/select

Ng-Matero

首先对 theme 模块下面的样式进行了重构,组件样式都移到了独立的文件夹中,另外将主题样式分离出来,通过 _app-theme.scss 文件整合所有和应用相关的主题样式。

@import '~@ng-matero/extensions/theming';
@import '~@mat-datetimepicker/core/datetimepicker/datetimepicker-theme.scss';

@import '../app/theme/style/reboot-theme';
@import '../app/theme/header/header-theme';
@import '../app/theme/sidebar/sidebar-theme';
@import '../app/theme/sidemenu/sidemenu-theme';
@import '../app/theme/topmenu/topmenu-theme';
@import '../app/theme/customizer/customizer-theme';
@import '../app/shared/components/error-code/error-code-theme';

@import './custom/table-theme';

// Styles for the app that are based on the current theme.
@mixin matero-admin-theme($theme) {
  @include material-extensions-theme($theme);
  @include mat-datetimepicker-theme($theme);

  @include matero-reboot-theme($theme);
  @include matero-header-theme($theme);
  @include matero-sidebar-theme($theme);
  @include matero-sidemenu-theme($theme);
  @include matero-topmenu-theme($theme);
  @include matero-customizer-theme($theme);
  @include matero-error-code-theme($theme);

  @include custom-table-theme($theme);
}

除此之外,Ng-Matero 在样式上做了很多细节优化,比如侧边栏的主题样式。

在线示例:https://ng-matero.github.io/ng-matero/#/dashboard

总结

不知不觉,距离 Ng-Matero 第一版发布马上就满一年。短暂的一年中经历了很多,往事不堪回首,感谢所有朋友以及素未谋面的陌生人的支持。

目前的重点依然是开发 Material Extensions 组件库以及完善文档。如果大家对 Angular Material 感兴趣或者在开发过程中遇到了问题,欢迎联系我或者加入自助 QQ 群。

Ng-Matero V10 正式发布!

上一篇:vue3.0-vue-cli开发环境中如何改变vue.config.js来构建相同项目不同主题


下一篇:冲刺第二阶段 一