本月我们推出了一个新的博客系列“Angular 中的现代 CSS”,其中我们将了解为 Angular 开发人员推荐的现代 CSS 增强功能。
本周,我们将讨论布局。
自 Angular 早期以来,布局已经取得了显着的进步。基于原生布局解决方案的进步和取消对 IE11 的支持,Angular 团队将从 v15 开始停止发布实验性@angular/flex-layout
库的新版本。
@angular/flex-layout
是一个混合 JavaScript 和 CSS 布局系统,自 v5 以来一直在 Angular 组织中处于测试阶段。在此期间,CSS 发生了巨大的发展,提供了构建高性能和可扩展布局的新方法。在这篇博文中,您将详细了解 Angular 中推荐的布局方法。
最值得推荐的两种现代 CSS 布局解决方案是 CSS Flexbox 和 CSS Grid。
CSS Flexbox
Flexbox是一种一维布局方法,允许您按行或列排列项目。项目可以弯曲(展开)以填充额外的空间或收缩以适应较小的空间。
您可以在此处查看 Angular 演示中的 Flexbox :
我们推荐CSS Tricks: A Complete Guide to Flexbox来开始学习 Flexbox。
一般来说,Flexbox 是应用程序中的组件和小规模布局的不错选择。 CSS 网格布局适用于更大规模的布局。详细了解Flexbox 和 CSS Grid 的权衡。
CSS Grid
CSS Grid 是一个用于 Web 的二维布局系统。它允许您按行和列排列内容。它具有许多功能可以帮助开发人员更轻松地构建复杂的布局。
我们推荐CSS Tricks: A Complete Guide to Grid来开始学习网格。
Angular 的核心原则是关注点分离。通过弃用 flex-layout 并转而使用 CSS,我们继续引导用户使用更具可读性和可维护性的代码。此外, @angular/cdk
的布局包提供了轻量级实用程序来构建响应式 UI 。与@angular/flex-layout
相比,这些选项可以减少负载大小和运行时成本,并提高站点的Lighthouse 性能指标。
从今天开始,我们将遵循Angular 的弃用实践。由于@angular/flex-layout
是 beta 包,Angular v15 将发布@angular/flex-layout
的最后一个版本。
虽然@angular/flex-layout
从未退出测试版,但它已获得采用,每周下载量超过 30 万次。为了支持依赖该软件包的应用程序,我们将继续发布安全和浏览器不兼容性修复程序至少一年,作为该软件包长期支持 (LTS) 的一部分。
选择现代布局系统基于您的应用程序的结构。在 Chrome 的学习 CSS 课程中了解有关现代布局的更多信息。
我们感谢 Angular 社区贡献者和angular/flex-layout
合著者Adam Plumer ,他多年来一直支持angular/flex-layout
的发布。请阅读Adam 的《告别 Flex 布局》了解更多内容。
Adam 自愿为最流行的用例编写迁移指南 – 我们很想听听您希望在此 GitHub 问题中获得有关哪些angular/flex-layout
迁移的更多指导。
虽然由于库的复杂性和动态用例,我们无法通过自动迁移直接映射到新的布局系统,但我们可以推荐四种布局工具。以下是高级概述:
CSS Flexbox
Flexbox 与@angular/flex-layout
最相似,因为@angular/flex-layout
旨在为开发人员提供一种符合人体工程学的方式,在 Angular 模板中应用 Flexbox 布局。以下代码示例是常见 Flexbox 属性和@angular/flex-layout
中的关联属性的映射。
display: flex;
flex-direction: row // fxLayout
flex-wrap: wrap //fxLayout
box-sizing: border-box;
align-content: stretch, // fxLayoutAlign
align-items: stretch, // fxLayoutAlign
justify-content: flex-start, // fxLayoutAlign
CSS Grid
许多 CSS 调查都强调了 CSS 网格作为二维布局的未来的潜力。由于现代 CSS 网格比 Flex 布局的设计更新,因此从 Flex 布局迁移到 CSS 网格是一个更加手动的过程,以便利用相关属性。
@angular/cdk的布局包
如果您需要在 TypeScript 代码中使用特定于布局的实用程序来处理视口大小,Angular 还提供了 @angular/cdk 的布局包。
这@angular/cdk
的布局包主要适用于需要在代码中构建响应式 UI 交互的用例,而不是通常创建应用程序布局。例如,对于大视口,您希望将弹出窗口显示为附加到触发元素的下拉菜单,但在小视口上,您希望将弹出窗口显示为居中对话框。
TailwindCSS
Tailwind CSS 提供了一种面向模板的样式方法,类似于@angular/flex-layout
。
Tailwind CSS 是一个实用程序优先的 CSS 框架,包含flex
、 pt-4
、 text-center
和rotate-90
等类,可以直接在标记中组合这些类来构建任何设计。阅读有关 Angular + Tailwind CSS 的更多信息。
我们建议您在规划迁移时探索所有四种现代选项。
我们想花点时间感谢多年来为该项目做出贡献的所有人。
我们很高兴看到 CSS 多年来的发展以及它提供的现代布局替代方案。
推荐原生解决方案作为最佳实践,可以让开发人员保持高性能,同时让 Angular 团队能够专注于高影响力的项目,进一步推动 Angular 走向未来。
直到下一次,去构建现代 CSS(接下来加入我们看看可见性)!
接下来您想学习 Angular 中的哪些 CSS?
原文链接:https://blog.angular.dev/modern-css-in-angular-layouts-4a259dca9127