Dans cet article de veille, nous allons voir les dernières nouvelles concernant cette fonctionnalité et avoir un aperçu de ce qui est à venir pour le support de Material 3.
Mais qu'est ce que material 3 ?
Material 3 est la dernière évolution du design Material, le système de conception open source de Google. Material 3 pour Angular est implémenté comme un thème alternatif, compatible avec les mêmes composants Angular Material et mixins Sass que vous utilisez actuellement.
Les thèmes Material 3 sont basés sur des tokens de design (implémentés sous forme de propriétés CSS personnalisées). Cela vous permet de remplacer plus facilement le thème sans augmenter la spécificité des sélecteurs CSS. Cela vous permet également de remplacer de manière granulaire des propriétés spécifiques sans avoir besoin de cibler des sélecteurs CSS sur les éléments internes d’Angular Material.
Utilisation de Material 3 dans votre application
Pour utiliser Material 3 dans votre application, créez un thème M3 en Sass en utilisant matx.define-theme et transmettez-le aux mêmes mixins Sass d’Angular Material que vous utilisez actuellement :
@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);
}
Étant donné que les thèmes M3 sont entièrement basés sur les propriétés CSS personnalisées, tous les mixins de thème, de couleur, de typographie et de densité garantissent de ne produire que des propriétés CSS personnalisées sans spécificité de sélecteur supplémentaire. Cela signifie que vous pouvez définir les propriétés personnalisées au plus haut niveau et les faire descendre jusqu’aux composants qui en dépendent. Vous pouvez remplacer le thème pour une section de votre application sans vous soucier de la spécificité du sélecteur. Par exemple, les deux mises en page suivantes fonctionnent comme prévu, quelle que soit l’ordre dans lequel .dark-theme et .light-theme sont définis dans votre Sass.
<body class=« light-theme »>
Mode clair
<sidenav class=« dark-theme »>Passer au mode sombre !</sidenav>
</body>
<body class=« dark-theme »>
Mode sombre
<sidenav class=« light-theme »>Passer au mode clair !</sidenav>
</body>
