Angular Material 的设计之美

 

Ng-Matero 0.3 已发布,新增 module schematic 以及 page schematic,详见 README

前言

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的实现

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

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

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

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

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

  4. Angular Material design设计

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

  5. ASP.NET Core 2.1 Web API + Identity Server 4 + Angular 6 + Angular Material 实战小项目视频

    视频简介 ASP.NET Core Web API + Angular 6的教学视频 我是后端开发人员, 前端的Angular部分讲的比较差一些, 可以直接看代码!!!! 这是一个小项目的实战视频, ...

  6. (Angular Material)用Autocomplete打造带层级分类的DropDown

    效果如下图 代码实现 1.导入模块 import {MatAutocompleteModule} from '@angular/material/autocomplete'; @NgModule({  ...

  7. Angular 2 to Angular 4 with Angular Material UI Components

    Download Source - 955.2 KB Content Part 1: Angular2 Setup in Visual Studio 2017, Basic CRUD applicat ...

  8. [转]VS Code 扩展 Angular 6 Snippets - TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout

    本文转自:https://marketplace.visualstudio.com/items?itemName=Mikael.Angular-BeastCode VSCode Angular Typ ...

  9. Angular Material 按钮图标系列

    工做中经常用到Angular Material 中的好多按钮素材,奈何官网经常上不去,所以只能自己把这些常用的按钮扒下来了,留给自己同时也留给大家方便查看. Angular material mat- ...

  10. Angular Material Starter App

      介绍 Material Design反映了Google基于Android 5.0 Lollipop操作系统的原生应用UI开发理念,而AngularJS还发起了一个Angular Material ...

随机推荐

  1. 轻量级ORM《sqlcommon》第一个版本发布了!!!

    一.sqlcommon的特色 1. 轻量级,整个包只有123kb. 2. 性能好,自测... 3. API和功能简单.代码简短.可维护性好基本都能看懂.这个点我认为很重要,你不用为了实现一个需求而四处 ...

  2. 【知识点】SPU&SKU

    SPU:标准化产品单元 SPU = Standard Product Unit (标准化产品单元),SPU是商品信息聚合的最小单位,是一组可复用.易检索的标准化信息的集合,该集合描述了一个产品的特性. ...

  3. Android开发之EditText多行文本输入

    <EditText android:id="@+id/add_content" android:layout_width="fill_parent" an ...

  4. 【数据库】数据库入门(四): SQL查询 - SELETE的进阶使用

    集合操作常用的集合操作主要有三种:UNION(联合集).INTERSECT(交叉集).EXCEPT(求差集).以上三种集合的操作都是直接作用在两个或者多个 SQL 查询语句之间,将所有的元组按照特定的 ...

  5. youtube-dll工具使用,很好用!!

    最近喜欢上youtube-dll这个插件,下载东西真的很好用,墙裂推荐,github地址如下 https://github.com/ytdl-org/youtube-dl 安装 1.Linux 1.1 ...

  6. MySQL数据物理备份之lvm快照

    使用lvm快照实现物理备份 优点: 几乎是热备(创建快照前把表上锁,创建完后立即释放) 支持所有存储引擎 备份速度快 无需使用昂贵的商业软件(它是操作系统级别的) 缺点: 可能需要跨部门协调(使用操作 ...

  7. linuxIP地址配置字段说明

    虚拟机网络适配器改成桥接 vi /etc/sysconfig/network-scripts/ifcfg-eth0 DEVICE=eth0 设备名称 BOOTPROTO=dhcp /static 自动 ...

  8. CentOS6.7编译安装mysql5.5(详解编译选项)

    注意!  mysql5.5之前一般都是用make编译 mysql5.5 -5.6 一般都是用cmake编译 cmake : 跨平台编译器, mysql官方提供的rpm包 mysql-client :提 ...

  9. 让Linux中的Nginx支持中文文件名

    原文:https://blog.csdn.net/soeben/article/details/79525964 首先你的服务器需要安装了UTF-8字符集在命令行里输入env|grep LANG如果显 ...

  10. oarcle wm_concat 值过长解决--使用 clob

    sql 语句替换 :select XMLAGG(XMLELEMENT(a, WSODETAILPALINCD || ',')).EXTRACT('//text()').getclobval() as ...