mcpField
M
material-design-3-components

material-design-3-components

github.com/shelbeely设计与 UI552 次安装36 周前更新
代码仓库

关于 material-design-3-components

为设计师和前端开发者提供 Material Design 3 组件规范参考，涵盖 Material You 基础与 M3 Expressive 扩展，并按六类组件组织。

主要功能

  1. 01覆盖六类 M3 组件
  2. 02说明颜色、形状、排版等设计令牌
  3. 03提供组件尺寸与样式示例
  4. 04涵盖 M3 Expressive 新组件

适用场景

  1. 01查阅按钮、卡片和导航规范
  2. 02为界面实现选择组件变体
  3. 03参考组件尺寸与颜色令牌

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/shelbeely/shelbeely-agent-skills --skill material-design-3-components

安装后在 Claude Code 中输入/material-design-3-components确认已加载。

附带文件component-tokens.mdexamples/component-anatomy.svg

详细介绍

Material Design 3 组件

概览

此技能提供 Material Design 3（M3）所有组件的全面参考，涵盖从 Material You 基础到 M3 Expressive 增强功能的完整规范。每个组件都遵循 M3 基于令牌的设计系统，涵盖颜色、形状、排版、动效和布局。

关键词：Material Design 3、M3、组件、按钮、卡片、对话框、导航、FAB、芯片、文本字段、标签页、菜单、Snackbar、底部工作表、Material You、M3 Expressive

组件类别

M3 组件分为六类：

  1. 操作 — 按钮、FAB、图标按钮、分段按钮、拆分按钮、按钮组
  2. 容器 — 卡片、轮播、分隔线、列表、底部工作表、侧边工作表
  3. 沟通 — 徽标、对话框、进度指示器、Snackbar、工具提示
  4. 导航 — 应用栏、导航栏、导航抽屉、导航轨道、标签页、搜索
  5. 选择 — 复选框、芯片、日期／时间选择器、菜单、单选按钮、滑块、开关
  6. 文本输入 — 文本字段（填充式、轮廓式）

操作组件

按钮

M3 定义了五种强调程度递增的按钮类型：

类型强调程度用途
文本按钮最低可选操作、较不重要的操作
轮廓按钮低重要但非主要的操作
色调按钮中需要比轮廓按钮更突出强调的操作
填充按钮高主要操作、主要 CTA
高架按钮中用于视觉元素繁杂背景上的操作

按钮通用规格：

  • 高度：40dp
  • 最小宽度：48dp
  • 内边距：水平 24dp，垂直 10dp
  • 形状：全圆角（胶囊形）
  • 排版：大号标签
  • 图标间距：8dp
/* Filled Button */
.md3-button-filled {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  border-radius: var(--md-sys-shape-corner-full);
  padding: 10px 24px;
  min-height: 40px;
  font-family: var(--md-sys-typescale-label-large-font);
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: var(--md-sys-typescale-label-large-weight);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  border: none;
  cursor: pointer;
}

/* Outlined Button */
.md3-button-outlined {
  background-color: transparent;
  color: var(--md-sys-color-primary);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-full);
  padding: 10px 24px;
  min-height: 40px;
}

/* Tonal Button */
.md3-button-tonal {
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  border-radius: var(--md-sys-shape-corner-full);
  padding: 10px 24px;
  min-height: 40px;
  border: none;
}

/* Text Button */
.md3-button-text {
  background-color: transparent;
  color: var(--md-sys-color-primary);
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  padding: 10px 12px;
  min-height: 40px;
}

/* Elevated Button */
.md3-button-elevated {
  background-color: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-primary);
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  padding: 10px 24px;
  min-height: 40px;
  box-shadow: var(--md-sys-elevation-1);
}
图标按钮

四种变体：标准、填充、色调、轮廓。

  • 尺寸：触控区域 48dp，视觉尺寸 40dp
  • 图标尺寸：24dp
