用途
Material Design 3 Components 是一份面向 Material Design 3（M3）组件体系的综合参考指南，覆盖从 Material You 基础规范到 M3 Expressive 增强内容的完整组件说明。每个组件均遵循 M3 基于令牌（token）的设计系统，涉及颜色、形状、字体、动效与布局。
关键词：Material Design 3、M3、components、buttons、cards、dialogs、navigation、FAB、chips、text fields、tabs、menus、snackbar、bottom sheet、Material You、M3 Expressive。
组件分类
M3 组件被组织为六个类别：
- 操作（Action）：按钮、FAB、图标按钮、分段按钮、拆分按钮、按钮组
- 容器（Containment）：卡片、轮播、分隔线、列表、底部面板、侧边面板
- 通信（Communication）：徽章、对话框、进度指示器、Snackbar、工具提示
- 导航（Navigation）：应用栏、导航栏、导航抽屉、导航轨道、标签页、搜索
- 选择（Selection）：复选框、Chips、日期/时间选择器、菜单、单选按钮、滑块、开关
- 文本输入（Text Input）：文本框（填充式、描边式）
主要能力
操作组件
按钮：M3 定义五种强调程度递增的按钮类型——Text Button（最低强调，用于可选或次要操作）、Outlined Button（低强调，用于重要但非主要操作）、Tonal Button（中等强调）、Filled Button（高强调，用于主要操作与主 CTA）、Elevated Button（中等强调，用于视觉繁忙背景上的操作）。通用规格：高度 40dp、最小宽度 48dp、内边距水平 24dp/垂直 10dp、形状为全圆角（pill）、字体为 Label Large、图标间距 8dp。资料提供了五种按钮的 CSS 示例。
图标按钮：四种变体——standard、filled、tonal、outlined。尺寸为 48dp 触摸目标、40dp 视觉尺寸，图标 24dp。
浮动操作按钮（FAB）：尺寸包括 Medium（替代 Small，40×40dp，圆角 12dp，图标 24dp）、Standard（56×56dp，圆角 20dp，图标 24dp）、Large（96×96dp，圆角 32dp，图标 36dp）、Extended（高 56dp，宽度可变，圆角 20dp，图标 24dp 加文字）。
FAB 菜单（M3 Expressive）：点击 FAB 显示额外的上下文操作。
拆分按钮（M3 Expressive）：将主要操作与次要下拉组合。
按钮组（M3 Expressive）：将相关按钮组织为连接式或标准组。标准按钮组用于单选或多选；连接式按钮组在视觉上合并按钮，替代已弃用的分段按钮。
分段按钮（Legacy）：在 M3 Expressive 中已被按钮组取代，属于弃用状态。
容器组件
卡片：三种类型——Filled（背景 surface-container-highest，无边框，层级 0）、Elevated（背景 surface-container-low，无边框，层级 1）、Outlined（背景 surface，1px outline-variant 边框，层级 0）。
轮播：用于浏览内容的水平可滚动容器，支持滚动吸附。
底部面板：从屏幕底部出现的补充内容，带拖拽手柄。
侧边面板：从侧边滑出用于补充内容。
分隔线：分隔区块内容，支持内嵌式。
列表：文本或图像的连续垂直索引，包含标题与辅助文本样式。
通信组件
徽章：图标或头像上的小型状态指示器，分小徽章（圆点）与大徽章（带计数）。
对话框：用于提示用户做决定或提供信息，包含标题、内容、操作区与背景遮罩（scrim）。
进度指示器：线性与圆形两种，展示处理状态。
Snackbar：关于应用过程的简短消息，可带操作。
工具提示：悬停或长按时显示的信息文本，分普通与富文本两种。
导航组件
顶部应用栏：四种类型——Center-aligned（64dp，标题居中）、Small（64dp，标题左对齐）、Medium（112dp，标题位于导航图标下方）、Large（152dp，突出标题展示）。含滚动状态样式。
底部应用栏（Legacy）：在 M3 Expressive 中已被停靠工具栏取代，供尚未迁移的应用使用。
工具栏（M3 Expressive）：替代底部应用栏，提供更灵活选项——Docked Toolbar（全宽，用于全局操作）、Floating Toolbar（浮动于内容之上，用于上下文相关操作，支持水平或垂直）、Vibrant Toolbar（高强调）。
导航栏（底部导航）：移动端主要导航。
使用方式
该技能以参考文档形式提供，按组件类别组织内容。每个组件给出规格说明（尺寸、圆角、字体、颜色令牌等）与 CSS 代码示例，可直接参考用于实现或核对 M3 组件样式。代码示例使用 CSS 自定义属性（如 --md-sys-color-primary、--md-sys-shape-corner-full、--md-sys-typescale-label-large-size 等）引用 M3 令牌。
适用场景
适合需要按 Material Design 3 规范实现或核对组件样式的设计与前端开发场景，包括按钮、卡片、对话框、导航、选择控件、文本输入等界面元素的样式定义与规格查阅。
限制
资料未提供该技能的安装命令、运行环境要求、平台支持范围、收费或价格信息，这些内容暂未提供。资料中部分内容（如导航栏部分）在原文中被截断，未完整呈现。