最近のWebはフラットなUIが主流で、かつユーザのアクションに対して何らかのアニメーションを行うマテリアルデザインも取り込まれてきています。そのためにも多くのフレームワークが出ています。しかしそれらを導入するとしばりが強いと感じている人も多いでしょう。 そこでExpandJSの導入です。PolymerとGoogleのマテリアルデザインをベースに、80以上のカスタムエレメントと350を越える関数を提供するライブラリです。

ExpandJSの使い方

フォーム入力系。フォーカスが当たるとアニメーションします。

ツールチップ。

ダイアログ。

アクション付きダイアログ。

パネル。

メニュー。

ペーパー風表示。

アバター。

ボタン。

クリックでアニメーションします。

フローティングボタン。

アイコン。

アイコン付きリスト。

リストの右側に情報追加することもできます。

四角い系統のボタン。

チェックボタン。こちらも右側配置ができます。

エディタ。

テキストエリアは自動伸縮します。

バリデーション。

ちょっと複雑なUI。

タブ。

ExpandJSはデザインの他、配列やDOM操作、エラーなど数多くのメソッドが提供されています。これらを使えばJavaScript開発が効率化するのではないでしょうか。

ExpandJSはJavaScript製、BSD Licenseのオープンソース・ソフトウェアです。

ExpandJS Expand JS