CodeZine(コードジン)

特集ページ一覧

UI BootstrapでリッチなパネルUIを実装しよう ~ タブパネルからダイアログ、アコーディオンパネルまで

AngularJSアプリ開発を支援する便利モジュール(6)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2015/12/09 14:00

目次

開閉可能なパネルを生成する - Collapse

 ヘッダー(タイトル)領域をクリックすることで、本文を開閉できるパネルを生成します。

タイトルバーをクリックすると、本文を開閉
タイトルバーをクリックすると、本文を開閉

 では、具体的な例を見ていきましょう。

リスト6 collapse.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css" />
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="scripts/collapse.js"></script>
</head>
<body ng-controller="MyController">
<!--(1)パネルを定義-->
<div class="panel panel-primary">
  <!--(3)ヘッダー領域をクリックすると、変数isShowを反転-->
  <div class="panel-heading" ng-click="isShow = !isShow">
    <div class="panel-title">タブパネルとは</div>
  </div>
  <!--(2)変数isShowによって本文を開閉-->
  <div class="panel-body" uib-collapse="isShow">
    パネルの端に配置されているタブをクリックすると、パネルの中の内容が切り替わるUIです。<br />タブにマウスポインターを当てるだけで切り替わる場合もあります。
  </div>
</div>
</body>
</html>
リスト7 collapse.js
angular.module('myApp', [ 'ui.bootstrap'])
  .controller('MyController', ['$scope', function($scope) {
    }
  }]);

 パネルそのものは、Bootstrapのお作法に従って、以下のようにマークアップします(1)。詳しくは、別稿「Bootstrapでリスト/パネル/タブ使って情報をすっきり整理しよう」も参照してください。panel-primaryの部分は、用途に応じてpanel-success(成功)、panel-info(情報)、panel-warning(警告)のような値も指定できます。

<div class="panel panel-primary">
  <div class="panel-heading">
    <div class="panel-title">ヘッダータイトル</div>
  </div>
  <div class="panel-body">
    パネル本文
  </div>
</div>

 あとは、パネルの本文部分にuib-collapse属性を指定します(2)。この例であれば、変数isShowのtrue/falseに応じて、本文の表示/非表示を切り替えます。変数isShowは、ヘッダー領域のクリックによって反転するようにしています(3)。

アコーディオンパネルを生成する - UI Bootstrap(Accordion)

 Accordionウィジェットは、開閉式のパネル群を生成します。と言ってしまうと、Collapseウィジェットにも似ていますが、複数のパネルをまとめて管理し、あるパネルを開くと、現在開いているパネルを自動的に閉じてくれます。蛇腹に開閉するその様子が、アコーディオンに似ていることから、このように呼ばれます。

選択されたパネルを除いてはすべて閉じる
選択されたパネルを除いてはすべて閉じる

 では、具体的な例を見てみましょう。

リスト8 accordion.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css" />
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="scripts/accordion.js"></script>
</head>
<body ng-controller="MyController">
<!--(2)アコーディオンパネルを定義-->
<uib-accordion close-others="true">
  <!--(1)個々のパネルを設定-->
  <uib-accordion-group ng-repeat="panel in panels" heading="{{panel.header}}"
    is-open="panel.open" is-disabled="panel.disabled">
    <div ng-bind-html="panel.content"></div>
  </uib-accordion-group>
</uib-accordion>
</body>
</html>
リスト9 accordion.js
angular.module('myApp', [ 'ui.bootstrap', 'ngSanitize' ])
  .controller('MyController', ['$scope', function($scope) {
  // パネルに表示する情報
  $scope.panels = [
    {
      header: 'タブパネル',
      content: 'パネルの端に配置されているタブを...
    },
    ...中略...
  ];
  }]);

 個々のパネルを表すのは、<uib-accordion-group>要素です(1)。以下のような属性を指定できます。

<uib-accordion-group>要素で利用できる主な属性
属性名 概要 デフォルト値
heading ヘッダータイトル
is-open デフォルトで開いた状態にするか false
is-disabled パネルを無効化するか false

 本体にはパネル本文を記述します。本文にはタグ文字列が含まれる可能性があるため、ng-bind-html属性で埋め込む点に注意してください。

 サンプルでは、ng-repeat属性であらかじめ用意したオブジェクト配列panelsの内容を展開していますが、もちろん、<uib-accordion-group>要素をパネルの数だけ列挙しても構いません。

 個々のパネルを準備できたら、あとは全体を<uib-accordion>要素で括ることで、アコーディオンパネルの完成です(2)。close-others属性をtrue(デフォルト)にしておくことで、常にひとつだけパネルを開くようにします。もしも同時に複数のパネルを開いた状態にしたい場合には、この属性をfalseとしてください。

まとめ

 以上、本稿ではUI Bootstrapを利用してダイアログボックスやアコーディオンパネル、タブパネルを生成する方法について解説しました。コンテンツが増えてくると、自ずと縦長のページが増えていきますが、コンテンツの種類に応じて、こうしたUIを活用することで、スクロールを減らし、限られた領域の中でスマートに情報を見せることが可能になります。次回は、データをチャート化するウィジェットをはじめ、階層型のデータを見せるツリーメニュー、時系列のデータを見せるタイムラインなどのUIを紹介します。

参考資料



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:AngularJSアプリ開発を支援する便利モジュール

もっと読む

著者プロフィール

  • WINGSプロジェクト(ウイングスプロジェクト)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5