Material Design Lite 使用与自托管指南在静态站点中落地 Material Design 组件的完整实践【免费下载链接】material-design-liteMaterial Design Components in HTML/CSS/JS项目地址: https://gitcode.com/gh_mirrors/ma/material-design-liteMaterial Design LiteMDL是 Google 推出的 Material Design 规范在原生 CSS / JS / HTML 中的实现它不依赖任何 JavaScript 框架或库专为静态内容网站设计开箱即可获得跨设备优化、旧浏览器优雅降级与无障碍体验。本文以当前仓库根目录的 README.md 为骨架结合 src/ 目录下的源码实现与 gulpfile.babel.js 构建脚本完整讲解 MDL 的获取方式、页面接入、组件使用、浏览器兼容策略、运行时升级机制与从源码编译的方法读完即可在任意静态项目中独立落地一套 Material Design 风格组件。一、MDL 是什么根据 README.md 的定义Material Design Lite 是 Material Design 组件在原生vanillaCSS、JS 和 HTML中的实现不依赖任何 JavaScript 框架或库无需 React、Vue、jQuery 等运行时即可使用面向静态内容网站适合博客、产品页、文档站等以静态 HTML 为主的项目跨设备优化针对多终端访问做了专门优化旧浏览器优雅降级在不支持关键特性的浏览器中自动退化为纯 CSS 体验无障碍友好开箱即具备可访问性基础。从源码入口 src/material-design-lite.scss 可以看到MDL 的组件体系由以下模块组成palette调色板、ripple水波纹、animation动画、badge、button、card、checkbox、chip、data-table、dialog、expansion、footermega/mini、icon-toggle、list、menu、progress、layout、radio、slider、snackbar、spinner、switch、tabs、textfield、tooltip、shadow、grid以及 resets 与 typography 基础层。这一清单也印证了 README 中对包含按钮、复选框、文本框等通用控件以及卡片、网格、滑块、加载动画、标签页、排版等增强组件的描述。维护状态说明务必先读README 明确提醒MDL 目前处于有限支持limited support状态核心团队的开发已迁移到 Material Components for the webMDL v2仓库不再推进新功能开发但欢迎提交 PR、修复关键 bug 并发布新版本不接受破坏性变更breaking changes。同时原getmdl.io站点已下线旧有的托管文档与组件画廊不再可用。README 特别说明MDL 本身作为一套可随时嵌入任何项目的原生 Material Design CSS/JS/HTML 依然完全可用只是官方托管的文档站点退役了。这一点直接影响了下面如何获取 MDL的方案选择。二、如何获取 MDL自托管、CDN 与包管理器README 给出的使用建议非常明确如果只是想在自己的网站或 Web 应用中使用 MDL最稳妥的方式是自托管 v1.3.0 版本因为此前推荐的getmdl.io托管资源已不再提供。当前仓库的 package.json 也确认版本号为1.3.0version: 1.3.0与这一建议一致。1. 自托管 v1.3.0推荐从 v1.3.0 发布版中获取预构建的 CSS 与 JSmaterial.min.css、material.min.js并将其放在自己的源站origin上提供。自托管可以完全掌控资源可用性与加载性能不依赖任何第三方服务。2. CDN 备选方案如果需要一个即插即用的 CDN 替代方案MDL 在 CDNJS 上有镜像material-design-lite。适合快速原型或对 CDN 可用性有要求的场景。3. npm / Bower 包管理npm包仍以material-design-lite名称发布在 npm 上。package.json 中声明了main: dist/material.min.js安装后即可引用打包产物Bower仓库同时保留了 bower.json主文件声明为material.min.css与material.min.js并声明了material、design、styleguide、style、guide等关键词。4. 克隆仓库开发者可以克隆本仓库获取完整源码git clone https://gitcode.com/gh_mirrors/ma/material-design-lite或者直接下载仓库归档。README 对 Windows 用户给出了一条重要提示如果编译时因行尾line endings报错请将 git 配置为以 Unix 的lf行尾检出仓库git config core.eol lf git config core.autocrlf input git rm --cached -r . git reset --hard注意README 强调 master 分支被视为不稳定分支不要在生产环境直接使用请使用带标签的稳定版本tagged state、npm 或 Bower 获取稳定产物。三、在页面中接入 MDL三步引入在项目目录中保留一份 MDL 的构建产物后在每个 HTML 页面中按 src/INTRODUCTION.md 的方式引入压缩后的 CSS 与 JS 文件并使用 Material Icons 图标字体link relstylesheet hrefcss/material.min.css script srcjs/material.min.js/script link relstylesheet href//fonts.googleapis.com/icon?familyMaterialIcons其中material.min.css提供全部组件的样式由material-design-lite.scss编译而来material.min.js提供组件运行时行为按钮点击、菜单、布局抽屉、水波纹等Material Icons 字体用于图标类组件如 icon button、icon-toggle的图标展示。完成上述三行引入后页面即具备使用 MDL 组件的全部能力。四、组件使用三步法MDL 组件的使用遵循一套统一的模式src/INTRODUCTION.md 将其总结为三步从一个标准 HTML 元素开始根据目标组件选择button、div、ul等原生元素添加一个或多个 MDL 专属 CSS 类如mdl-button、mdl-tabs__panel这些类把元素升级为 MDL 组件在多种浏览器与设备上验证表现确认组件外观与交互符合预期。关于 HTML 元素与 MDL CSS 类的组合MDL 使用**独立 CSS 类independent classes**构建组件可以应用到几乎任何 HTML 元素上。各组件 README 中的示例使用表现最佳的元素组合若需使用其他元素官方鼓励自行实验找到最适合应用场景的组合。4.1 示例Button 组件以 src/button/README.md 为例按钮组件的完整代码是button classmdl-button mdl-js-button mdl-button--raisedSave/buttonmdl-button将按钮定义为 MDL 组件必需mdl-js-button赋予按钮基础 MDL 行为必需mdl-button--raised应用凸起显示效果。其他常用效果包括!-- FAB悬浮圆形按钮 -- button classmdl-button mdl-js-button mdl-button--fabOK/button !-- 图标按钮 彩色 -- button classmdl-button mdl-js-button mdl-button--icon mdl-button--colored?/button按钮类型的完整配置项如下表摘自 src/button/README.mdMDL 类效果备注mdl-button将按钮定义为 MDL 组件必需mdl-js-button赋予按钮基础 MDL 行为必需无应用flat扁平显示效果默认mdl-button--raised应用raised显示效果与 fab、mini-fab、icon 互斥mdl-button--fab应用fab圆形显示效果与 raised、mini-fab、icon 互斥mdl-button--mini-fab应用mini-fab小型圆形显示效果与 raised、fab、icon 互斥mdl-button--icon应用icon小型纯色圆形显示效果与 raised、fab、mini-fab 互斥mdl-button--colored应用彩色显示效果primary 或 accent 色颜色定义在material.min.cssmdl-button--primary应用 primary 主色效果颜色定义在material.min.cssmdl-button--accent应用 accent 强调色效果颜色定义在material.min.cssmdl-js-ripple-effect应用水波纹点击效果可与其他任意类组合使用关于禁用态所有按钮类型都提供禁用版本使用标准 HTML 布尔属性disabled触发例如button classmdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect disabledRaised Ripples Disabled/button或者使用mdl-button--disabled类实现同等视觉样式但不会禁用元素功能该属性也可通过脚本动态添加或移除。从源码 src/button/button.js 可以看到按钮组件的运行时行为MaterialButton构造函数在初始化时检查元素是否包含mdl-js-ripple-effect类若包含则动态创建mdl-button__ripple-container与mdl-ripple两个 span 注入按钮内部并绑定mouseup/mouseleave的失焦处理同时暴露disable()与enable()两个公开方法源码第 78-91 行用于程序化控制按钮状态。4.2 示例Layout 组件布局组件是 MDL 中最常用的整页骨架src/layout/README.md 给出了完整的 12 步搭建流程核心结构如下div classmdl-layout mdl-js-layout header classmdl-layout__header div classmdl-layout-icon/div div classmdl-layout__header-row span classmdl-layout__titleSimple Layout/span div classmdl-layout-spacer/div nav classmdl-navigation a classmdl-navigation__link href#Nav link 1/a a classmdl-navigation__link href#Nav link 2/a a classmdl-navigation__link href#Nav link 3/a /nav /div /header div classmdl-layout__drawer span classmdl-layout__titleSimple Layout/span nav classmdl-navigation a classmdl-navigation__link href#Nav link 1/a /nav /div main classmdl-layout__content pContent/p /main /div需要特别注意的是布局不能直接应用于body元素必须创建一个嵌套的div作为布局容器。常用的布局变体包括mdl-layout--fixed-drawer大屏固定侧边栏drawer小屏自动折叠为菜单图标mdl-layout--fixed-header小屏下 header 也始终固定可见mdl-layout__header--scrollheader 随内容滚动mdl-layout__header--waterfall与mdl-layout__header--waterfall-hide-top实现多行 header 的瀑布式折叠效果mdl-layout__header--transparent透明 header绘制在布局背景之上mdl-layout__tab-bar/mdl-layout__tab/mdl-layout__tab-panel构建标签页式布局。完整的布局配置类表格含mdl-layout、mdl-layout__header-row、mdl-layout-spacer、mdl-navigation、mdl-layout__drawer、mdl-layout__content等全部必需与可选类同样收录在 src/layout/README.md 的 Configuration options 小节中是实现响应式页面的权威参考。五、运行时升级机制componentHandler 源码剖析MDL 的类即组件模式之所以能工作核心在于运行时升级upgrade机制其实现位于 src/mdlComponentHandler.js。理解它有助于排查为什么我的组件没有生效这类问题。5.1 注册与升级每个组件模块如 src/button/button.js 的末尾会调用componentHandler.register()注册自身componentHandler.register({ constructor: MaterialButton, classAsString: MaterialButton, cssClass: mdl-js-button, widget: true });其中cssClass即页面 HTML 中的类名classAsString是组件的程序化名称。注册时会校验重复注册重复的 cssClass 或 className 都会抛出错误该行为在 test/unit/componentHandler.js 中有对应测试用例第 72-90 行。5.2 自动升级与>if (classList in document.createElement(div) querySelector in document addEventListener in window Array.prototype.forEach) { document.documentElement.classList.add(mdl-js); componentHandler.upgradeAllRegistered(); }即浏览器同时支持classList、querySelector、addEventListener与Array.prototype.forEach时在html根元素上添加mdl-js类并升级全部已注册组件否则将upgradeElement与register替换为空函数以避免 JS 报错——这正是旧浏览器优雅降级的源码级实现。升级过程中每个被升级的元素都会在data-upgraded属性中记录已升级的组件名如,MaterialButton,MaterialRipple从而保证同一元素不会被重复升级。该机制在 test/unit/componentHandler.js 中有充分验证例如按 JS 类名升级单个元素upgradeElement(el, MaterialButton)多次升级叠加button ripple 会累积记录upgradeElements()会递归升级子元素如 checkbox 内部的 rippledowngradeElements()会将data-upgraded恢复为空。5.3 事件钩子升级过程会派发mdl-componentupgrading可取消defaultPrevented时中止升级与mdl-componentupgraded事件降级时派发mdl-componentdowngraded事件开发者可以通过registerUpgradedCallback()在特定类型组件升级时挂接回调。这为需要深度定制组件行为的场景提供了扩展点。六、浏览器支持与降级策略README 给出的浏览器支持矩阵如下IE9IE10IE11ChromeOperaFirefoxSafariChrome (Android)Mobile SafariBAAAAAAAAA 级浏览器完全支持fully supportedB 级浏览器IE9优雅降级到纯 CSS 体验CSS-only experience。这一策略与上一节提到的切芥末测试一致不支持必要 API 的浏览器不执行 JS 升级组件仅以 CSS 形态呈现。从 gulpfile.babel.js 第 58-68 行的AUTOPREFIXER_BROWSERS常量还可以看到官方对 CSS 自动前缀autoprefixer的目标浏览器配置ie 10、ff 30、chrome 34、safari 7、opera 23、ios 7、android 4.4、bb 10等可作为兼容性预期的参考依据。七、从源码构建 MDLREADME 明确该文档面向贡献者或需要自行编译 MDL的开发者。仓库使用 Gulp 作为构建工具构建脚本位于 gulpfile.babel.jsES2015 语法由 Babel 转译见 package.json 中的babel配置。7.1 构建产物结构样式styles任务将 src/material-design-lite.scss 编译为dist/material.css再经 CSSo 压缩为dist/material.min.css均带 banner 与 source map独立网格styles-grid任务将 src/material-design-lite-grid.scss 编译为material-grid.css与material-grid.min.css适合只需要栅格系统的场景脚本scripts任务按 SOURCES 定义的顺序合并所有组件 JS——先是src/mdlComponentHandler.js与src/third_party/**/*.js基础层然后是 button、checkbox、icon-toggle、menu、progress、radio、slider、snackbar、spinner、switch、tabs、textfield、tooltip 等基础组件再是复用了基础组件的 layout 与 contenteditable="false">【免费下载链接】material-design-liteMaterial Design Components in HTML/CSS/JS项目地址: https://gitcode.com/gh_mirrors/ma/material-design-lite创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考