デザインは徐々にシンプルな方向に進んでいます。フラットであったり、マテリアルデザインなどがそうです。しかしシンプルであるが故に空間の取り方であったり、マテリアルデザインならではのアニメーションなど実装が難しい部分も増えています。 今回はそんなマテリアルデザインに合わせた各種UIコンポーネントを提供しているKeen-UIを紹介します。

Keen-UIの使い方

スクリーンショットを多めに紹介します。まずはアラート。

入力補完。

アイコン付きの入力補完。

ボタン。

チェックボックス。

折りたたみ。

確認ダイアログ。

フローティングのボタン。

アイコンボタン。

アイコン。

メニュー。

モーダル。

ポップオーバー。

ローディング。

ラジオボタン。

ラジオグループ。

レーティング。

Keen-UIはUIコンポーネントなので、他のデザインフレームワークと組み合わせて使うのが基本になります。デザインに統一感があるので、Keen-UIを使うことでマテリアルデザインを使った見やすいWebサイトができあがるでしょう。ライブラリとしてVue.jsを使っています。

Keen-UIはHTML5/JavaScript/CSS3製のオープンソース・ソフトウェア（MIT License）です。

JosephusPaye/Keen-UI: A collection of essential UI components written with Vue and inspired by Material Design Keen UI - Vue UI Components inspired by Material Design