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

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

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2