ARTICLE DETAIL

资讯详情

深耕网站建设、视觉设计与SEO优化的一线实战洞察。

Angular 官方组件库 angular/components:从 Material 组件到 CDK 与 ARIA 无头指令的完整指南

Angular 官方组件库 angular/components:从 Material 组件到 CDK 与 ARIA 无头指令的完整指南 Angular 官方组件库 angular/components从 Material 组件到 CDK 与 ARIA 无头指令的完整指南【免费下载链接】componentsComponent infrastructure and Material Design components for Angular项目地址: https://gitcode.com/GitHub_Trending/co/components本指南以当前仓库根目录的 README.md 为核心骨架系统梳理 Angular 团队官方维护的组件生态angular/materialMaterial Design 组件、angular/cdk组件开发套件、angular/aria无头可访问指令以及基于第三方 API 的angular/google-maps与angular/youtube-player。读完本文你将掌握五个官方包的定位与分工、从零接入 Angular Material 的标准流程、团队对高质量组件的定义、支持政策与浏览器/屏幕阅读器兼容矩阵并学会如何在当前仓库的 src 目录中定位源码、示例与文档进行深入验证。一、项目定位Angular 团队官方维护的组件基础设施仓库根目录的 README.md 开篇即明确Angular 团队既构建和维护通用 UI 组件也提供帮助你构建自有自定义组件的工具。这意味着该仓库承载两个层面的职责开箱即用的组件库开发者可以直接把官方组件丢进现有应用自定义组件的工具箱通过 CDK 等基础设施让开发者用通用的交互模式构建自己的组件。整个仓库以 monorepo 形式管理发布为以下五个官方 npm 包README 中的包清单表格包名定位仓库源码位置angular/aria实现常见 WAI-ARIA 模式的无头headless、可访问指令集合src/ariaangular/cdk帮助开发者以通用交互模式编写自定义 UI 组件的库src/cdkangular/material面向 Angular 应用的 Material Design UI 组件src/materialangular/google-maps构建在 Google Maps JavaScript API 之上的 Angular 组件src/google-mapsangular/youtube-player构建在 YouTube Player API 之上的 Angular 组件src/youtube-player从根目录 package.json 可见当前仓库版本为22.2.0-next.5next 预发布序列包管理器强制使用 pnpmpackageManager: pnpm11.25.0并明确提示请使用 pnpm 而非 npm/yarn。二、angular/materialMaterial Design 组件库angular/material是仓库中最核心的面向业务开发的包。查看 src/material 目录可以看到其覆盖的完整组件谱系按功能大致可分为表单控件autocomplete、checkbox、datepicker、form-field、input、radio、select、slide-toggle、slider、timepicker导航与布局sidenav、tabs、toolbar、card、grid-list、expansion、stepper按钮与操作button、button-toggle、chips、icon、badge弹层与提示dialog、bottom-sheet、menu、snack-bar、tooltip数据展示list、table、sort、paginator、tree、progress-bar、progress-spinner、divider每个组件模块目录内均遵循源码 测试 样式 文档的完整结构例如 src/material/slide-toggle 下包含组件实现*.ts、模板*.html、样式*.scss、规格测试与构建配置*.bazel可作为开发者学习组件封装的范本。主题系统从 src/material/package.json 的exports字段可以看到主题能力的入口设计angular/material根入口暴露 Sass 入口_index.scssangular/material/theming暴露完整的主题定制 Sass 文件_theming.scss内置 8 套预构建主题 CSSindigo-pink、deeppurple-amber、pink-bluegrey、purple-green、azure-blue、rose-red、cyan-orange、magenta-violet目录见 src/material/prebuilt-themes。主题与自定义主题的详细用法可参考 theming 指南 与 theming-your-components 指南。包配置要点src/material/package.json 展示了发布包的工程化细节peerDependencies要求angular/core、angular/common、angular/forms、angular/platform-browser、rxjs^6.5.3 || ^7.4.0以及同为官方维护的angular/cdkschematics指向./schematics/collection.jsonng-update携带迁移脚本./schematics/migration.json意味着升级时可以通过 Angular CLI 自动执行代码迁移sideEffects: false声明包无副作用便于打包器做 Tree-shaking。三、angular/cdkComponent Dev Kit组件开发套件angular/cdk是 README 中描述为帮助开发者以通用交互模式编写自定义 UI 组件的基础设施库它不绑定 Material 视觉风格是构建任何风格组件的地基。查看 src/cdk 目录CDK 提供的能力包括能力域说明源码目录无障碍焦点监视、焦点陷阱、LiveAnnouncer、高对比度模式、交互性检查等src/cdk/a11y布局与响应式BreakpointObserver 等响应式工具src/cdk/layout浮层系统Overlay 弹层基础设施Dialog、Menu、Tooltip 的底层依赖src/cdk/overlay拖拽完整的拖放系统src/cdk/drag-drop虚拟滚动大规模列表渲染优化src/cdk/scrolling表格无样式 Table 基础设施src/cdk/table其他bidi、clipboard、collections、keycodes、observers、platform、portal、stepper、tree、testing 等src/cdk在 src/cdk/package.json 中还能看到 CDK 单独提供三份预构建样式a11y-prebuilt.css无障碍工具样式、overlay-prebuilt.css浮层样式、text-field-prebuilt.css文本域样式以及独立的 schematics 入口./schematics/index.js。使用 CDK 自定义组件的实战范式可参考 creating-a-custom-form-field-control 指南 与 creating-a-custom-stepper-using-the-cdk-stepper 指南。四、angular/aria实现 WAI-ARIA 模式的无头指令angular/aria是五个包中较新、定位最独特的一个它提供的是无头headless且可访问的指令实现常见 WAI-ARIA 交互模式。所谓无头指这些指令不附带任何视觉样式与 DOM 结构只负责行为、状态与键盘交互视觉层完全由使用方自行构建。查看 src/aria 目录目前覆盖的模式包括accordion手风琴combobox组合框grid网格listbox列表框menu菜单含menu-bar、menu-item、menu-trigger等见 src/aria/menutabs标签页toolbar工具栏tree树以 src/aria/menu 为例模块拆分为menu.ts菜单主体、menu-item.ts菜单项、menu-trigger.ts触发器、menu-bar.ts菜单栏、menu-tokens.ts设计令牌与配套的 menu.spec.ts 单元测试体现了行为与样式彻底解耦的设计理念——这套无头指令可以作为任何设计体系包括非 Material 风格的无障碍交互基座。五、angular/google-maps 与 angular/youtube-player第三方 API 的 Angular 封装这两个包是 Angular 团队对成熟第三方 JavaScript API 的官方封装Google Mapssrc/google-maps 围绕 Maps JavaScript API 提供了google-map容器以及map-marker、map-info-window、map-polygon、map-polyline、map-circle、map-rectangle、map-heatmap-layer、map-traffic-layer等一整套地图要素组件并包含对 marker-clusterer、高级标记advanced-marker等能力的支持其子包说明见 src/google-maps/README.md。YouTube Playersrc/youtube-player 封装 YouTube Player API核心实现为 youtube-player.ts同时提供 youtube-player-placeholder.ts 占位组件与对应的单元测试 youtube-player.spec.ts包说明见 src/youtube-player/README.md。这类封装把加载第三方脚本、管理 API 生命周期、将命令式 API 转为声明式 Angular 组件的重复工作收敛到组件内部开发者只需在模板中声明标签即可。六、快速开始用 ng add 接入 Angular Material仓库中的 Getting Started 指南 是官方推荐的接入路径前提是已安装 Angular CLI。核心操作只有一条命令ng add angular/material该命令会自动完成三件事安装依赖同时安装 Angular Material 与 Component Dev KitCDK到package.json交互式询问两个问题选择一个预构建主题名称或选择custom以便后续搭建可扩展的自定义主题是否应用全局的 Material 排版typography样式自动修改工程向index.html添加 Roboto 字体与 Material Design 图标字体添加少量全局 CSS清除body的 margin、让html与body高度为 100%、将 Roboto 设为默认字体。验证渲染第一个组件以 slide toggle 为例在组件的imports中引入MatSlideToggleimport {MatSlideToggle} from angular/material/slide-toggle; Component({ imports: [MatSlideToggle], }) class App {}在模板中放置标签mat-slide-toggleToggle me!/mat-slide-toggle启动本地开发服务器ng serve浏览器访问http://localhost:4200即可看到渲染出的 Material 开关组件。这一示例对应的真实源码与测试可在 src/material/slide-toggle 中找到。除安装 schematic 外Angular Material 还附带多套生成式 schematics如 nav、table、address-form 等可用一条命令快速生成预构建组件骨架详见 schematics 指南基于 Material 的组件测试可借助 using-component-harnesses 指南 中的 Harness 体系。七、团队使命与高质量组件标准README 中说明Angular Components 团队隶属于 Google 的 Angular 团队成员既有 Google 员工也有全球社区贡献者。团队的两大核心目标是构建开发者可以直接嵌入现有应用的高质量 UI 组件提供工具帮助开发者构建自己的自定义组件复用常见交互模式。README 还明确给出了高质量组件的可操作定义这是评估任何组件实现的硬性标准国际化且可访问保证所有用户都能使用API 直白清晰不迷惑开发者在广泛的使用场景下行为符合预期且无 bug行为经过单元测试与集成测试双重覆盖在 Material Design 规范范围内可定制性能成本最小化代码干净且有良好文档可成为 Angular 开发者的范例。仓库为此配备了严格的工程保障统一的代码规范见 CODING_STANDARDS.mdAPI 形态通过 goldens 目录下的 golden 文件如 material/index.api.md做契约级校验测试运行入口为 scripts/run-component-tests.mtsE2E 测试位于 docs/e2e 与 docs/scenes/e2e。八、支持政策与版本节奏README 明确Angular Material 与 CDK 遵循与 Angular 框架相同的支持与发布政策。升级路径、受支持版本与更新实践均以 Angular 官方发布节奏为准。仓库侧的配套措施包括每个包携带ng-update迁移配置见 src/material/package.jsonng update时可自动执行破坏性变更迁移scripts/breaking-changes.mts 与 scripts/approve-api-golden.mts 用于管理破坏性变更与 API golden 审批版本对照与历史变更可查阅根目录 CHANGELOG.md 与 CHANGELOG_ARCHIVE.md。九、浏览器与屏幕阅读器支持矩阵README 给出的官方支持范围如下浏览器支持所有主流浏览器最近的两个大版本——Chrome含 Android、Firefox、Safari含 iOS、Edge屏幕阅读器团队针对以下组合提供良好的用户体验——平台支持的读屏软件与浏览器组合WindowsNVDA、JAWS搭配 Firefox / ChromemacOSVoiceOver搭配 Safari / ChromeiOSVoiceOver搭配 SafariAndroidAndroid Accessibility Suite原 TalkBack搭配 ChromeChrome OSChromeVox搭配 Chrome此外FAQ.md 中补充了一个重要说明项目不正式支持 Shadow DOM但会以最大努力保持组件在使用了 Shadow DOM 的应用中正常工作且该立场可能随浏览器生态演进而调整。对于团队只做 UI 组件、不做应用布局方案的设计取舍FAQ 也明确建议布局需求使用原生 CSS Flexbox 与 CSS Grid 等前端生态现有方案解决。十、仓库结构导览在哪里找什么在当前仓库根目录下各核心资产的组织方式如下组件源码src 下的material、cdk、aria、google-maps、youtube-player、cdk-experimental、material-experimental及三个日期适配器包material-moment-adapter、material-luxon-adapter、material-date-fns-adapter组件示例src/components-examples 汇聚各组件带.html/.css的独立示例可对照学习 API 用法开发调试应用src/dev-app 是本地交互调试应用根目录package.json中pnpm dev-app通过ibazel run //src/dev-app:devserver启动官方文档站点docs 目录承载文档应用与 E2E 场景docs/scenes构建脚本见 scripts指南文档guides 收录了 getting-started、theming、schematics、双向文本bidirectionality.md、Material 2 兼容material-2.md、HammerJS 迁移v9-hammerjs-migration.md等专题集成与构建integration 下存放 linker、模块测试、ng-add、vitest、yarn-pnp 等集成验证工程根目录构建与测试脚本汇总于 package.json。十一、参与贡献与问题协作README 的贡献指引要点有意贡献者需遵循仓库的贡献指南新贡献者可以从help wanted与good first issue两个标签下筛选合适的议题入手。关于协作流程FAQ.md 还透露了几个工程事实每个 Pull Request 都会在 Google 内部测试套件上运行 presubmit 校验覆盖 Google 内部所有使用 CDK 与 Material 的项目因此 PR 合入节奏取决于内部测试是否通过——这也是部分 PR 看起来停滞的常见原因由于项目使用单一代码仓库monorepo管理任何会破坏既有项目的 PR 都不会被合并。需要说明的是官方团队建议一般性的使用疑问优先通过社区渠道解决仓库本身聚焦于组件开发若你在现有应用中集成组件时遇到问题可结合 FAQ.md 与本文引用的各指南再到对应组件的 src 源码与 src/components-examples 示例中寻找答案。【免费下载链接】componentsComponent infrastructure and Material Design components for Angular项目地址: https://gitcode.com/GitHub_Trending/co/components创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表