(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

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