前言

Angular Material 作为 Angular 的官方组件库,无论是设计交互还是易用性都有着极高的质量。正如官方所说其目的就是构建基于 Angular 和 Typescript 的高质量组件库。

官方列举了如下几点来解释“高质量”的含义。

  • 国际化和可访问性,以便所有用户都可以使用。
  • 不会让开发人员感到困惑的简单 API。
  • 在各种各样没有 bug 的用例中按预期行事。
  • 通过单元测试和集成测试更好地测试行为。
  • 可在 Material Design 规范的范围内进行定制。
  • 将性能开销降至最低。
  • 代码简洁,文档友好,可以作为 Angular 开发人员的一个例子。

Material Design 作为一个非常流行的设计语言,它有多个版本的实现。React 版的 Material Design 有着很高的人气,大家可以自行对比,我就不赘述了,以免引起无谓的争吵,进而扯到框架层面。我可以说一下自己的感受,Angular Material 的交互更加流畅,细节做的更好。

Angular Material 组件库虽然很优秀,但是却被带上了只适合做 C 端界面的帽子。这也是我刚开始不敢选择 Angular Material 的一个原因。但是编写 ng-matero 的过程中,随着对 Angular Material 的深入了解,我发现这种说法稍显狭隘甚至产生了一定的误导,所以我希望这篇文章可以让大家对 Angular Material 有一个更加正确的认识。接下来我会从相对宏观的角度介绍 Angular Material 设计的一些亮点,并且简单介绍 Angular Material 的一些使用技巧。

题外话:为什么 ng-matero 会选择 Angular Material?

抛开官方提到的亮点不谈。首先我是那种比较激进的开发者,对于先进的设计理念,我都有跃跃欲试的执念。国内的 Element UI 以及 Ant Design 都是 Bootstrap 3 时代的风格。随着业务人员对界面细致紧凑的要求越来越高,我发现 Material 的设计风格更加符合需求,层次感更强。不过最主要的还是 Material Design 的交互吸引了我。另外,Angular Material 的样式是基于 Sass 编写,而我最喜欢的也是 Sass,所以基于 Angular Material 编写 ng-matero 就是命运的归宿。顺便插一句,如果大家纠结用 Sass 还是 Less,可以看一下这篇文章 CSS 预处理器中的循环,个人不建议用 Less,请原谅我无意引战

Angular Material 的设计之美的更多相关文章

  1. Angular Material design设计

    官网: https://material.io/design/ https://meterial.io/components 优秀的Meterial design站点: http://material ...

  2. Angular Material

    Angular Material 的设计之美   Ng-Matero 0.3 已发布,新增 module schematic 以及 page schematic,详见 README 前言 Angula ...

  3. 基于 Angular Material 的 Data Grid 设计实现

    自 Extensions 组件库发布以来,Data Grid 成为了使用及咨询最多的组件.最开始 Data Grid 的设计非常简陋,经过一番重构,组件质量有了质的提升. Extensions 组件库 ...

  4. 手势模型和Angular Material的实现

    iPhone的出现让手势操作大为流行,也使得手势编程成为开发人员的挑战. 拟物设计也把手势编程纳入在内,大概也想制定一个在交互模型标准.现阶段因为MD还在预发布阶段,因此还只实现了单点手势(一个指头) ...

  5. Angular Material & Hello World

    前言 Angular Material(下称Material)的组件样式至少是可以满足一般的个人开发需求(我真是毫无设计天赋),也是Angular官方推荐的组件.我们通过用这个UI库来快速实现自己的i ...

  6. Ng-Matero:基于 Angular Material 搭建的中后台管理框架

    前言 目前市面上关于 Angular Material 的后台框架比较少,大多都是收费主题,而且都不太好用. 很多人都说 Material 是一个面向 C 端的框架,其实在使用其它框架做管理系统的时候 ...

  7. 仿知乎app登录界面(Material Design设计框架拿来就用的TexnInputLayout)

    在我脑子里还没有Material Design这种概念,就我个人而言,PC端应用扁平化设计必须成为首选,手当其冲的两款即时通讯旺旺和QQ早就完成UI扁平化的更新,然而客户端扁平化的设计本身就存在天生的 ...

  8. Material使用11 核心模块和共享模块、 如何使用@angular/material

    1 创建项目 1.1 版本说明 1.2 创建模块 1.2.1 核心模块 该模块只加载一次,主要存放一些核心的组件及服务 ng g m core 1.2.1.1 创建一些核心组件 页眉组件:header ...

  9. Angular Material 白天模式和黑夜模式

    Material design调色板 https://www.materialpalette.com/ 明暗:虽然颜色不变,但是针对白天黑夜有做不同处理. 叠加:对话框,弹出菜单,事先是没有加载的.是 ...

随机推荐

  1. GGPLOT2-plotly |让你的火山图“活”过来

    火山图(Volcano Plot)常用于展示基因表达差异的分布,横坐标常为Fold change(倍数),越偏离中心差异倍数越大;纵坐标为P值(P值),值越大差异越显着.原因得名也许的英文因为查询查询 ...

  2. 最新try2hack全详解

    第一题http://www.try2hack.nl/levels/: 方法:直接右键看网页源码 第二题http://www.try2hack.nl/levels/level2-xfdgnh.xhtml ...

  3. 【iOS】手动抛出异常

    之前没遇到过需要手动抛出异常的时候,这次见到了,记录一下.示例代码如下: /** 如果调用 [[BNRItemStore alloc] init],就提示应该使用 [BNRItemStore shar ...

  4. 100天搞定机器学习|Day13-14 SVM的实现

    昨天我们学习了支持向量机基本概念,重申数学推导原理的重要性并向大家介绍了一篇非常不错的文章.今天,我们使用Scikit-Learn中的SVC分类器实现SVM.我们将在day16使用kernel-tri ...

  5. Kafka服务不可用(宕机)问题踩坑记

    背景 某线上日志收集服务报警,打开域名报502错误码. 收集服务由2台netty HA服务器组成,netty服务器将客户端投递来的protobuf日志解析并发送到kafka,打开其中一个应用的日志,发 ...

  6. oracle常用的一些sql命令

    //查看系统当前时间   HH24 24小时制  MI是正确的分钟 select to_char(sysdate,'yyyy-mm-dd HH24:MI:SS') from dual //HH非24 ...

  7. git项目版本处理--远程分支重新拉取本地代码如何处理

    最近在eclipse 上用git拉取分支,提交代码因为提交代码提交了一些配置文件造成 后续同事提交代码一直出现代码冲突问题 项目老大又重新拉取了一条代码 同样的分支名字 当时有点蒙不知道接着怎么弄:场 ...

  8. php sql 类似 mybatis 传参

    PHP sql 处理上,没有类似于 java mybatis 的工具,导致进行一些sql 处理时,会有诸多不便, 楼主抽时间写了一个 php 类似 mybatis 的sql 工具,省去了拼装sql 的 ...

  9. 佳木斯集训Day3

    D3是我的巅峰 D3的出题人毒瘤!!!T3放了一道莫队,我们全体爆炸,到现在只有一个奆老A掉了T3 据说lkh被晓姐姐D了 T1是个26进制数,当时在考场上想了好久才想到(太次了)注意需要处理一下溢出 ...

  10. JS和C#.NET获取客户端IP

    我们经常在项目中会遇到这种需要获取客户端真实IP的需求,其实在网上也能随便就能查到各种获取的方法,我也是在网上查了加上了自己的实践,说一下自己在实践后的感受,基本上网上大部分都是用JS的方法来获取客户 ...