Edited at

エンタープライズ向けBootstrap:PatternFlyの紹介

More than 1 year has passed since last update.

PatternFlyの日本語資料が非常に少ないので、紹介記事を書いてみる。


PatternFlyとは

http://www.patternfly.org/

PatternFlyはRed Hatがスポンサーをしている、オープンソースのWeb UIフレームワーク。Bootstrap 3をベースにしている。

Bootstrapは、Webの汎用コンポーネントを集めたCSSライブラリだが、とくにWeb系のB2Cなサービスで使われているように思う。PatternFlyはRed Hatがスポンサーしているだけあって、エンタープライズ向けに特化していて、B2BなサービスやWebアプリケーションで使われることを想定した、一段高レベルのウィジェットやレイアウトがライブラリとして提供される。

なお、名前からも分かるように、元々はアプリケーションサーバのWildFlyの管理コンソールなどで使われていたUI部品を統合して再利用しようという試みから生まれた。


パターンライブラリ

というわけで、PatternFlyがどんなUIライブラリを提供しているかを紹介してみる。

バージョン 3.17.0 現在であるライブラリのカテゴリは、以下の8つ。


  1. アプリケーションフレームワーク

  2. カード

  3. ユーザとのコミュニケーション

  4. コンテンツの表示

  5. ダッシュボード

  6. データ可視化

  7. フォームとコントロール

  8. ナビゲーション


アプリケーションフレームワーク


ログインページ

http://www.patternfly.org/pattern-library/application-framework/login-page


カード


状態集計

http://www.patternfly.org/pattern-library/cards/aggregate-status-card


トレンド

http://www.patternfly.org/pattern-library/cards/trend-card


使用状況バー

http://www.patternfly.org/pattern-library/cards/utilization-bar-card


使用状況トレンド

http://www.patternfly.org/pattern-library/cards/utilization-trend-card


ユーザとのコミュニケーション


初期状態

http://www.patternfly.org/pattern-library/communication/empty-state


インライン通知

http://www.patternfly.org/pattern-library/communication/inline-notifications


ポップアップ通知

http://www.patternfly.org/pattern-library/communication/toast-notifications


システム情報

http://www.patternfly.org/pattern-library/communication/about-modal


通知センター

http://www.patternfly.org/pattern-library/communication/notification-drawer


ウィザード

http://www.patternfly.org/pattern-library/communication/wizard


コンテンツの表示


カード

http://www.patternfly.org/pattern-library/content-views/card-view


リスト

http://www.patternfly.org/pattern-library/content-views/list-view


http://www.patternfly.org/pattern-library/content-views/table-view


ダッシュボード


ダッシュボード要素

http://www.patternfly.org/pattern-library/dashboard/dashboard-card


ダッシュボードレイアウト

http://www.patternfly.org/pattern-library/dashboard/dashboard-layout


データ可視化


曲線グラフ

http://www.patternfly.org/pattern-library/data-visualization/area-chart


棒グラフ

http://www.patternfly.org/pattern-library/data-visualization/bar-chart


ドーナツグラフ

http://www.patternfly.org/pattern-library/data-visualization/donut-chart


温度分布図

http://www.patternfly.org/pattern-library/data-visualization/heat-map


直線グラフ

http://www.patternfly.org/pattern-library/data-visualization/line-chart


円グラフ

http://www.patternfly.org/pattern-library/data-visualization/pie-chart


スパークライン

http://www.patternfly.org/pattern-library/data-visualization/sparkline


使用状況バー

http://www.patternfly.org/pattern-library/data-visualization/utilization-bar-chart


フォームとコントロール


日付入力

http://www.patternfly.org/pattern-library/forms-and-controls/date-picker


項目ヘルプ

http://www.patternfly.org/pattern-library/forms-and-controls/field-level-help


検索

http://www.patternfly.org/pattern-library/forms-and-controls/find


時間入力

http://www.patternfly.org/pattern-library/forms-and-controls/time-picker

時間入力


フォーム

http://www.patternfly.org/pattern-library/forms-and-controls/forms


ナビゲーション


垂直ナビゲーション

http://www.patternfly.org/pattern-library/navigation/vertical-navigation


水平ナビゲーション

http://www.patternfly.org/pattern-library/navigation/horizontal-navigation