ITエンジニア/デザイナ向けにオープンソースを毎日紹介

最近のデザイントレンドはマテリアルデザインです。しかしデザインと言っても見た目だけでなく、アニメーションも含めて考えなければいけない点が重要です。そのため開発する敷居が高くなっています。

そこで活躍するのがマテリアルデザイン用のフレームワークになります。今回はIonic Frameworkをマテリアルデザインに対応させたIonic Materialです。

Ionic Materialの使い方

例えばこんな感じ。クリックすると波紋が広がるようにアニメーションします。
例えばこんな感じ。クリックすると波紋が広がるようにアニメーションします。

押したところを中心に広がるのが良い感じです。
押したところを中心に広がるのが良い感じです。

入力しようとするとplaceholderが上に移動します。また下線が表示されます。
入力しようとするとplaceholderが上に移動します。また下線が表示されます。

各デザインはパーツがアニメーションしながら画面を構築します。
各デザインはパーツがアニメーションしながら画面を構築します。

Ionic Frameworkを使っていればフラットUIに対応していますので、さらにIonic Materialを適用することでマテリアルデザインに移行できます。フレームワークを使うことでデザイントレンドに即座に追従できるのは良いですね。

Ionic MaterialはHTML5/CSS3/JavaScriptのオープンソース・ソフトウェア(MIT License)です。

Ionic Material / Material Design / Ionic Framework / AngularJS / Zach Fitzgerald

zachsoft/Ionic-Material

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2