前端UI组件设计系统【免费下载链接】material-components-webModular and customizable Material Design UI components for the web项目地址https://gitcode.com/gh_mirrors/ma/material-components-web点击查看免费下载MDC Dialog 是 Material Components Webmaterial-components-web仓库中用于构建模态对话框Modal Dialog的官方组件覆盖 Alert、Simple、Confirmation、Full-screen 四类 Material Design 对话框形态并提供统一的对话框动作Dialog Actions事件协议与完整的无障碍支持。读完本文你将掌握material/dialog的安装与 Sass 引入、四种对话框的标准 DOM 结构、data-mdc-dialog-action动作分发机制、Enter/Escape/遮罩层交互的定制以及基于 Adapter/Foundation 架构在 React、Angular 等框架中复刻该组件的完整方法。概述什么是 MDC Dialog对话框是一种模态窗口出现在应用内容之前用于提供关键信息或请求用户做出决定。当对话框出现时应用的其他功能全部被禁用对话框会一直停留在屏幕上直到被确认、被关闭或用户完成所需操作。由于对话框是有意打断用户操作的组件官方文档建议谨慎使用used sparingly不要滥用。material/dialog共支持四种对话框类型本文后续将逐一给出可运行的完整 HTML 示例Alert 对话框Simple 对话框Confirmation 对话框Full-screen 对话框此外本组件还额外支持一种Floating sheet浮动面板形态——带关闭图标按钮、无操作栏按钮的轻量对话框。安装与快速开始安装使用 npm 安装material/dialognpm install material/dialog该包的package.json声明其版本为 14.0.0属于 Material Components Web 的独立可发布子包。它会自动携带material/animation、material/base、material/button、material/dom、material/ripple、material/shape、material/theme、material/tokens、material/typography等运行时依赖见 packages/mdc-dialog/package.json这些依赖在构建 dialog 的样式与焦点管理时会被内部使用。引入样式在 Sass 中通过模块系统引入并包含核心样式use material/dialog; include dialog.core-styles;注意凡是准备放入对话框内部的组件样式例如 List、Checkbox、Radio、Button 等都必须单独引入MDC Dialog 不会自动包含它们。例如 Confirmation 对话框中的 Radio 与 List 依赖material/radio、material/list的样式Alert 对话框中的按钮依赖material/button的样式。JavaScript 实例化import {MDCDialog} from material/dialog; const dialog new MDCDialog(document.querySelector(.mdc-dialog));关于 ES 模块导入方式的更多细节可参考仓库中的 导入 JavaScript 组件指南。内容区组件的实例化时机MDC Dialog 对mdc-dialog__content元素中放置什么内容不做任何假设。列表、复选框等子组件必须由开发者自行实例化。如果对话框中含有对布局敏感的组件例如 MDC List 的排版、浮动标签、缺口描边等应当等到MDCDialog:opened事件发出后再实例化或对其调用layout()以确保对话框的打开过渡动画已经结束、尺寸已经稳定。例如在 Simple / Confirmation 对话框中实例化 MDC Listimport {MDCList} from material/list; const list new MDCList(document.querySelector(.mdc-dialog .mdc-deprecated-list)); dialog.listen(MDCDialog:opened, () { list.layout(); });经验提示如果发现对话框内的水波纹ripple、浮动标签floating label、缺口描边notched outline出现错位或尺寸错误这通常是子组件在对话框打开动画尚未完成时就被实例化导致的。将实例化推迟到MDCDialog:opened之后即可解决。从源码实现来看MDCDialog的打开动画计时为 150ms关闭动画计时为 75ms见 packages/mdc-dialog/constants.ts 中DIALOG_ANIMATION_OPEN_TIME_MS与DIALOG_ANIMATION_CLOSE_TIME_MS打开时组件会先在下一帧添加mdc-dialog--open类并触发layout()随后在动画结束时才调用trapFocus()并发出MDCDialog:opened见 packages/mdc-dialog/foundation.ts这正是等 opened 再实例化子组件这一建议的源码依据。无障碍让对话框对屏幕阅读器友好首选aria-modaltruearia-modal是 ARIA 1.1 规范中的属性用于告知屏幕阅读器将交互范围限定在单个元素内。官方推荐在对话框 DOM 结构的根元素即mdc-dialog__surface上添加aria-modaltrue。回退方案aria-hiddentrue遮罩页面其余内容并非所有用户代理User Agent和屏幕阅读器都能正确解释aria-modal属性因此需要回退方案当对话框打开时将对话框下方所有静态内容加上aria-hiddentrue。为了操作简单建议把所有非模态元素放在body下的同一个公共祖先元素中这样只需给这一个元素设置/移除aria-hiddendialog.listen(MDCDialog:opened, function() { // 假设 contentElement 指向页面其余内容的公共父元素 contentElement.setAttribute(aria-hidden, true); }); dialog.listen(MDCDialog:closing, function() { contentElement.removeAttribute(aria-hidden); });设计细节示例有意监听opened而非opening事件和closing而非closed事件目的是避免一个元素先隐藏、另一个元素后可见造成的屏幕阅读器焦点在元素间跳跃。四种对话框类型详解Alert 对话框Alert 对话框用于以紧急信息、细节或操作打断用户通常不包含标题直接展示内容与操作按钮。div classmdc-dialog div classmdc-dialog__container div classmdc-dialog__surface rolealertdialog aria-modaltrue aria-labelledbymy-dialog-title aria-describedbymy-dialog-content tabindex-1 div classmdc-dialog__content idmy-dialog-content Discard draft? /div div classmdc-dialog__actions button typebutton classmdc-button mdc-dialog__button />div classmdc-dialog div classmdc-dialog__container div classmdc-dialog__surface rolealertdialog aria-modaltrue aria-labelledbymy-dialog-title aria-describedbymy-dialog-content tabindex-1 !-- 标题不能包含前导空白原因见 mdc-typography-baseline-top() -- h2 classmdc-dialog__title idmy-dialog-title!-- --Choose a Ringtone!-- --/h2 div classmdc-dialog__content idmy-dialog-content ul classmdc-deprecated-list mdc-deprecated-list--avatar-list li classmdc-deprecated-list-item tabindex0 />div classmdc-dialog div classmdc-dialog__container div classmdc-dialog__surface rolealertdialog aria-modaltrue aria-labelledbymy-dialog-title aria-describedbymy-dialog-content tabindex-1 !-- 标题不能包含前导空白原因见 mdc-typography-baseline-top() -- h2 classmdc-dialog__title idmy-dialog-title!-- --Choose a Ringtone!-- --/h2 div classmdc-dialog__content idmy-dialog-content ul classmdc-deprecated-list li classmdc-deprecated-list-item tabindex0 span classmdc-deprecated-list-item__graphic div classmdc-radio input classmdc-radio__native-control typeradio idtest-dialog-baseline-confirmation-radio-1 nametest-dialog-baseline-confirmation-radio-group checked div classmdc-radio__background div classmdc-radio__outer-circle/div div classmdc-radio__inner-circle/div /div /div /span label idtest-dialog-baseline-confirmation-radio-1-label fortest-dialog-baseline-confirmation-radio-1 classmdc-deprecated-list-item__textNone/label /li !-- ... -- /ul /div div classmdc-dialog__actions button typebutton classmdc-button mdc-dialog__button />div classmdc-dialog mdc-dialog--open mdc-dialog--fullscreen div classmdc-dialog__container div classmdc-dialog__surface roledialog aria-modaltrue aria-labelledbymy-dialog-title aria-describedbymy-dialog-content tabindex-1 div classmdc-dialog__header h2 classmdc-dialog__title idmy-dialog-title Full-Screen Dialog Title /h2 div classmdc-dialog__close-tooltip-wrapper button classmdc-icon-button material-icons mdc-dialog__close>div classmdc-dialog mdc-dialog--open test-dialog mdc-dialog--sheet mdc-dialog--no-content-padding aria-modaltrue aria-labelledbytest-dialog__title--with-close-icon-button aria-describedbytest-dialog__content--with-close-icon-button idtest-dialog div classmdc-dialog__scrim>dialog.autoStackButtons false;此外如果在组件实例化之前手动给根元素添加了mdc-dialog--stacked修饰类自动堆叠同样会被禁用见 packages/mdc-dialog/foundation.ts 的init()——检测到mdc-dialog--stacked类即调用setAutoStackButtons(false)。官方建议对话框操作按钮的文案应尽量简短能在一行内放下最好。堆叠检测的实现细节自动堆叠的核心逻辑是detectStackedButtons()packages/mdc-dialog/foundation.ts先移除mdc-dialog--stacked类以便测量按钮的自然位置通过适配器areButtonsStacked()判断按钮是否错行底层由 packages/mdc-dialog/util.ts 的areTopsMisaligned实现比较各按钮的offsetTop若存在两种以上不同的顶部位置则认为已堆叠若堆叠则重新添加mdc-dialog--stacked类且当堆叠状态发生变化时调用适配器reverseButtons()反转按钮 DOM 顺序。默认动作按钮Enter 键触发MDC Dialog 支持将某个操作按钮标记为默认动作按下 Enter 键即可触发。典型应用场景是单选 Confirmation 对话框用户无需逐个 Tab 到目标按钮直接按 Enter 即可确认选择加速操作流程。标记方法给按钮添加data-mdc-dialog-button-default数据属性。例如div classmdc-dialog__actions button typebutton classmdc-button mdc-dialog__button>const {activate, deactivate} util.createFocusTrapInstance(surfaceEl, focusTrapFactory, initialFocusEl);给定对话框 surface 元素、可选的focusTrap工厂函数以及可选的初始聚焦元素其行为保证焦点被限制在surfaceEl内部initialFocusEl在焦点陷阱激活时获得焦点——如果省略则默认聚焦surfaceEl中第一个可聚焦元素以任何方式关闭对话框包括按 Escape 或点击对话框外部都会停用焦点陷阱焦点会归还给焦点陷阱激活前聚焦的元素。这个 focus trap 实例可用于实现trapFocus与releaseFocus适配器方法分别调用instance.activate()与instance.deactivate()即可。focusTrapFactory可用于覆盖创建焦点陷阱所用的 focus-trap 函数其 API 与 focus-trap 的createFocusTrap相同这也是它的默认实现。可以传入自定义函数用于在测试中 mock 真实函数或在调用前修改传给函数的参数。从组件源码看MDCDialog在initialSyncWithDOM中调用util.createFocusTrapInstance(this.container, this.focusTrapFactory, this.getInitialFocusEl() || undefined)创建实例见 packages/mdc-dialog/component.ts其工厂默认实现为new FocusTrap(el, focusOptions)该类型来自material/dom/focus-trap。组件测试 packages/mdc-dialog/test/util.test.ts 对createFocusTrapInstance的实例化行为有专门覆盖。小结material/dialog以极简 DOM 约定 事件驱动动作协议的方式覆盖了 Material Design 的全部对话框形态data-mdc-dialog-action提供统一关闭协议escapeKeyAction/scrimClickAction/autoStackButtons三个可配置属性覆盖最常用的交互定制而trapFocus/releaseFocus与util.createFocusTrapInstance()则把无障碍焦点管理从组件逻辑中解耦出来方便各框架按自身习惯实现。在实际项目中使用时请记住三条核心原则对话框内的子组件务必在MDCDialog:opened之后实例化任何纯关闭操作统一使用close动作永远为用户保留一种可关闭对话框的方式。赞分享前端UI组件设计系统【免费下载链接】material-components-webModular and customizable Material Design UI components for the web项目地址https://gitcode.com/gh_mirrors/ma/material-components-web点击查看免费下载相关推荐Material DialogsAndroid Material Design 对话框库全面解析Material DialogsAndroid Material Design 对话框库全面解析 Material Dialogs 是一个基于 AndroidUI组件移动开发5分钟掌握洛雪音乐音源配置全网音乐一站式解决方案终极指南5分钟掌握洛雪音乐音源配置全网音乐一站式解决方案终极指南 还在为不同音乐平台切换而烦恼吗想要在一个应用里畅享酷我、酷狗、QQ音乐、网易云、咪咕等所有平台的歌音视频**材料对话框Material Dialogs项目指南**材料对话框Material Dialogs项目指南 1. 目录结构及介绍 材料对话框 项目基于Kotlin专注于提供美观、流畅且可扩展的对话框API。以下UI组件移动开发上一篇GitHub for Unity插件安装与更新完全指南下一篇7天掌握NodeJS从零开始理解NodeJS基础创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考