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

原文链接:Material3 Experimental Support in Angular 17.2 - 原文作者 Miles Malerba
本文采用意译的方式

我们非常高兴地宣布: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 混合指令:

scss 复制代码
@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 的顺序。

scss 复制代码
<body class="light-theme">  
Light theme  
<sidenav class="dark-theme">With a dark sidenav!</sidenav>  
</body>
scss 复制代码
<body class="dark-theme">  
Dark theme  
<sidenav class="light-theme">With a light sidenav!</sidenav>  
</body>

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

html 复制代码
<mat-checkbox class="scary-setting">Delete my account</mat-checkbox>
scss 复制代码
.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 混合气一样,这些属性会自动传递到它们被使用的地方,所以,如果你有一整章节需要定制复选框,你不需要将这个类应用到每一个复选框上,你只需要将它应用到这些定制的最高级别的元素就可以。

html 复制代码
<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 指引进行新特性的尝试。

相关推荐
Y42583 小时前
本地多语言切换具体操作代码
前端·javascript·vue.js
fruge5 小时前
React 2025 完全指南:核心原理、实战技巧与性能优化
javascript·react.js·性能优化
速易达网络6 小时前
Bootstrap 5 响应式网站首页模板
前端·bootstrap·html
etsuyou6 小时前
js前端this指向规则
开发语言·前端·javascript
lichong9516 小时前
Android studio 修改包名
android·java·前端·ide·android studio·大前端·大前端++
cai_huaer6 小时前
BugKu Web渗透之 cookiesWEB
前端·web安全
lichong9516 小时前
Git 检出到HEAD 再修改提交commit 会消失解决方案
java·前端·git·python·github·大前端·大前端++
友友马7 小时前
『 QT 』QT控件属性全解析 (一)
开发语言·前端·qt
不想上班只想要钱7 小时前
vue3+vite创建的项目,运行后没有 Network地址
前端·javascript·vue.js
流***陌7 小时前
手办盲盒抽赏小程序前端功能设计:兼顾收藏需求与抽赏乐趣
前端·小程序