Help us understand the problem. What is going on with this article?

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

More than 3 years have 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

水平ナビゲーション

tadayosi
OSSソフトウェアエンジニア
https://github.com/tadayosi
red-hat
Red Hat はオープンソースのエンタープライズ IT ソリューションを提供するプロバイダーです。サブスクリプション・モデルを通じて、Red Hat のお客様はクラウド、Linux、管理、ミドルウェア、モバイル、ストレージ、および仮想化のテクノロジーを利用できます。また、Red Hat ではサポートや、トレーニング、コンサルティングのサービスも提供しています。
https://www.redhat.com/ja
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away