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 指引进行新特性的尝试。

相关推荐
码事漫谈几秒前
解决 Anki 启动器下载错误的完整指南
前端
im_AMBER20 分钟前
Web 开发 27
前端·javascript·笔记·后端·学习·web
蓝胖子的多啦A梦1 小时前
低版本Chrome导致弹框无法滚动的解决方案
前端·css·html·chrome浏览器·版本不同造成问题·弹框页面无法滚动
玩代码1 小时前
vue项目安装chromedriver超时解决办法
前端·javascript·vue.js
訾博ZiBo1 小时前
React 状态管理中的循环更新陷阱与解决方案
前端
StarPrayers.1 小时前
旅行商问题(TSP)(2)(heuristics.py)(TSP 的两种贪心启发式算法实现)
前端·人工智能·python·算法·pycharm·启发式算法
一壶浊酒..2 小时前
ajax局部更新
前端·ajax·okhttp
苏打水com2 小时前
JavaScript 面试题标准答案模板(对应前文核心考点)
javascript·面试
Wx-bishekaifayuan2 小时前
基于微信小程序的社区图书共享平台设计与实现 计算机毕业设计源码44991
javascript·vue.js·windows·mysql·pycharm·tomcat·php
DoraBigHead2 小时前
React 架构重生记:从递归地狱到时间切片
前端·javascript·react.js