AgentSkillsCN

m3-web-angular

在 Angular 中使用 Angular Material（@angular/material）实现 Material Design 3，并提供一流的 M3 支持。涵盖通过设计令牌、SCSS 混入、CLI 脚手架以及组件使用来配置 M3 主题。在构建采用 M3 风格的 Angular 应用时，可优先选用此方案。

SKILL.md
--- frontmatter
name: m3-web-angular
description: Implement Material Design 3 in Angular using Angular Material (@angular/material) with first-class M3 support. Covers M3 theming via design tokens, SCSS mixins, CLI schematics, and component usage. Use this when building M3-styled Angular applications.
license: Apache-2.0

Material Design 3 — Angular Material

Overview

Angular Material (@angular/material) has first-class M3 support since v17.2+. The Angular team works closely with Google's Material team. Full M3 theming via design tokens, SCSS mixins, and CLI schematics.

Keywords: Material Design 3, M3, Angular, Angular Material, @angular/material, SCSS, design tokens, schematics

When to Use

  • •Angular projects — this is the most official, well-integrated M3 implementation for any web framework
  • •Enterprise applications requiring official Google M3 support
  • •Projects using Angular CLI and schematics

Install

bash
ng add @angular/material

Generate M3 Theme

bash
ng generate @angular/material:m3-theme

Theme Setup (SCSS)

scss
@use '@angular/material' as mat;
@include mat.core();

$my-theme: mat.define-theme((
  color: (
    theme-type: light,
    primary: #6750A4,
    secondary: #625B71,
    tertiary: #7D5260,
  ),
));

$dark-theme: mat.define-theme((
  color: (
    theme-type: dark,
    primary: #6750A4,
    secondary: #625B71,
    tertiary: #7D5260,
  ),
));

:root {
  @include mat.all-component-themes($my-theme);
  color-scheme: light;
}

html.dark-theme {
  @include mat.all-component-colors($dark-theme);
  color-scheme: dark;
}

Component Examples

Buttons

html
<button mat-raised-button color="primary">Filled</button>
<button mat-stroked-button>Outlined</button>
<button mat-button>Text</button>
<button mat-fab><mat-icon>add</mat-icon></button>

Cards

html
<mat-card appearance="raised">
  <mat-card-header>
    <mat-card-title>Title</mat-card-title>
  </mat-card-header>
  <mat-card-content>Content</mat-card-content>
  <mat-card-actions>
    <button mat-button>Action</button>
  </mat-card-actions>
</mat-card>

Text Fields

html
<mat-form-field appearance="outline">
  <mat-label>Email</mat-label>
  <input matInput type="email" />
</mat-form-field>

<mat-form-field appearance="fill">
  <mat-label>Name</mat-label>
  <input matInput />
</mat-form-field>

Navigation

html
<mat-toolbar color="primary">
  <span>My App</span>
</mat-toolbar>

<mat-tab-group>
  <mat-tab label="Home">Home content</mat-tab>
  <mat-tab label="Search">Search content</mat-tab>
</mat-tab-group>

<mat-sidenav-container>
  <mat-sidenav mode="side" opened>Navigation</mat-sidenav>
  <mat-sidenav-content>Main content</mat-sidenav-content>
</mat-sidenav-container>

Dialogs

html
<button mat-raised-button (click)="openDialog()">Open Dialog</button>
typescript
import { MatDialog } from '@angular/material/dialog';

constructor(private dialog: MatDialog) {}

openDialog() {
  this.dialog.open(MyDialogComponent);
}

Checklist

  • • M3 theme generated via ng generate @angular/material:m3-theme
  • • Primary, secondary, and tertiary colors defined
  • • Both light and dark theme variants configured
  • • SCSS mixins applied at root level
  • • Components use color="primary" binding for theming
  • • Typography uses M3 type scale via Angular Material's typography system

Resources