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

Bulma ロゴ トップ バナー

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

Bulmaのpanelクラスとサブクラスの実装サンプルをブラウザーで実行した結果

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

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

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

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

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

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

ヘッダー

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

Bulmaのpanelクラスとサブクラスの実装サンプルをブラウザーで実行した結果

HTML

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

ボディ(明細)

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

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

Bulmaのpanelクラスとサブクラスの実装サンプルをブラウザーで実行した結果

HTML

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

Bulmaのpanelクラスとサブクラスの実装サンプルをブラウザーで実行した結果

HTML

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

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

Bulmaのpanelクラスとサブクラスの実装サンプルをブラウザーで実行した結果

HTML

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

Bulmaのpanelクラスとサブクラスの実装サンプルをブラウザーで実行した結果

HTML

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

Bulmaのpanelクラスとサブクラスの実装サンプルをブラウザーで実行した結果

HTML

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

Bulmaのpanelクラスとサブクラスの実装サンプルをブラウザーで実行した結果

HTML

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

ブロックには

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

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

Bulmaのpanelクラスとサブクラスの実装サンプルをブラウザーで実行した結果

HTML

アイコン

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

HTML

Bulmaのpanelクラスとサブクラスの実装サンプルをブラウザーで実行した結果

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

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

HTML

Bulmaのpanelクラスとサブクラスの実装サンプルをブラウザーで実行した結果

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

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

HTML

Bulmaのpanelクラスとサブクラスの実装サンプルをブラウザーで実行した結果

パネルの色

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

Bulmaのpanelクラスとサブクラスの実装サンプルをブラウザーで実行した結果

HTML

Bulmaのpanelクラスとサブクラスの実装サンプルをブラウザーで実行した結果

HTML

Bulma 入門 Tips 一覧