UI组件前端设计系统【免费下载链接】material-webMaterial Design Web Components项目地址https://gitcode.com/gh_mirrors/ma/material-web点击查看免费下载本指南是material/webMaterial 3 Web Components 组件库当前仓库版本 2.5.0的快速入门教程覆盖从不装任何构建工具、用 CDN 直接跑起来的原型验证到npm 安装、按需导入、Rollup 打包的生产落地全流程。读完你将掌握 import map 的配置方法、md-*组件标签的用法以及如何把基于裸模块说明符bare module specifiers的源码解析为可发布的静态 bundle。快速开始的整体流程material/web的使用路径可以分成两条快速原型通过 CDN 加 import map无需安装 NPM 依赖、无需任何打包工具写一个 HTML 文件即可体验全部组件生产项目通过 NPM 安装组件库按需导入所用组件再借助 Rollup 等工具把裸模块说明符合并打包产出可供script src直接引用的文件。下面按这两条路径依次展开。CDN零安装、零构建的快速原型对于快速原型验证官方推荐使用 esm.run 这类 CDN 服务它允许你不安装、不构建就直接以 ES Module 方式使用material/web。关键手段是浏览器原生的import map把包名material/web/映射到 CDN 地址模块内的裸导入就能被浏览器正确解析。以下是一段完整的、可直接保存为 HTML 运行的示例与 README.md 中的 buildless 示例保持一致head link hrefhttps://fonts.googleapis.com/css2?familyRoboto:wght400;500;700displayswap relstylesheet script typeimportmap { imports: { material/web/: https://esm.run/material/web/ } } /script script typemodule import material/web/all.js; import {styles as typescaleStyles} from material/web/typography/md-typescale-styles.js; document.adoptedStyleSheets.push(typescaleStyles.styleSheet); /script /head body h1 classmd-typescale-display-mediumHello Material!/h1 form p classmd-typescale-body-mediumCheck out these controls in a form!/p md-checkbox/md-checkbox div md-radio namegroup/md-radio md-radio namegroup/md-radio md-radio namegroup/md-radio /div md-outlined-text-field labelFavorite color valuePurple/md-outlined-text-field md-outlined-button typeresetReset/md-outlined-button /form style form { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; } /style /body这段代码里有三个值得拆解的要点import map 负责地址重写material/web/: https://esm.run/material/web/告诉浏览器凡是import ... from material/web/xxx.js的裸模块说明符都去 CDN 上对应的路径加载。这是零构建能成立的前提。all.js是全量便捷入口import material/web/all.js一次注册所有组件。但请务必注意 all.ts 源码头部的警告——这个全量入口只用于原型和开发构建生产环境必须按需导入用到的组件否则会打包进大量用不到的代码。从 all.ts 可以看到它同时做了两类导出import ./xxx.js用于注册组件副作用export * from ./xxx.js用于导出组件类。typography 样式需要手动注入md-typescale-*这类排版类不属于任何组件需要单独导入并通过document.adoptedStyleSheets.push(...)注入。在 typography/md-typescale-styles.ts 中styles实际导出自md-typescale-styles.cssresult.js而 typography/_typescale.scss 的styles()mixin 会为display / headline / title / body / label五类字号、各small / medium / large三档尺寸生成.md-typescale-scale-size类部分档位还有-prominent强调字重变体这正是示例中md-typescale-display-medium、md-typescale-body-medium类名的来源。这段示例同时用到了多种md-*组件标签md-checkbox、md-radio、md-outlined-text-field、md-outlined-button它们由 checkbox/checkbox.ts、textfield/outlined-text-field.ts 等入口文件中的customElement(md-xxx)装饰器注册为自定义元素。原型验证通过之后正式项目请继续往下走安装依赖、按需导入、构建打包。安装通过 npm 安装组件库安装需要 npm 与 node 环境在项目根目录执行npm install material/web从仓库 package.json 可以看到该包的运行时依赖非常轻lit支持^2.8.0 || ^3.0.0、lit/context、safevalues、tslib包本身声明为 ES Moduletype: module。它的files字段说明发布到 NPM 的内容包含编译后的**/*.js、**/*.d.ts类型声明、**/*.scss可进一步做 Sass 主题定制以及custom-elements.json自定义元素清单便于 IDE 与文档工具消费同时排除了测试文件与测试辅助代码。导入按需导入组件定义组件定义的导入路径遵循统一约定material/web/component/component-variant.js即在material/web/下按组件名/组件变体组织入口文件。在应用的入口 JS 中依次导入用到的组件即可// index.js import material/web/button/filled-button.js; import material/web/button/outlined-button.js; import material/web/checkbox/checkbox.js;从仓库的 all.ts 导入清单可以梳理出当前可用的完整组件变体生产环境请只引入其中需要的部分按钮button/elevated-button.js、button/filled-button.js、button/filled-tonal-button.js、button/outlined-button.js、button/text-button.js复选框checkbox/checkbox.js纸片 chipschips/assist-chip.js、chips/chip-set.js、chips/filter-chip.js、chips/input-chip.js、chips/suggestion-chip.js对话框 / 分割线 / 阴影dialog/dialog.js、divider/divider.js、elevation/elevation.jsFABfab/branded-fab.js、fab/fab.js字段 / 焦点环 / 图标field/filled-field.js、field/outlined-field.js、focus/md-focus-ring.js、icon/icon.js图标按钮iconbutton/filled-icon-button.js、iconbutton/filled-tonal-icon-button.js、iconbutton/icon-button.js、iconbutton/outlined-icon-button.js列表 / 菜单list/list.js、list/list-item.js、menu/menu.js、menu/menu-item.js、menu/sub-menu.js进度指示器progress/circular-progress.js、progress/linear-progress.js单选 / 涟漪 / 选择器 / 滑块 / 开关radio/radio.js、ripple/ripple.js、select/filled-select.js、select/outlined-select.js、select/select-option.js、slider/slider.js、switch/switch.js标签页 / 文本字段tabs/primary-tab.js、tabs/secondary-tab.js、tabs/tabs.js、textfield/filled-text-field.js、textfield/outlined-text-field.js每个入口文件的作用可以从源码得到印证以 button/filled-button.ts 为例它通过customElement(md-filled-button)把类注册为自定义元素同时把内部共享样式、阴影样式、填充样式组装进组件的styles并向全局的HTMLElementTagNameMap声明md-filled-button标签名为 TypeScript 提供类型提示。使用在 HTML 标记中书写组件导入组件定义后即可像使用原生 HTML 标签一样使用component-name。把上一步的index.js作为 module 引入然后在标记中组合组件script typemodule src./index.js/script label Material 3 md-checkbox checked/md-checkbox /label md-outlined-buttonBack/md-outlined-button md-filled-buttonNext/md-filled-button组件通过标准属性、事件与 DOM API 交互例如md-checkbox的checked属性、md-outlined-text-field的label与value属性、md-radio通过name属性成组等。各组件的完整属性、方法、事件与主题定制说明请参阅仓库中的组件文档目录如 button.md、checkbox.md、text-field.md 等那里包含更详细的分组件使用指南。构建为生产环境解析裸模块并打包material/web的源码使用裸模块说明符如material/web/button/filled-button.js相互引用。这类说明符目前只能被 import map 等机制在运行时解析因此在 import map 尚未被所有目标环境广泛采用之前生产构建必须借助工具把这些说明符解析、合并成普通文件。官方推荐的快速起步方案是Rollup配合rollup/plugin-node-resolve插件解析裸模块说明符更深度的现代构建方案可参考 lit.dev 提供的 production build 指南。首先安装 Rollup 与解析插件npm install rollup rollup/plugin-node-resolve然后从入口文件index.js生成 bundlenpx rollup -p rollup/plugin-node-resolve index.js -o bundle.js-p rollup/plugin-node-resolve让 Rollup 在打包时把material/web/...等裸导入解析为实际的模块文件并合并-o bundle.js指定输出文件。产物bundle.js不再依赖 import map可直接用普通script标签引用script src./bundle.js/script关于入口文件index.js的编写沿用上文导入一节的做法——只导入项目实际用到的组件即可Rollup 的 tree-shaking 会进一步把未使用的导出剔除这正是原型阶段使用all.js、生产阶段按需导入的核心原因。小结整个快速上手的闭环可以归纳为三句话原型阶段用 import map CDNall.js typography 样式注入零构建验证开发阶段用npm install material/web安装、按material/web/component/variant.js约定按需导入组件生产阶段用 Rollup rollup/plugin-node-resolve将裸模块说明符合并成bundle.js再用普通script标签引入。组件的具体 API 与主题能力随时可以回到仓库的组件文档目录按需查阅。赞分享UI组件前端设计系统【免费下载链接】material-webMaterial Design Web Components项目地址https://gitcode.com/gh_mirrors/ma/material-web点击查看免费下载相关推荐Django快速上手实战指南从零构建完整Web应用Django快速上手实战指南从零构建完整Web应用 概念解析Django如何让Web开发变得简单 什么是Django的核心架构 就像搭建一栋房子需要地基Compose与UIKit无缝对接multiplatform-paging跨平台UI实现指南Compose与UIKit无缝对接multiplatform paging跨平台UI实现指南 multiplatform paging是一个专为Kotlin多Material Web Components终极指南从CDN到生产环境的完整部署教程Material Web Components终极指南从CDN到生产环境的完整部署教程 Material Web ComponentsMWC是GoogleUI组件前端设计系统上一篇告别单标签局限pytorch-image-models多标签分类评估实战指南下一篇Drawnix高级排版功能提升白板内容的可读性与专业性创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考