Angular Material
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的更多相关文章
- 手势模型和Angular Material的实现
iPhone的出现让手势操作大为流行,也使得手势编程成为开发人员的挑战. 拟物设计也把手势编程纳入在内,大概也想制定一个在交互模型标准.现阶段因为MD还在预发布阶段,因此还只实现了单点手势(一个指头) ...
- Material使用11 核心模块和共享模块、 如何使用@angular/material
1 创建项目 1.1 版本说明 1.2 创建模块 1.2.1 核心模块 该模块只加载一次,主要存放一些核心的组件及服务 ng g m core 1.2.1.1 创建一些核心组件 页眉组件:header ...
- Angular Material 白天模式和黑夜模式
Material design调色板 https://www.materialpalette.com/ 明暗:虽然颜色不变,但是针对白天黑夜有做不同处理. 叠加:对话框,弹出菜单,事先是没有加载的.是 ...
- Angular Material design设计
官网: https://material.io/design/ https://meterial.io/components 优秀的Meterial design站点: http://material ...
- ASP.NET Core 2.1 Web API + Identity Server 4 + Angular 6 + Angular Material 实战小项目视频
视频简介 ASP.NET Core Web API + Angular 6的教学视频 我是后端开发人员, 前端的Angular部分讲的比较差一些, 可以直接看代码!!!! 这是一个小项目的实战视频, ...
- (Angular Material)用Autocomplete打造带层级分类的DropDown
效果如下图 代码实现 1.导入模块 import {MatAutocompleteModule} from '@angular/material/autocomplete'; @NgModule({ ...
- 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 ...
- [转]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 ...
- Angular Material 按钮图标系列
工做中经常用到Angular Material 中的好多按钮素材,奈何官网经常上不去,所以只能自己把这些常用的按钮扒下来了,留给自己同时也留给大家方便查看. Angular material mat- ...
- Angular Material Starter App
介绍 Material Design反映了Google基于Android 5.0 Lollipop操作系统的原生应用UI开发理念,而AngularJS还发起了一个Angular Material ...
随机推荐
- MarkDown 常用语法规则
> # 标题 # 标题1:h1的效果 ## 标题2:h2的效果 ### 标题3:h3的效果 #### 标题4:h4的效果 ##### 标题5:h5的效果 ###### 标题6:h6的效果 ### ...
- Entity Framework 学习系列(4) - EF 增删改
目录 写在前面 一.开发环境 二.创建项目 三.新增 1.单表新增 2.批量新增 3.多表新增 四.编辑 1.先查询,后编辑 2.创建实体,后编辑 五.删除 写在前面 在上一小节中,学习了如何 通过C ...
- 正则表达式(RegEx)官方手册/权威指南【Python】
前言 正则表达式(称为RE,或正则,或正则表达式模式)本质上是嵌入在Python中的一种微小的.高度专业化的编程语言,可通过 re 模块获得. 使用这种小语言,你可以为要匹配的可能字符串集指定规则:此 ...
- 初学者学习golang可能遇到的坑
我也是个golang初学者,刚入门的话,有些"坑"还是不好发现的.如map只是定义了然后就拿来使用,变量的值覆盖等. 本来打算写一篇的,后面发现有人写的挺不错的,我就把里面的有些坑 ...
- ES6 入门系列 (三) 尾递归
递归我们不陌生, 那什么是尾递归呢? 为什么要用尾递归呢? 尾递归怎么用呢? 带着这三个问题我们来了解它, 我们知道递归非常耗费内存,一不小心就会发生‘栈溢出’, 相信你一定遇到过这个错误: stac ...
- 如何构思你的iOS App应用
转自:http://mobile.51cto.com/hot-311134.htm 在twitter上,听到不少人问,我也有App 在App Store上面卖,为什么我的App卖得这么少啊?于是我就上 ...
- 本机安装mysql步骤
原文:https://www.cnblogs.com/dukeShi/p/6546024.html 本机安装mysql服务,步骤教程(另附SQLyog和Navicat工具) 因为这段时间不是装系统就是 ...
- OGG 源端与目标端 约束不一致
需求: 请在生产库执行下面的脚本 --删除主键并新增复合主键 alter table XXXXX drop constraint PK_USERCHNL cascade; ...
- (原)Ubuntu安装TensorRT
转载请注明出处: https://www.cnblogs.com/darkknightzh/p/11129472.html 参考网址: https://docs.nvidia.com/deeplear ...
- python数据类型之二
列表 list #定义:[]内可以有多个任意类型的值,逗号分隔 基本语法 # 定义:[]内可以有多个任意类型的值,逗号分隔 # my_girl_friends=['alex','wupeiqi','y ...