Bulmaのパネル Panel [CSSフレームワーク]

WebサイトやWebシステムでは、検索可能なメニューを配置したい場合があります。
トップに検索用のテキストを入力するボックスがあり、ボディ（明細）にはカテゴリーを選択できるナビゲーションとメニュー項目のリストが配置され、フッターには、ボタンなどのアクションを実行できるコントロール（要素）が配置された以下のようなUIです。

Bulmaには、様々なコントロール（要素）を組み合わせてリスト表示した、上記のようなウィンドウを作成するクラスが用意されています。

今回は、コントロールを組み合わせてコンパクトにまとめたウィンドウが作成できるpanelクラスを紹介します。

様々なコントロールで構成されたパネルを作成するpanelクラス

panelクラスは、コントロールを組み合わせたウィンドウのコンテナになります。
panelクラスの配下には、ヘッダー、タブ（ナビゲーション）、ブロックを作成することができます。
panelクラスを指定した要素の子要素には

• ヘッダーを配置するpanel-headingクラス
• ナビゲーションタブを配置するpanel-tabsクラス
• ブロックを配置するpanel-blockクラス

を配置してパネルを構成していきます。

ヘッダー

パネルにヘッダーを配置すると、以下のようになります。

HTML

パネルのヘッダーには、タイトル（表題）などが配置できます。

ボディ（明細）

ボディ部分は、水平ナビゲーションのタブや、ブロックを配置します。

パネルにタブを配置すると、以下のようになります。

HTML

パネルにブロックを配置すると、以下のようになります。

HTML

ボディ部分は、タブとブロックを組み合わせて作成します。

タブとブロックを組み合わせると、以下のようになります。

HTML

タブとブロックの配置順には制限がありませんので、ブロックを配置してからタブを配置することもできます。

HTML

タブとブロックは複数組み合わせることもできます。

HTML

ボディにヘッダーを加えると、以下のようになります。

HTML

ブロックにコントロールを配置する

ブロックには

• controlクラスを指定したコントロール（要素の組み合わせ）
• inputクラスを指定したテキストボックス（input要素）
• ラベル（label要素）
• checkboxクラスを指定したチェックボックス（input要素）
• buttonクラスを指定したボタン（a要素やbutton要素）

など、様々な要素を含めることができます。

HTML

アイコン

ブロックにはアイコンを配置することができます。
アイコンを表示する際は、ブロックに配置したアイコンのコンテナ要素（span）にpanel-iconクラスを指定します。

HTML

タブアイテムをアクティブ化（強調して選択状態に）する

タブのアイテム（項目）をアクティブ化するには、panel-tabsクラスを指定したタブのアイテムの要素にis-activeクラスを指定します。

HTML

ブロックアイテムをアクティブ化（強調して選択状態に）する

ブロックのアイテム（項目）をアクティブ化するには、panel-blockクラスを指定した要素にis-activeクラスを指定します。

HTML

パネルの色

パネルにはBulmaに定義されているテーマカラーを設定することができます。

HTML

HTML

Bulma 入門 Tips 一覧