.md3-icon-button {
  width: 48px;
  height: 48px;
  border-radius: var(--md-sys-shape-corner-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
}

.md3-icon-button-filled {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}
浮动操作按钮（FAB）

悬浮在内容上方的主要操作按钮：

尺寸尺寸规格圆角半径图标尺寸
中型（取代小型）40×40dp12dp24dp
标准56×56dp20dp24dp
大型96×96dp32dp36dp
扩展型高 56dp，宽度可变20dp24dp + 文本
/* Standard FAB */
.md3-fab {
  width: 56px;
  height: 56px;
  border-radius: var(--md-sys-shape-corner-large);
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  border: none;
  box-shadow: var(--md-sys-elevation-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Large FAB */
.md3-fab-large {
  width: 96px;
  height: 96px;
  border-radius: var(--md-sys-shape-corner-extra-large);
}

/* Extended FAB */
.md3-fab-extended {
  height: 56px;
  width: auto;
  border-radius: var(--md-sys-shape-corner-large);
  padding: 0 20px;
  gap: 12px;
}
FAB 菜单（M3 Expressive）

点按 FAB 可显示其他上下文操作：

.md3-fab-menu {
  display: flex;
  flex-direction: column;
  gap: var(--md-sys-spacing-2);
  align-items: flex-end;
}

.md3-fab-menu-item {
  display: flex;
  align-items: center;
  gap: var(--md-sys-spacing-3);
  padding: var(--md-sys-spacing-2) var(--md-sys-spacing-4);
  border-radius: var(--md-sys-shape-corner-large);
  background: var(--md-sys-color-surface-container);
  box-shadow: var(--md-sys-elevation-2);
}
拆分按钮（M3 Expressive）

将主要操作与次要下拉菜单组合起来：

.md3-split-button {
  display: inline-flex;
  border-radius: var(--md-sys-shape-corner-full);
  overflow: hidden;
}

.md3-split-button-primary {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  padding: 10px 16px;
  border: none;
}

.md3-split-button-secondary {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  padding: 10px 12px;
  border: none;
  border-left: 1px solid var(--md-sys-color-on-primary);
  opacity: 0.3;
}
按钮组（M3 Expressive）

将相关按钮组织成连接式或标准按钮组：

标准按钮组：将按钮排列在容器中，支持单选或多选。

连接式按钮组：视觉上合并的按钮，用于取代已弃用的分段按钮。

.md3-button-group {
  display: inline-flex;
  border-radius: var(--md-sys-shape-corner-full);
  overflow: hidden;
  border: 1px solid var(--md-sys-color-outline);
}

.md3-button-group-item {
  padding: 10px 24px;
  background: transparent;
  color: var(--md-sys-color-on-surface);
  border: none;
  border-right: 1px solid var(--md-sys-color-outline);
}

.md3-button-group-item:last-child {
  border-right: none;
}

.md3-button-group-item[aria-pressed="true"] {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
分段按钮（旧版 — 在 M3 Expressive 中已由按钮组取代）

请改用按钮组。分段按钮在 M3 Expressive 中已弃用。

容器组件

卡片

用于组合内容的三种卡片类型：

类型背景边框仰角
填充式surface-container-highest无Level 0
高架式surface-container-low无Level 1
轮廓式surface1px outline-variantLevel 0
/* Elevated Card */
.md3-card-elevated {
  background: var(--md-sys-color-surface-container-low);
  border-radius: var(--md-sys-shape-corner-medium);
  box-shadow: var(--md-sys-elevation-1);
  padding: var(--md-sys-spacing-4);
}

/* Filled Card */
.md3-card-filled {
  background: var(--md-sys-color-surface-container-highest);
  border-radius: var(--md-sys-shape-corner-medium);
  padding: var(--md-sys-spacing-4);
}

/* Outlined Card */
.md3-card-outlined {
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  padding: var(--md-sys-spacing-4);
}
轮播

用于浏览内容的水平滚动容器：

.md3-carousel {
  display: flex;
  gap: var(--md-sys-spacing-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: var(--md-sys-spacing-4);
}

.md3-carousel-item {
  scroll-snap-align: start;
  flex-shrink: 0;
  border-radius: var(--md-sys-shape-corner-extra-large);
  overflow: hidden;
}
底部工作表

从屏幕底部显示的补充内容：

.md3-bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--md-sys-color-surface-container-low);
  border-radius: var(--md-sys-shape-corner-extra-extra-large)
                 var(--md-sys-shape-corner-extra-extra-large) 0 0;
  padding: var(--md-sys-spacing-6);
  box-shadow: var(--md-sys-elevation-4);
}

.md3-bottom-sheet-handle {
  width: 32px;
  height: 4px;
  background: var(--md-sys-color-on-surface-variant);
  border-radius: var(--md-sys-shape-corner-full);
  margin: 0 auto var(--md-sys-spacing-4);
  opacity: 0.4;
}
侧边工作表

从侧边滑出，显示补充内容：

.md3-side-sheet {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 360px;
  background: var(--md-sys-color-surface-container-low);
  border-radius: var(--md-sys-shape-corner-extra-large) 0 0 var(--md-sys-shape-corner-extra-large);
  padding: var(--md-sys-spacing-6);
  box-shadow: var(--md-sys-elevation-4);
}
分隔线

分隔各个区段中的内容：

.md3-divider {
  height: 1px;
  background: var(--md-sys-color-outline-variant);
  border: none;
}

/* Inset divider */
.md3-divider-inset {
  margin-left: var(--md-sys-spacing-4);
}
列表

连续排列的文本或图像纵向索引：

.md3-list-item {
  display: flex;
  align-items: center;
  gap: var(--md-sys-spacing-4);
  padding: var(--md-sys-spacing-2) var(--md-sys-spacing-4);
  min-height: 56px;
}

.md3-list-item-headline {
  font-family: var(--md-sys-typescale-body-large-font);
  font-size: var(--md-sys-typescale-body-large-size);
  color: var(--md-sys-color-on-surface);
}

.md3-list-item-supporting {
  font-family: var(--md-sys-typescale-body-medium-font);
  font-size: var(--md-sys-typescale-body-medium-size);
  color: var(--md-sys-color-on-surface-variant);
}

沟通组件

徽标

显示在图标或头像上的小型状态指示器：

/* Small badge (dot) */
.md3-badge-small {
  width: 6px;
  height: 6px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-error);
}

/* Large badge (with count) */
.md3-badge-large {
  min-width: 16px;
  height: 16px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-error);
  color: var(--md-sys-color-on-error);
  font-size: var(--md-sys-typescale-label-small-size);
  font-weight: var(--md-sys-typescale-label-small-weight);
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
对话框

提示用户做出决定或提供信息：

.md3-dialog {
  background: var(--md-sys-color-surface-container-high);
  border-radius: var(--md-sys-shape-corner-extra-large);
  padding: var(--md-sys-spacing-6);
  min-width: 280px;
  max-width: 560px;
  box-shadow: var(--md-sys-elevation-3);
}

.md3-dialog-title {
  font-family: var(--md-sys-typescale-headline-small-font);
  font-size: var(--md-sys-typescale-headline-small-size);
  color: var(--md-sys-color-on-surface);
  margin-bottom: var(--md-sys-spacing-4);
}

.md3-dialog-content {
  font-family: var(--md-sys-typescale-body-medium-font);
  font-size: var(--md-sys-typescale-body-medium-size);
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: var(--md-sys-spacing-6);
}

.md3-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--md-sys-spacing-2);
}

