読者です 読者をやめる 読者になる 読者になる

ほげほげ

プログラミング、英会話、ヨガ、料理などの備忘録など。

Angular Material と Material Design Liteの比較

どちらもGoogleによるMaterial Designの実装だが、以下の点で多少異なる。 Angularと組み合わせて使うなら、Angular Material 。 マテリアルデザインだけ適用したい場合は、Material Design Liteが良いのかな。

依存関係

Angular Material は Angular, ngAnimate, ngAriaに依存、 Material Design Liteは依存関係なし

コンポーネント

Angular Materialは30、Material Design Liteは15

ディレクティブ

Angular Materialは使える、Material Design Liteは使えない。 →Material Design Liteはクラスの記述が長くなる

<!-- Angular Material -->
<md-button>Get Started</md-button>

<!-- Material Design Lite -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
  Get Started
</button>

ファイルサイズ

Angular Materialの方がファイルサイズは大きい。

参考

Angular Material vs. Material Design Lite | Scotch