根据 flex-layout 官方宣告, @angular/flex-layout 当前处于 deprecated 状态. 替代方案为 Tailwindcss 或者 Angular CDK.
具体原因参考官方的 anoucement - Medium post
和 github 上的讨论
建议新项目使用其他 css library, 旧项目考虑移植到其他 css library.
迁移工具:
migrate-angular-flex-to-tailwind
[flex-layout-migrator](https ://github.com/NIPE-Solutions/flex-layout-migrator)
目前 DuncanFaulkner 克隆了@angular/flex-layout 并提供社区支持, 目前以及能支持 Angular 16 了.
所以使用社区版本的 flex-layout 也是一直选择, 如果重度依赖 flex-layout
新家现在位于
要在 Angular CLI 项目中使用@angular/flex-layout 相当简单,只需要两个步骤:
安装组件指令
1 | npm install @angular/flex-layout --save |
将 Angular Flex Layout 导入到 app.module 中
1 | // src/app/app.module.ts |
实际上如果想在自己的 web 项目中使用 material design 这套设计理念, 有多种选择, 一个是使用 bootstrap + mdbootstrap 这套架构和组件, 或者使用 bootstrap+materialize-css 这套解决方案. 其核心思想就是使用 bootstrap 去处理响应式 web ux 的问题以及跨浏览器, 跨各种大小屏幕兼容性问题, 而使用 mdbootstrap 或 materialize 去实现一套 material design 风格的组件库. 实际上这是一套很好的思路, 各方案专注自己的擅长的领域, 保持小而美的设计. 但是现实问题是 mdbootstrap 并不是免费的, 其 prime 版本是收费的, 而且对初创公司来说其收费还不便宜. materialize-css 是开源免费的, 但是截至 2022-05-29, 该项目已经 6 年没有更新了, 最近的一个版本是 6 年前发布的一个 1.0.0 版本.
网络存储技术大概可以分为3种:
DAS:直连式存储(Direct Attached Storage),直接与主机相连的存储设备。它依赖于服务器,本身是硬件的堆叠,不带有任何存储操作系统。现在常见的DAS设备:硬盘座带上 N个硬盘。
NAS:网络连接式存储(Network Attached Storage),存储设备直连网络,NAS设备和DAS设备不同在于,NAS设备一般带有存储操作系统。
SAN:存储网络(Storage Area Network),可以说是一种网络基础设施。SAN和NAS的区别主要在于:SAN针对海量、面向数据块的数据传输,而NAS则提供文件级的数据访问功能。
构建软件和运行项目的方法有很多种。当我们开始在 GitLab 中构建产品组合和项目管理工具时,我们问自己,“您如何构建工具来支持各种工作流程,而不会因为工具本身的复杂性而陷入瘫痪?我们的结论是什么?构建更少但更灵活的工具。GitLab 的内置issue board是一个很好的例子,说明选择构建单个多功能工具可以显著降低工具维护的复杂性,同时不会限制其功能。
管理项目和软件本质上是复杂的,但项目管理工具本身不一定如此复杂。无论您管理多少个项目、人员或产品,获得保持平稳运行所需的可见性应该是一件容易的事。
GitLab issue board是一个使用简化方法解决复杂问题的很好的例子。我们建立在 GitLab 现有的问题跟踪功能之上,并利用 GitLab 问题标签的强大功能,将它们用作看板上的列表。您可以构建不同的问题板视图,同时保持您在问题跟踪器中看到的相同过滤和排序功能。您可以创建多个板来捕获所需可见性,并按里程碑、标签、责任人和权重定义板的范围。
issue board基于其项目的标签结构,因此,它应用相同的描述性标签来定位在板上的位置,从而在整个开发生命周期中保持一致性。而且,您可以直接从开发板中单击某个问题以开始您的工作。
issue board显示您的团队正在处理哪些问题,分配给每个问题的人员以及这些问题在工作流中的哪个位置
Material设计颜色系统可以帮助您创建反映您的品牌或风格的颜色主题。
Material设计颜色系统可帮助您以有意义的方式将颜色应用于 UI。在此系统中,您可以选择主要颜色和次要颜色来代表您的品牌。然后,每种颜色的深色和浅色变体可以以不同的方式应用于 UI。
Material Design 基础 - Elevation(标高)
Elevation(标高)是沿 z 轴的两个Surface之间的相对距离。
Material Design中的标高为Material surfaces之间的距离。从一个Material surface的前部到另一个Material surface前面的距离沿 z 轴以与dps(density-independent pixels)为单位进行测量,并使用阴影进行描绘(默认情况下).
Material 是 Google 创建的一个设计系统,旨在帮助团队为 Android、iOS、Flutter 和 Web 构建高质量的数字体验。
Material design 的灵感来自物理世界及其纹理,包括它们如何反射光线和投射阴影。Material surfaces 重新构想了纸张和墨水的介质。
Bold, graphic, intentional
材质设计由印刷设计方法(排版、网格、空间、比例、颜色和图像)指导,以创建让观看者沉浸在体验中的层次结构、意义和焦点。
Motion provides meaning
Motion 通过微妙的反馈和连贯的过渡来集中注意力并保持连续性。当元素出现在屏幕上时,它们会通过交互来转换和重新组织环境,从而生成新的转换。
material设计布局使用统一的元素和间距,以鼓励在多种平台、环境和屏幕尺寸之间的一致性。
Predictable(可预测的) 使用直观且可预测的布局,并具有一致的UI区域和空间组织。
Consistent(一致的) 布局应始终使用网格、关键线和填充。
Responsive(响应的) 布局是自适应的。它们对用户、设备和屏幕元素的输入做出反应。
material surface阻挡光源时会投射阴影。
在material设计环境中,虚拟灯光照亮UI。关键灯光创建更清晰的方向性阴影,称为关键光阴影。环境光从各个角度出现,以创建漫射的柔和阴影,称为环境光阴影。