/* Scrim behind dialog */
.md3-dialog-scrim {
  position: fixed;
  inset: 0;
  background: var(--md-sys-color-scrim);
  opacity: 0.32;
}
进度指示器

显示流程状态，包括线性和圆形指示器：

/* Linear Progress */
.md3-progress-linear {
  width: 100%;
  height: 4px;
  background: var(--md-sys-color-surface-container-highest);
  border-radius: var(--md-sys-shape-corner-full);
  overflow: hidden;
}

.md3-progress-linear-indicator {
  height: 100%;
  background: var(--md-sys-color-primary);
  border-radius: var(--md-sys-shape-corner-full);
  transition: width 200ms var(--md-sys-motion-easing-standard);
}

/* Circular Progress */
.md3-progress-circular {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 4px solid var(--md-sys-color-surface-container-highest);
  border-top-color: var(--md-sys-color-primary);
  animation: md3-spin 1.4s linear infinite;
}

@keyframes md3-spin {
  to { transform: rotate(360deg); }
}
Snackbar

显示有关应用流程的简短消息：

.md3-snackbar {
  background: var(--md-sys-color-inverse-surface);
  color: var(--md-sys-color-inverse-on-surface);
  border-radius: var(--md-sys-shape-corner-extra-small);
  padding: var(--md-sys-spacing-4);
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: var(--md-sys-spacing-2);
  box-shadow: var(--md-sys-elevation-3);
  max-width: 560px;
}

.md3-snackbar-action {
  color: var(--md-sys-color-inverse-primary);
  font-weight: var(--md-sys-typescale-label-large-weight);
}
工具提示

悬停或长按时显示的说明文字：

