JavaScriptを活用したWebアプリケーション開発の流れが広まっています。JavaScriptアプリケーションが大型化すれば、自然とフレームワークを欲するようになります。AngularJS、Ember、Backboneあたりが有名でしょうか。 今回はAngularJSをターゲットにしたプロダクト、Suave UIを紹介します。AngularJSと組み合わせて使うと便利なUIフレームワークになります。

Suave UIの使い方

まずはグリッド。

ツールチップ表示。

しかも多段対応。

モーダル。スクロールにも対応しています。

プレースホルダー。

ドロップダウン。

通知。上下どちらにも出せます。

フレームやリスト、水平線。

ボタン。

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

Suave UIはAngularJSに対応した部分において、su-*というプリフィックスを持っています。スタイルシートについてもsu-*をつけて使います。UI周りで従来のライブラリを使うと、そこだけAngularJSと違う書き方になって浮いてしまうことがあります。Suave UIを使ってUIとスクリプトが親和性高い状態を維持しましょう。

Suave UIはJavaScript/AngularJS製、MIT Licenseのオープンソース・ソフトウェアです。

Suave UI Demo uoziod/suave-ui