Angular Material MatButton 完全指南变体、外观、图标定位与无障碍实践【免费下载链接】componentsComponent infrastructure and Material Design components for Angular项目地址: https://gitcode.com/GitHub_Trending/co/componentsAngular Material 的按钮组件MatButton以原生button与a元素为基础叠加 Material Design 视觉样式与无障碍能力是组件库中使用频率最高的交互控件之一。本文基于本仓库中 button.md 的官方文档结合 按钮源码实现 与 官方示例系统讲解按钮的四种变体、五种外观appearance、图标投影规则、交互式禁用、进度指示器及无障碍最佳实践帮助你写出语义正确、可访问、可复用的 Angular Material 按钮。按钮的本质增强原生元素而非替换Angular Material 按钮始终使用原生button与a元素仅通过指令directive叠加 Material Design 样式。之所以坚持这一设计是为了给用户提供最直接、最无障碍的使用体验具体遵循以下选择原则执行动作如保存、提交、删除时使用button元素跳转导航如跳转到另一个视图或 URL时使用a元素。这一点在组件声明中体现得很直接MatButton的选择器同时覆盖了按钮与锚点两种形态见 button.tsselector: button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ,值得注意的是组件还保留了mat-button、mat-raised-button、mat-flat-button、mat-stroked-button等旧版选择器以向后兼容。在构造函数中组件会通过_inferAppearance从这些静态属性推断外观见 button.tsmat-raised-button推断为elevated、mat-stroked-button推断为outlined、mat-flat-button推断为filled、mat-button推断为text。这意味着旧项目迁移到新版后原有标记无需改动即可获得正确外观。四种按钮变体VariantsAngular Material 提供四种按钮变体每种都以属性attribute形式应用在元素上属性说明matButton矩形按钮可包含文本与图标是最通用的按钮形态matIconButton更小的圆形按钮用于容纳单个图标不包含文本matFab悬浮操作按钮Floating Action Button带高度与圆角用于容纳图标可通过extended属性扩展为矩形以容纳文字标签matMiniFabmatFab的缩小版从源码看各变体有独立的组件类与样式文件MatFabButton、MatMiniFabButton定义于 fab.tsMatIconButton定义于 icon-button.ts并统一由 MatButtonModule 导出。FAB 类组件在宿主元素上设置了mdc-fab相关类并通过_isFab true标记让涟漪ripple使用 FAB 专属样式。快速上手示例以下模板来自官方示例 button-overview-example.html展示了三种基础形态button matButtonBasic/button button matButton disabledDisabled/button a matButton hrefhttps://www.google.com/ target_blankLink/a button matFab aria-labelExample icon button with a delete icon mat-icondelete/mat-icon /button button matMiniFab aria-labelExample icon button with a menu icon mat-iconmenu/mat-icon /button五种外观AppearancematButton支持通过属性值设置多种外观例如matButtonoutlined。下表列出了全部外观及其适用场景外观说明text默认外观。文本按钮用于最低优先级的操作尤其是在需要呈现多个选项时filled高强调按钮用于流程中的最终或解锁性操作例如保存、确认tonal中强调按钮常用于流程中的最终或解锁性操作但视觉强调度低于filledoutlined中强调按钮常用于需要引起注意但并非主操作的动作elevated中强调按钮常用于按钮需要与有图案的背景产生视觉分隔的场景外观到 CSS 类的映射维护在APPEARANCE_CLASSES中见 button.tsconst APPEARANCE_CLASSES: MapMatButtonAppearance, readonly string[] new Map([ [text, [mat-mdc-button]], [filled, [mdc-button--unelevated, mat-mdc-unelevated-button]], [elevated, [mdc-button--raised, mat-mdc-raised-button]], [outlined, [mdc-button--outlined, mat-mdc-outlined-button]], [tonal, [mat-tonal-button]], ]);设置外观时组件会先移除旧外观对应的类再添加新外观的类见 setAppearance。同时appearance输入允许空字符串这样matButton单独使用时无需写出text默认回落到text。五种外观的完整模板button matButtonBasic text button/button button matButtonelevatedElevated button/button button matButtonoutlinedOutlined button/button button matButtonfilledFilled button/button button matButtontonalTonal button/button扩展 FAB 按钮Extended FAB传统悬浮操作按钮FAB是圆形的只能容纳一个图标。添加extended属性后FAB 会扩展为带圆角的矩形在图标之外还能容纳文字标签button matFab extended mat-iconhome/mat-icon Home /button需要注意的是只有全尺寸 FAB 支持extended属性mini FAB 不支持。源码中extended是一个布尔转换输入见 fab.ts并通过宿主绑定添加mdc-fab--extended与mat-mdc-extended-fab类Input({transform: booleanAttribute}) extended: boolean false; host: { [class.mdc-fab--extended]: extended, [class.mat-mdc-extended-fab]: extended, }扩展 FAB 同样支持链接形态可配合routerLink使用a matFab extended routerLink. mat-iconfavorite/mat-icon Link /a图标定位Icon Positioning按钮可以在文本旁容纳图标。默认情况下图标mat-icon、.material-icons或带matButtonIcon属性的元素会被投影到按钮标签之前button matButton mat-iconfavorite/mat-icon Like /button要把图标放到标签之后只需在图标元素上加iconPositionEnd属性button matButton Send mat-icon iconPositionEndsend/mat-icon /button也可以同时使用两个位置button matButton mat-iconarrow_back/mat-icon Navigate mat-icon iconPositionEndarrow_forward/mat-icon /button如果你使用的是自定义图标元素既不是mat-icon也不是.material-icons需要添加matButtonIcon属性按钮才能将其投影到正确的插槽button matButton my-custom-icon matButtonIconcustom/my-custom-icon Action /button这一行为在模板 button.html 中通过三段ng-content实现前段投影不含iconPositionEnd的图标中段是标签容器mdc-button__label后段投影带iconPositionEnd的图标。模板还支持 Material Symbols.material-symbols-outlined、.material-symbols-rounded、.material-symbols-sharp系列的图标类。交互式禁用按钮Interactive Disabled Buttons原生禁用的button元素无法获得焦点也不会派发任何事件。这在某些场景下会带来问题——例如应用无法告知用户按钮为何被禁用。disabledInteractive输入可以将按钮样式化为禁用状态同时仍允许其获得焦点并派发事件并会为辅助技术设置aria-disabledtrue。button matButtonelevated disabled disabledInteractive matTooltipThis is a tooltip! Disabled button allowing interactivity /button上面的示例来自 button-disabled-interactive-example.html它借助 tooltip 向用户解释禁用原因——这正是原生禁用按钮无法做到的。对比之下普通disabled按钮无法触发 tooltip。重要警示使用disabledInteractive可能导致原本会被阻止的操作不再被阻止例如表单中的提交按钮。启用该输入时应在组件中自行防护这类情况。从源码看见 button-base.ts该行为通过多个宿主属性协同实现_getDisabledAttribute()仅在disabledInteractive || !disabled时为null否则返回true即交互式禁用不会写入原生disabled属性_getAriaDisabled()对按钮元素仅当disabled disabledInteractive时返回true从而为辅助技术标记禁用_getTabIndex()锚点元素在disabled !disabledInteractive时返回-1交互式禁用时保持可聚焦。同时button-base.ts 中为锚点注册了点击拦截当锚点被禁用时阻止默认行为并停止事件冒泡。全局配置 MAT_BUTTON_CONFIG交互式禁用行为可以通过MAT_BUTTON_CONFIG注入令牌全局配置。该令牌在 button-base.ts 中定义export interface MatButtonConfig { /** Whether disabled buttons should be interactive. */ disabledInteractive?: boolean; /** Default palette color to apply to buttons. */ color?: ThemePalette; /** Default appearance for plain buttons (not icon buttons or FABs). */ defaultAppearance?: MatButtonAppearance; }在应用启动时全局提供import {MAT_BUTTON_CONFIG} from angular/material/button; providers: [ { provide: MAT_BUTTON_CONFIG, useValue: { disabledInteractive: true, defaultAppearance: tonal, }, }, ]构造函数会读取该配置并作为默认值见 button-base.ts单个按钮上的显式输入始终可以覆盖全局默认。此外MatButton的appearancesetter 也会回退到this._config?.defaultAppearance见 button.ts因此defaultAppearance可用于统一全站按钮外观。带进度指示器的按钮Buttons with Progress Indicators按钮可以投影一个带progressIndicator属性的元素。当showProgress输入为true时该元素会覆盖显示在按钮内容之上同时按钮原有内容变为不可见。button matButtonoutlined [showProgress]showProgress() (click)toggleShowProgress() Click to toggle progress mat-progress-spinner progressIndicator modeindeterminate diameter20 aria-labelLoading tabindex / /button上面的代码来自官方示例 button-progress-indicator-example.html。同一示例还展示了自定义进度指示器的写法——不依赖MatProgressSpinner用带roleprogressbar的普通元素即可button matButtonoutlined [showProgress]showProgress() (click)toggleShowProgress() Click to toggle progress div progressIndicator roleprogressbar aria-valuemin0 aria-valuemax100 Loading... /div /button模板实现上见 button.html当showProgress()为真时渲染mat-mdc-button-progress-indicator-container容器并投影[progressIndicator]元素宿主上同时添加mat-mdc-button-progress-indicator-shown类见 button-base.ts来驱动内容隐藏样式。无障碍要求投影的进度指示器元素不得可交互。使用MatProgressSpinner作为指示器时应设置tabindex将其从 Tab 键顺序中移除如上例所示。无障碍AccessibilityAngular Material 默认使用原生button与a元素来保证无障碍体验在当前页面执行动作的交互使用button导航到另一个 URL的交互使用a。MatButton同样适用按钮与锚点的所有标准无障碍最佳实践。大写文本Capitalization按钮文本本身使用全大写会导致屏幕阅读器逐字符朗读也会引发本地化问题。因此官方不建议修改按钮文本的默认大小写。禁用锚点Disabling anchorsMatAnchor在原生a元素能力之外还支持禁用锚点。禁用时组件会设置aria-disabledtrue和tabindex-1并在点击时拦截默认跳转见 button-base.ts。由于禁用锚点的辅助技术支持情况可能因读屏软件而异官方建议始终在应用中测试禁用锚点的行为。纯图标按钮Buttons with icons仅包含图标的按钮或链接如matFab、matMiniFab、matIconButton应通过aria-label或aria-labelledby提供有意义的标签例如官方示例中的aria-labelExample icon button with a delete icon。此外为保证充分可访问图标的最小触控目标应为 48x48 像素尤其在移动设备与小屏上要确保易于点击——模板末尾的mat-mdc-button-touch-target元素见 button.html正是用于扩展触控区域。切换按钮Toggle buttons需要带状态的切换按钮toggle button时请参阅MatButtonToggle组件的文档仓库内对应实现位于 src/material/button-toggleMatButton本身不提供状态保持能力。小结与延伸阅读总结本指南的关键要点语义优先动作用button导航用a组件只增强样式与交互不替换原生语义四种变体matButton、matIconButton、matFab、matMiniFab按内容形态选用五种外观text、filled、tonal、outlined、elevated按强调等级与场景选用旧版mat-*-button属性可自动推断外观图标灵活布局默认前置iconPositionEnd后置自定义图标用matButtonIcon标记禁用态精细化disabledInteractive配合MAT_BUTTON_CONFIG实现可聚焦、可解释的禁用态进度反馈progressIndicatorshowProgress让按钮承载加载状态无障碍是默认项遵循大写、禁用锚点、图标标签、48px 触控目标等实践。如需进一步深入可以阅读本仓库中的相关源码与测试按钮核心实现见 button.ts、button-base.ts、fab.ts 与 icon-button.ts样式体系见 _m3-button.scss、_m2-button.scss 与 _button-theme.scss完整行为测试见 button.spec.ts可直接运行的示例见 button-overview。【免费下载链接】componentsComponent infrastructure and Material Design components for Angular项目地址: https://gitcode.com/GitHub_Trending/co/components创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考