/* Plain tooltip */
.md3-tooltip {
  background: var(--md-sys-color-inverse-surface);
  color: var(--md-sys-color-inverse-on-surface);
  border-radius: var(--md-sys-shape-corner-extra-small);
  padding: 4px 8px;
  font-size: var(--md-sys-typescale-body-small-size);
  max-width: 200px;
}

/* Rich tooltip */
.md3-tooltip-rich {
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
  border-radius: var(--md-sys-shape-corner-medium);
  padding: var(--md-sys-spacing-4);
  box-shadow: var(--md-sys-elevation-2);
  max-width: 320px;
}

导航组件

顶部应用栏

在顶部提供导航和操作：

类型高度描述
居中对齐64dp标题居中
小型64dp标题左对齐
中型112dp标题位于导航图标下方
大型152dp突出显示标题
.md3-top-app-bar {
  display: flex;
  align-items: center;
  height: 64px;
  padding: 0 var(--md-sys-spacing-4);
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  gap: var(--md-sys-spacing-2);
}

.md3-top-app-bar-title {
  font-family: var(--md-sys-typescale-title-large-font);
  font-size: var(--md-sys-typescale-title-large-size);
  flex: 1;
}

/* Scrolled state */
.md3-top-app-bar-scrolled {
  background: var(--md-sys-color-surface-container);
  box-shadow: var(--md-sys-elevation-2);
}
底部应用栏（旧版 — 已由 M3 Expressive 中的停靠工具栏取代）

适用于尚未迁移到工具栏的应用：

.md3-bottom-app-bar {
  display: flex;
  align-items: center;
  height: 80px;
  padding: 0 var(--md-sys-spacing-4);
  background: var(--md-sys-color-surface-container);
  gap: var(--md-sys-spacing-2);
}
工具栏（M3 Expressive）

以更灵活的选项取代底部应用栏：

停靠工具栏：全宽，用于全局操作。 浮动工具栏：悬浮于内容上方，用于上下文相关操作（水平或垂直）。

/* Docked Toolbar */
.md3-toolbar-docked {
  display: flex;
  align-items: center;
  height: 64px;
  padding: 0 var(--md-sys-spacing-4);
  background: var(--md-sys-color-surface-container);
  gap: var(--md-sys-spacing-2);
}

/* Floating Toolbar (horizontal) */
.md3-toolbar-floating {
  display: inline-flex;
  align-items: center;
  height: 56px;
  padding: 0 var(--md-sys-spacing-3);
  background: var(--md-sys-color-surface-container);
  border-radius: var(--md-sys-shape-corner-large);
  box-shadow: var(--md-sys-elevation-2);
  gap: var(--md-sys-spacing-1);
  backdrop-filter: blur(12px);
}

/* Floating Toolbar (vertical) */
.md3-toolbar-floating-vertical {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: 56px;
  padding: var(--md-sys-spacing-3) 0;
  background: var(--md-sys-color-surface-container);
  border-radius: var(--md-sys-shape-corner-large);
  box-shadow: var(--md-sys-elevation-2);
  gap: var(--md-sys-spacing-1);
}

/* Vibrant Toolbar (high emphasis) */
.md3-toolbar-vibrant {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}
导航栏（底部导航）

移动设备的主要导航，显示在屏幕底部：

.md3-navigation-bar {
  display: flex;
  height: 80px;
  background: var(--md-sys-color-surface-container);
  box-shadow: var(--md-sys-elevation-2);
}

.md3-navigation-bar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--md-sys-color-on-surface-variant);
  min-width: 48px;
}

.md3-navigation-bar-item[aria-selected="true"] {
  color: var(--md-sys-color-on-surface);
}

/* Active indicator */
.md3-navigation-bar-indicator {
  background: var(--md-sys-color-secondary-container);
  border-radius: var(--md-sys-shape-corner-full);
  padding: 4px 20px;
}
导航栏架

适用于中等尺寸屏幕的垂直导航：

.md3-navigation-rail {
  display: flex;
  flex-direction: column;
  width: 80px;
  background: var(--md-sys-color-surface);
  padding: var(--md-sys-spacing-3) 0;
  align-items: center;
  gap: var(--md-sys-spacing-3);
}
导航抽屉

适用于大屏幕的侧边导航面板：

.md3-navigation-drawer {
  width: 360px;
  background: var(--md-sys-color-surface-container-low);
  border-radius: 0 var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-large) 0;
  padding: var(--md-sys-spacing-3);
}

