Material 3 在 Angular v17.2 中实验性支持

原文链接:Material3 Experimental Support in Angular 17.2 – 原文作者 Miles Malerba

本文采用意译的方式

Material 3 在 Angular v17.2 中实验性支持

我们非常高兴地宣布:Angular 17.2 版本在 Angular Material 中提供了对 Material 3 主题的实验性支持。

本文告知你一个上面最新的消息,然后提供该特性一些 Material 3 支持的预览。

Material 3 是什么

Material 3Material Design 的最新版本,它是谷歌设计的开源 UI 系统。Angular 中的 Material 3 可作为选择性的主题去应用,和我们现在使用的相同的 Angular Material componentsSass mixins 兼容。

Material 3 主题基于设计 tokens(以 CSS 自定义属性的形式实现)。这让我们更容易地重写主题,而不需要增加 CSS 选择器特异性。它还能使我们精确地覆盖特性属性,而不需要针对内部 Angular Material 元素定位 CSS 选择器。

在应用中使用 Material 3

在我们应用中使用 Material 3,先在 Sass 中使用 matx.define-theme 创建一个 M3 主题,然后将其传递给我们当前使用的相同 Angular Material Sass 混合指令:

@use '@angular/material' as mat;
@use '@angular/material-experimental' as matx;

$m3-dark-theme: matx.define-theme((
  color: (
    theme-type: dark,
    primary: matx.$m3-indigo-palette,
    tertiary: matx.$m3-blue-palette,
  )
));

$m3-light-theme: matx.define-theme((
  color: (
    primary: matx.$m3-indigo-palette,
    tertiary: matx.$m3-blue-palette,
    )
));

.dark-theme {
  @include mat.all-component-themes($m3-dark-theme);
}

.light-theme {
  @include mat.all-component-themes($m3-light-theme);
}

因为 M3 主题完全基于 CSS 自定义属性,所有的主题,颜色,字体和粗细等混合指令保证只输出 CSS 自定义属性,没有额外的选择器特异性。这意味着,我们可以在更高层次自定义属性,并让它们向下流动到依赖它们的组件。我们可以为应用的一个章节重写主题,而不需要关心选择器的差异性。比如,下面的两种布局都按照我们想要的方式工作,如论在 Sass 中如何定义 .dark-theme.light-theme 的顺序。

<body class="light-theme">  
Light theme  
<sidenav class="dark-theme">With a dark sidenav!</sidenav>  
</body>
<body class="dark-theme">  
Dark theme  
<sidenav class="light-theme">With a light sidenav!</sidenav>  
</body>

通过直接定义 CSS 自定义属性,我们可以实现超越 Sass API 的细粒度定制。比如,我们可能希望强调用户特别应该谨慎的复选框:

<mat-checkbox class="scary-setting">Delete my account</mat-checkbox>
.scary-setting {  
// No need to target any internal checkbox selectors! 🎉  
- mdc-checkbox-unselected-hover-state-layer-color: red;  
- mdc-checkbox-unselected-hover-icon-color: red;  
}

与官方 Sass 混合气一样,这些属性会自动传递到它们被使用的地方,所以,如果你有一整章节需要定制复选框,你不需要将这个类应用到每一个复选框上,你只需要将它应用到这些定制的最高级别的元素就可以。

<section class="scary-setting">  
<mat-checkbox>Delete my account</mat-checkbox>  
<mat-checkbox>Also drain my bank account</mat-checkbox>  
</section>

支持 Material 2

虽然我们很高兴介绍了 Material 3,并且希望你们能够去尝试,但是 Material 2 还是全面支持的。

M2M3 主题的处理方式有一些不同。其中最明显的区别是组件颜色变量的处理。我们可以在 guide to using Material 3 文章中了解这些差异。

现在就开始

很高兴在 Angular 社区分享了这个更新内容。我们现在可以通过 guide to Material 3 指引进行新特性的尝试。

原文链接:https://juejin.cn/post/7339085241174917170 作者:Jimmy

(0)
上一篇 2024年2月26日 上午10:27
下一篇 2024年2月26日 上午10:37

相关推荐

发表评论

登录后才能评论