なお、本連載ではAngularJSそのものに関しては解説しませんので、専門書として『AngularJSアプリケーションプログラミング』、姉妹連載「AngularJSではじめるJavaScriptフレームワーク開発スタイル」などを併せて参照してください。
はじめに
UI Bootstrapは、おなじみBootstrapのラッパーで、Bootstrapの機能をAngularJSのディレクティブ形式で呼び出せるようにしたものです。本稿ではUI Bootstrapが提供する豊富な機能の中でも、限られたページ領域で大量のコンテンツ/画像を効率的に配置/表示するために役立つ、以下のウィジェットについて解説します。
- Tabs:タブパネルを生成
- Modal:ダイアログボックスを生成
- Collapse:開閉可能なパネルを生成
- Accordion:アコーディオンパネルを生成
対象読者
- AngularJSについて基本的な概念を理解している方
- AngularJSで利用できる拡張モジュールに興味がある方
- AngularJSで大量のコンテンツを限られたページ領域でスマートに表示したいと考えている方
検証環境
この記事では、以下の環境でサンプルの動作を確認しています。
- AngularJS 1.4.7
- UI Bootstrap 0.14.3
- Chrome 46
- Firefox 41
- Internet Explorer 11
UI Bootstrapは、Bowerを利用することで、以下のコマンドでインストールできます。Bowerについて詳しくは、別稿「Web開発ライブラリを自動的に入手できるパッケージ管理ツールBower」も参照してください。
> bower install angular-bootstrap bootstrap
タブパネルを生成する - UI Bootstrap(Tabs)
Tabsは、タブパネルを実装するためのウィジェットです。パネル上部のタブを選択することで、パネルの内容を切り替えるおなじみのUIを生成します。
以下は、その具体的なサンプルです。
<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8" /> <title>AngularJS</title> <!-- (1)ui-bootstrap-tpls.min.jsとbootstrap.min.cssをインポート --> <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/tabs.js"></script> </head> <body ng-controller="MyController"> <!--(4)タブパネルを定義--> <uib-tabset> <!--(3)個々のタブを設定--> <uib-tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled" select="check(tab.title)"> <div ng-bind-html="tab.content"></div> </uib-tab> </uib-tabset> </body> </html>
// (2)ui.bootstrapモジュールへの依存関係を設定 angular.module('myApp', [ 'ui.bootstrap', 'ngSanitize' ]) .controller('MyController', ['$scope', function($scope) { // タブに表示する情報 $scope.tabs = [ { title:'タブパネル', content:'パネルの端に配置されているタブ...' }, ...中略... ]; // タブ選択時に、該当するタイトルをログ出力 $scope.check = function(title) { console.log(title); } }]);
UI Bootstrapを利用するには、UI Bootstrap(ui-bootstrap-tpls.min.js)とともに、Bootstrap本体(bootstrap.min.css)もインポートしておきます(1)。また、アプリモジュール(myApp)からはui.bootstrapモジュールへの依存関係を宣言して、UI Bootstrapを有効化します(2)。ここまでは、以降のウィジェットでも同様の手順です(注)。
注
ngSanitizeモジュールへの依存関係を設定しているのは、ng-bind-htmlディレクティブを利用しているためです。UI Bootstrapを利用する上では必須ではありません。
個々のパネルは、<uib-tab>要素で表せます(3)。以下のような属性を指定できます。複数のタブでactive属性をtrueにしてもエラーにはなりませんが、その場合は後方のタブが優先して有効になります(ただし、意味はないので、そうすべきではありません)。
属性 | 概要 | デフォルト値 |
---|---|---|
heading | タブに表示するタイトル | - |
active | タブをデフォルトで選択状態にするか | false |
disable | タブを無効(選択不可)にするか | false |
select | タブを選択した時に実行する処理 | - |
deselect | タブが選択解除された時に実行される処理 | - |
本体には、パネルに表示すべきコンテンツを記述します。本文にはタグ文字列が含まれる可能性があるため、ng-bind-html属性で埋め込む点に注意してください。
サンプルでは、ng-repeat属性であらかじめ用意したオブジェクト配列tabsの内容を展開していますが、もちろん、<uib-tab>要素をタブパネルの数だけ列挙しても構いません。
個々のタブ情報を準備できたら、あとは全体を<uib-tabset>要素で括ることで、タブパネルの完成です(4)。<uib-tabset>要素では、タブ(ツマミ)部分をどのように表示するかを設定するために、以下のような属性を指定できます。
属性 | 概要 | デフォルト値 |
---|---|---|
type | タブの種類(tabs/pills) | tabs |
vertical | タブを垂直に並べるか | false |
justified | タブをパネル幅に合わせて均等割り付けするか | false |