.md3-navigation-drawer-item {
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 var(--md-sys-spacing-4);
  border-radius: var(--md-sys-shape-corner-full);
  gap: var(--md-sys-spacing-3);
}

.md3-navigation-drawer-item[aria-selected="true"] {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
标签页

在分组内容部分之间切换：

.md3-tabs {
  display: flex;
  border-bottom: 1px solid var(--md-sys-color-surface-variant);
}

.md3-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  font-family: var(--md-sys-typescale-title-small-font);
  font-size: var(--md-sys-typescale-title-small-size);
  color: var(--md-sys-color-on-surface-variant);
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
}

.md3-tab[aria-selected="true"] {
  color: var(--md-sys-color-primary);
}

/* Active indicator */
.md3-tab[aria-selected="true"]::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--md-sys-color-primary);
  border-radius: 3px 3px 0 0;
}
搜索

用于查询和筛选内容的输入框：

.md3-search-bar {
  display: flex;
  align-items: center;
  height: 56px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-surface-container-highest);
  padding: 0 var(--md-sys-spacing-4);
  gap: var(--md-sys-spacing-4);
}

.md3-search-bar input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--md-sys-typescale-body-large-font);
  font-size: var(--md-sys-typescale-body-large-size);
  color: var(--md-sys-color-on-surface);
  outline: none;
}

.md3-search-bar input::placeholder {
  color: var(--md-sys-color-on-surface-variant);
}

选择组件

复选框

用于多选的切换控件：

  • 尺寸：视觉尺寸为 18dp，触控区域为 48dp
  • 边框：2dp，未选中时使用轮廓颜色
  • 填充：选中时使用 primary
  • 勾选标记：on-primary
单选按钮

从多个选项中单选：

  • 尺寸：视觉尺寸为 20dp，触控区域为 48dp
  • 边框：2dp，未选中时使用轮廓
  • 填充：选中时使用 primary
  • 内圆：10dp
开关

开启或关闭设置：

  • 轨道：52×32dp
  • 滑块：未选中时为 16dp，选中时为 24dp
  • 选中：primary 轨道，on-primary 滑块图标
  • 未选中：surface-container-highest 轨道，轮廓色滑块
.md3-switch {
  width: 52px;
  height: 32px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-surface-container-highest);
  border: 2px solid var(--md-sys-color-outline);
  position: relative;
  cursor: pointer;
  transition: background 200ms var(--md-sys-motion-easing-standard);
}

.md3-switch[aria-checked="true"] {
  background: var(--md-sys-color-primary);
  border-color: var(--md-sys-color-primary);
}

.md3-switch-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--md-sys-color-outline);
  position: absolute;
  top: 50%;
  left: 6px;
  transform: translateY(-50%);
  transition: all 200ms var(--md-sys-motion-easing-standard);
}

.md3-switch[aria-checked="true"] .md3-switch-thumb {
  width: 24px;
  height: 24px;
  background: var(--md-sys-color-on-primary);
  left: calc(100% - 28px);
}
芯片

用于筛选、输入或操作的紧凑元素：

类型用途是否可选择
辅助建议操作否
筛选筛选内容是
输入用户输入的数据可移除
建议动态建议否
.md3-chip {
  height: 32px;
  border-radius: var(--md-sys-shape-corner-small);
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--md-sys-typescale-label-large-font);
  font-size: var(--md-sys-typescale-label-large-size);
  border: 1px solid var(--md-sys-color-outline);
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
}

.md3-chip[aria-selected="true"] {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  border-color: transparent;
}
滑块

用于范围或数值选择：

  • 轨道高度：4dp
  • 滑块：20dp
  • 活动轨道：primary
  • 非活动轨道：surface-container-highest
日期选择器和时间选择器

用于选择日期和时间的对话框或输入控件。遵循 M3 对话框模式，并使用适当的形状和颜色令牌。

菜单

下拉菜单或上下文菜单：

.md3-menu {
  background: var(--md-sys-color-surface-container);
  border-radius: var(--md-sys-shape-corner-extra-small);
  box-shadow: var(--md-sys-elevation-2);
  padding: var(--md-sys-spacing-2) 0;
  min-width: 112px;
  max-width: 280px;
}

.md3-menu-item {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 var(--md-sys-spacing-3);
  gap: var(--md-sys-spacing-3);
  color: var(--md-sys-color-on-surface);
  font-family: var(--md-sys-typescale-body-large-font);
  font-size: var(--md-sys-typescale-body-large-size);
  cursor: pointer;
}

