(30 hackdays day 10) Material design - 可用的Material

Google的Material Design出来一阵子了，可是不是感受仍是个看不见摸不着的概念？按照Google的说法

Material Design is a specification for a unified system of visual, motion, and interaction design that adapts across different devices.

Material应该是一个跨平台的，统一视觉，动画和交互设计的基本模型。好吧，工程师思惟做祟，为何听起来像bootstrap呢。还有，什么Material is the metaphor，Swift out，到底咋实现呀...

因而，几个Ionic Framework和AngularJS的核心开发者站了出来，开始了一个酷酷的项目Material。这个项目目前还处于初期高度活跃时期，因此最好不要在自家成熟系统上玩耍。

写过Angular跟不少现有控件打交道的人都会体会到它们之间的“代沟”。除了各类$scope.$apply之外，Angular崇尚的组件复用，Directive等常常会反而成为整合的绊脚石。因此很早就有个项目Angular-UI试图把一些经常使用的，跟Angular整合很好的组件统计在一块儿，让你们各取所需。但后来不知为什么，这网站并无成为Angular Directive的集散地。

后来Polymer，Dart出来了，感受Google下决心要完全改造前端技术了。但囿于以前GWT的失败，我总以为Google也就适合作作新语言，Compiler之类的，直接作前端界面老是会被骂碎。

但此次看了Material这个项目的Demo（好多东西）之后，我真心感到，Google工程师审美提升了...

Material组成

按照做者所说

Our goal is to deliver a lean, lightweight set of AngularJS-native UI elements that implement the material design system for use in Angular SPAs.

Material项目的目的是提供一系列实现了Material设计系统的Angular原生的UI控件（想象一下不再用$scope.$apply来让这世界刷新了）。Component里面有目前提供的控件列表。其中，Card，mdToast，TextField都是作的比较好玩的（想象一下一个页面也能用Android的Toast）。

写了个小登录框，用了md-card, md-text-float, md-button。用了几个Directive就搞定了。虽然感受仍是比Bootstrap写的麻烦一些，但出来这些交互仍是挺爽的。

其实Firstname应该是粉红色，很漂亮的粉红色。而后点击TextField之后Firstname会上去，空出位置来，动画也是挺赞的。

另外，赞一下他们的文档。他们的文档是用dgeni写的。须要装一下而后build一下就能看到。Demo里获取例子的源码也方便了不少，点击右上角的Source就能够。直接看Angular出来的HTML就是做死。

最后，这个Google的家伙是这个项目里的一员：https://plus.google.com/+NaomiBlack/posts/bCS9DSPdVug

嗯，我知道今天的文章很水...但...也算写了好吗！