Material Design Lite 快速上手指南：从 CDN 引入到动态组件升级的完整实践

Material Design Lite 快速上手指南从 CDN 引入到动态组件升级的完整实践【免费下载链接】material-design-liteMaterial Design Components in HTML/CSS/JS项目地址: https://gitcode.com/gh_mirrors/ma/material-design-liteMaterial Design LiteMDL是一个基于 Google Material Design 设计语言的轻量级前端组件库全部组件由 CSS、JavaScript 与 HTML 构建不依赖任何 JavaScript 框架。本文以当前仓库的官方入门文档docs/_pages/started.md其页面内容由 docs/_templates/started.html 渲染为骨架结合仓库源码与构建配置系统讲解 MDL 的五种引入方式、配色方案机制、组件使用三步法以及动态网站中upgradeElement的底层原理。读完本文你将能够独立地在任意项目中接入并配置 MDL并正确处理动态创建的组件升级问题。MDL 是什么设计目标与适用场景按照 src/INTRODUCTION.md 的定义MDL 是面向 Web 开发者的 Material Design 组件库其核心理念是以 CSS、JavaScript、HTML 三种技术构建组件用于构造美观、一致且功能完整的网页与 Web 应用。它追求三条现代 Web 设计原则浏览器可移植性browser portability跨浏览器、跨操作系统使用设备无关性device independence针对跨设备使用进行优化优雅降级graceful degradation在较老的浏览器中也能呈现可用状态。MDL 的组件库既包含按钮、复选框、文本框等常见 UI 控件的 Material Design 化重制版本也包含卡片Card、栅格布局Grid、滑块Slider、进度条Spinner、标签页Tabs、排版Typography等增强型特性。它免费开放使用既可以与任何构建库或开发环境配合也可以独立裸用——这正是lite轻量一词的定位所在。第一步引入主 CSS 与 JavaScript 文件在每个需要 MDL 的 HTML 页面中都必须引入 MDL 的 CSS 与 JavaScript 文件。官方文档提供了五种获取方式CDN 托管、手动下载、源码构建、Bower 安装、npm 安装。无论选择哪种方式页面的核心骨架都是一样的——一个link引入样式、一个script引入脚本、再加上 Material Icons 图标字体。当前仓库版本为 1.3.0见 package.json 与 bower.json。方式一CDN 托管推荐如果不想自己维护静态资源可以直接在 HTML 中加入以下三行约 27kB gzippedlink relstylesheet hrefhttps://fonts.googleapis.com/icon?familyMaterialIcons link relstylesheet href$$hosted_libs_prefix$$/$$version$$/material.indigo-pink.min.css script defer src$$hosted_libs_prefix$$/$$version$$/material.min.js/script其中$$hosted_libs_prefix$$是 CDN 前缀占位符$$version$$对应版本号当前仓库版本为 1.3.0需要替换为实际部署地址。注意脚本使用了defer属性确保脚本在文档解析完成后执行此时componentHandler才能正确扫描并升级页面中的组件。选择配色方案MDL 的配色基于主色primary与强调色accent并直接编码在 CSS 文件名中命名模式为material.{primary}-{accent}.min.css例如material.indigo-pink.min.css代表主色 indigo、强调色 pink。官方 CDN 托管了多种基于常见 Material Design 颜色的组合。你可以通过 自定义与预览工具 在线预览各配色组合的效果。各配色的具体颜色值定义在 src/_color-definitions.scss 中从源码可以确认每种主题对应一套完整的颜色变量映射。方式二手动下载从发布地址下载mdl.zip即当前仓库构建产物 dist 目录内容的压缩包解压后将material.min.css与material.min.js放入项目然后引用link relstylesheet href./material.min.css script src./material.min.js/script link relstylesheet hrefhttps://fonts.googleapis.com/icon?familyMaterialIcons同样地若要自定义配色应使用 自定义与预览工具 选择主色与强调色后下载定制版 CSS用定制文件替换默认的material.min.css。方式三从源码构建官方源码以仓库形式托管构建流程如下# 克隆本仓库当前镜像仓库 git clone https://gitcode.com/gh_mirrors/ma/material-design-lite.git # 进入源码目录 cd material-design-lite # 安装依赖并安装全局 gulp npm install npm install -g gulp # 构建生产版本组件 gulp构建产物会输出到dist目录。从 gulpfile.babel.js 的构建任务可以看到完整链路styles任务通过 gulp-sass 编译 src/material-design-lite.scss 得到material.min.cssgulpfile.babel.jsscripts任务先执行 lint 再拼接各组件脚本并压缩为material.min.jsgulpfile.babel.jszip:mdl任务则把两个主文件打包成mdl.zipgulpfile.babel.js。依赖清单与 Node 版本要求node 0.12.0见 package.json。link relstylesheet href./material.min.css script src./material.min.js/script link relstylesheet hrefhttps://fonts.googleapis.com/icon?familyMaterialIcons需要说明的是通过源码构建方式引入时无法定制配色方案——如需定制配色请优先使用 CDN 托管或手动下载方式再配合 自定义与预览工具 生成定制 CSS。方式四Bower 安装在启用 Bower 的项目中执行bower install material-design-lite --save该命令会将 MDL 库文件安装到项目的bower_components目录。从 bower.json 可以看到包的主文件声明为material.min.css与material.min.js版本同为 1.3.0。引用方式link relstylesheet href/bower_components/material-design-lite/material.min.css script src/bower_components/material-design-lite/material.min.js/script link relstylesheet hrefhttps://fonts.googleapis.com/icon?familyMaterialIcons同样地Bower 方式也无法定制配色需要定制时仍应使用 自定义与预览工具。方式五npm 安装在 npm 工程中执行npm install material-design-lite --save该命令将库文件安装到项目的node_modules目录仓库自身的 package.json 将main指向dist/material.min.js引用方式link relstylesheet href/node_modules/material-design-lite/material.min.css script src/node_modules/material-design-lite/material.min.js/script link relstylesheet hrefhttps://fonts.googleapis.com/icon?familyMaterialIcons至此页面已具备使用 MDL 组件的全部条件。第二步使用组件——以 Button 为例官方入门页在 docs/_templates/started.html 提供了两个最直观的按钮示例带涟漪效果的强调色按钮以及彩色 FAB浮动操作按钮。这两个示例的完整源码分别位于 src/button/snippets/raised-ripple-accent.html 与 src/button/snippets/fab-colored.html可直接复制到项目页面的body中使用。示例一带涟漪的强调色凸起按钮!-- Accent-colored raised button with ripple -- button classmdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent Button /button示例二彩色 FAB 按钮!-- Colored FAB button -- button classmdl-button mdl-js-button mdl-button--fab mdl-button--colored i classmaterial-iconsadd/i /button通过 CSS 类定制组件行为MDL 组件的全部行为与外观定制都通过追加 CSS 类完成。以上述按钮为例mdl-button mdl-js-button基础按钮样式 声明这是一个需要 JavaScript 升级的 MDL 按钮组件mdl-js-button正是 src/button/button.js 中注册给MaterialButton组件的 CSS 类mdl-js-ripple-effect为按钮添加点击涟漪效果。从 src/button/button.js 的init()实现可以看到当元素包含RIPPLE_EFFECTmdl-js-ripple-effect类时组件会在按钮内动态注入mdl-button__ripple-container与mdl-ripple两个 span 元素并在 mouseup/mouseleave 时触发 blur 处理mdl-button--fab将按钮外观切换为圆形 FABmdl-button--accent/mdl-button--colored分别应用强调色与主色调色板。从 src/button/_button.scss 的样式源码可以进一步验证所有这些mdl-button--*变体类在 SCSS 中均有对应的规则定义分别控制字体、内边距、圆角与主题色。除按钮外MDL 还提供了卡片src/card、滑块src/slider、表格src/data-table、菜单src/menu等大量组件完整列表与配置选项参见 组件文档开箱即用的整站示例参见 模板页面。通用规则与原则组件使用三步法无论使用哪种组件都遵循同样的两步基本流程详见 docs/_templates/started.html从一个标准 HTML 元素开始例如button、div或ul具体取决于你要使用的组件。这一步让元素在页面中确立存在为 MDL 改造做好准备为该元素添加一个或多个 MDL 专属 CSS 类例如mdl-button或mdl-tabs__panel。这些类将 MDL 增强应用到元素上使其转变为 MDL 组件。此外务必在文档中加入 viewport meta 标签确保移动设备正确渲染meta nameviewport contentwidthdevice-width, initial-scale1.0关于 HTML 元素与 MDL CSS 类的说明MDL 采用带命名空间的 BEM 风格类mdl-前缀 __element/--modifier命名这些类可以应用到几乎所有 HTML 元素上。对于某些组件几乎任意元素都适用对于另一些组件部分元素会获得更好的视觉或行为表现。各组件文档中的示例均选用了表现良好的元素组合如果你必须使用示例之外的元素官方鼓励自行试验找到最适合你应用的 HTML 元素与 MDL 类组合。第三步进阶在动态网站中使用upgradeElementMDL 会在页面加载时自动注册并渲染所有带 MDL 类的元素。其底层机制位于 src/mdlComponentHandler.js页面load事件触发时脚本先执行cutting the mustard特性检测验证classList、querySelector、addEventListener与Array.prototype.forEach是否可用见 src/mdlComponentHandler.js通过后给html加上mdl-js类并调用componentHandler.upgradeAllRegistered()对所有已注册组件执行批量升级。但当你通过 JavaScript 动态创建 DOM 元素时这些新元素不会自动获得升级必须显式调用upgradeElement函数。官方文档给出的示例是动态创建前面展示过的带涟漪凸起按钮div idcontainer/ script var button document.createElement(button); var textNode document.createTextNode(Click Me!); button.appendChild(textNode); button.className mdl-button mdl-js-button mdl-js-ripple-effect; componentHandler.upgradeElement(button); document.getElementById(container).appendChild(button); /script关键点是upgradeElement必须在元素插入 DOM 之前调用如上例所示先 upgrade 再 appendChild这样才能保证组件的初始化逻辑在正确时机执行。upgradeElement的底层原理从 src/mdlComponentHandler.js 的实现看upgradeElementInternal的执行链路如下参数校验若传入的不是 Element 实例直接抛出Invalid argument provided to upgrade MDL element.错误事件可取消先派发可取消的mdl-componentupgrading事件若外部监听器调用了preventDefault()则本次升级被取消匹配注册组件当未显式传入 jsClass 时遍历registeredComponents_注册表找出元素 classList 中包含其cssClass、且尚未被升级的组件通过data-upgraded属性记录已升级的类名列表见 src/mdlComponentHandler.js实例化组件为每个匹配的组件调用new registeredClass.classConstructor(element)创建实例把类名追加到元素的data-upgraded属性并执行用户通过registerUpgradedCallback注册的回调src/mdlComponentHandler.js派发完成事件最后派发mdl-componentupgraded事件。每个组件在自身脚本末尾通过componentHandler.register(...)完成注册例如按钮组件注册为classAsString: MaterialButton、cssClass: mdl-js-buttonsrc/button/button.js。当widget为true时升级后的实例还会被挂载到元素属性上element[registeredClass.className] instance开发者因此可以直接调用实例的公开方法——例如MaterialButton的disable()/enable()src/button/button.js。若你的页面在首屏加载后动态替换大段 DOM例如单页应用还可以使用upgradeDom()扫描并升级全部匹配元素与upgradeElements()升级一组元素并递归处理子元素见 src/mdlComponentHandler.js。对应地downgradeElements()用于销毁组件实例并从data-upgraded中移除记录。这些 API 的定义与行为均可从 src/mdlComponentHandler.js 的源码注释与实现中确认单元测试位于 test/unit/componentHandler.js。了解 MDL 的职责边界MDL 的定位是提供一套轻量、基础的 Material Design 组件与模板集合而不是覆盖所有 UX 需求的完整框架。官方在 docs/_templates/started.html 中明确表示项目不打算提供满足所有可能的 UX 需求的组件结构而是提供低摩擦low-friction的 Material Design 实现供你在此基础上扩展即使在 Material Design 规范内部尤其是卡片也不可能以无缝的方式穷尽所有组合当你发现某个能力未被提供例如抽屉中的下拉菜单可能需要自行编写组件。换句话说MDL 刻意保持lite开发者应将其视为可构建的起点而非终点。这一设计哲学也贯穿于整个仓库的目录组织每个组件都是独立的模块如 src/button、src/card各自的样式、脚本与示例放在同一目录下方便按需取舍。下一步深入组件与模板组件详解每个组件的完整用法、MDL 类及其效果、编码注意事项与配置选项参见 组件文档其中按钮部分对应文档中引用的#buttons-section卡片、滑块、表格、菜单等小节依次对应各组件模块整站模板展示 MDL 组件组合使用的真实站点示例参见 模板页面仓库内的现成模板位于 templates 目录如 templates/dashboard/index.html、templates/blog/index.html可以直接打开参考样式与排版MDL 的排版与颜色规范参见 样式文档本地演示运行gulp构建后可通过gulp serve见 gulpfile.babel.js在本地预览站点与组件 demo。LicenseMDL 由 Google 于 2015 年发布采用 Apache-2.0 许可证仓库中的 LICENSE 文件为完整文本可自由使用、修改与分发。【免费下载链接】material-design-liteMaterial Design Components in HTML/CSS/JS项目地址: https://gitcode.com/gh_mirrors/ma/material-design-lite创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考