文本输入组件

文本字段

有两种变体：填充式和描边式。

填充式文本字段：

.md3-text-field-filled {
  display: flex;
  flex-direction: column;
  background: var(--md-sys-color-surface-container-highest);
  border-radius: var(--md-sys-shape-corner-extra-small) var(--md-sys-shape-corner-extra-small) 0 0;
  padding: 8px 16px 8px;
  position: relative;
}

.md3-text-field-filled input {
  border: none;
  background: transparent;
  font-family: var(--md-sys-typescale-body-large-font);
  font-size: var(--md-sys-typescale-body-large-size);
  color: var(--md-sys-color-on-surface);
  outline: none;
  padding: 4px 0;
}

.md3-text-field-filled::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--md-sys-color-on-surface-variant);
}

.md3-text-field-filled:focus-within::after {
  height: 2px;
  background: var(--md-sys-color-primary);
}

描边式文本字段：

.md3-text-field-outlined {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-extra-small);
  padding: 8px 16px;
}

.md3-text-field-outlined:focus-within {
  border-color: var(--md-sys-color-primary);
  border-width: 2px;
}

.md3-text-field-outlined input {
  border: none;
  background: transparent;
  font-family: var(--md-sys-typescale-body-large-font);
  font-size: var(--md-sys-typescale-body-large-size);
  color: var(--md-sys-color-on-surface);
  outline: none;
}

标签和辅助文本：

.md3-text-field-label {
  font-family: var(--md-sys-typescale-body-small-font);
  font-size: var(--md-sys-typescale-body-small-size);
  color: var(--md-sys-color-on-surface-variant);
}

.md3-text-field-supporting {
  font-family: var(--md-sys-typescale-body-small-font);
  font-size: var(--md-sys-typescale-body-small-size);
  color: var(--md-sys-color-on-surface-variant);
  padding: 4px 16px 0;
}

.md3-text-field-error .md3-text-field-supporting {
  color: var(--md-sys-color-error);
}

组件交互状态

所有 M3 组件都遵循一致的交互状态模式：

状态视觉效果
已启用默认外观
悬停叠加 8% 状态层
聚焦叠加 12% 状态层 + 焦点指示器
按下叠加 12% 状态层
拖动叠加 16% 状态层
已禁用内容不透明度为 38%，背景不透明度为 12%

框架特定组件用法

有关框架特定组件示例（设置、主题配置和用法），请参阅专门的库技能：

  • React / MUI / Next.js：m3-web-react
  • Angular Material：m3-web-angular
  • Vue / Vuetify 3：m3-web-vue
  • Svelte / SMUI：m3-web-svelte
  • Web Components (@material/web)：m3-web-webcomponents
  • Tailwind CSS：m3-web-tailwind
  • Ink (React CLI)：m3-web-ink
  • 原生 CSS：m3-web-vanilla
  • Flutter：m3-web-flutter
  • Android / Jetpack Compose：m3-web-android

组件无障碍指南

  1. 触控目标：所有交互组件的最小尺寸为 48×48dp
  2. 焦点指示器：显示可见轮廓（2px 实线主色，偏移 2px）
  3. 颜色对比度：文本为 4.5:1，交互元素为 3:1
  4. ARIA 属性：使用适当的角色、标签和状态
  5. 键盘导航：所有组件都必须能够完全通过键盘操作
  6. 屏幕阅读器支持：使用语义化 HTML 和 ARIA 播报

组件实现检查清单

实现 M3 组件时，请确保：

  • 组件使用适当的 M3 颜色令牌（而非硬编码颜色）
  • 形状遵循该组件类型对应的 M3 形状比例
  • 字体排版使用正确的类型比例角色
  • 已实现所有交互状态（悬停、焦点、按下、禁用）
  • 触控目标达到 48×48dp 的最小尺寸
  • 焦点指示器清晰可见且具有足够的对比度
  • 组件在浅色和深色主题下均可正常使用
  • 禁用状态使用正确的不透明度值（内容为 38%，背景为 12%）
  • 动效过渡使用基于弹簧的缓动
  • 正确应用 ARIA 属性
  • 组件可通过键盘完全导航
  • 在适当情况下使用 M3 Expressive 的扩展功能（FAB 菜单、拆分按钮、按钮组、工具栏）
  • 遵循库特定的最佳实践（参见库特定技能：m3-web-react、m3-web-angular 等）

资源

评论

支持 Markdown