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

あなたがWebアプリケーションを開発する際に使っているJavaScriptフレームワークは何でしょう。小さなものであればjQueryが良いかも知れません。が、より大きくコード量が増えていくともっと大型なフレームワークを必要とするはずです。

Ember.jsはその有力な選択肢の一つです。そしてそこにEmberUIを組み合わせるとより強力なツールになります。UIコンポーネントを自在に作れて、かつEmber.jsから操作できるライブラリです。

EmberUIの使い方

ではさっそくそのコンポーネントを見ていきましょう。

ボタンです。{{}}で括ってコンポーネントの指定を行っています。
ボタンです。{{}}で括ってコンポーネントの指定を行っています。

アイコン付きボタンもできます。
アイコン付きボタンもできます。

カレンダーです。これも使いどころが多そうです。
カレンダーです。これも使いどころが多そうです。

日付を複数選択状態にできます。
日付を複数選択状態にできます。

チェックボックス。
チェックボックス。

ドロップダウン。
ドロップダウン。

こんな感じの表示もよく使いますよね。
こんな感じの表示もよく使いますよね。

インプット系。大きさ、幅ともに自在に変更できます。
インプット系。大きさ、幅ともに自在に変更できます。

モーダルウィンドウ。
モーダルウィンドウ。

セレクト。検索で絞り込んだりできます。
セレクト。検索で絞り込んだりできます。

日付選択。こんな時にもカレンダーは便利ですね。
日付選択。こんな時にもカレンダーは便利ですね。

テキストエリア。
テキストエリア。

デモです。こういったフォームの作成に便利そうです。
デモです。こういったフォームの作成に便利そうです。

EmberUIはまだバージョンが0.1とあって、フォーム系のコンポーネントのみ提供されています。しかしWebアプリケーションとしては入力を受け取って処理することが多いと思いますので、EmberUIを使えばEmber.jsを使ったWebアプリケーションがさくさくとできるようになりそうです。

EmberUIはJavaScript/CSS製のオープンソース・ソフトウェア(MIT License)です。

EmberUI

emberui/emberui

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2