13日目(もう昨日だけど……)はOffce UI Fabric(以下"OfficeUI")のテーブル表示について解説します。
HTMLにもTABLEタグがありますが、OfficeUIにもテーブル表示を行うCSSクラスが用意されている、という位置付けです。簡単なサンプルとして、九九の表をOfficeUIのテーブルを使用して表示してみました。以下のような表示になります。
サンプルソースコードは以下になります。
<!DOCTYPE html>
<html ng-app="App">
<head>
<meta charset="utf-8" />
<title>Table Sample</title>
<link rel="stylesheet" href="//appsforoffice.microsoft.com/fabric/1.0/fabric.min.css">
<link rel="stylesheet" href="//appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-controller="AppController">
<div class="ms-Grid">
<div class="ms-Grid-row">
<div class="ms-Grid-col ms-u-sm6 ms-u-md8 ms-u-lg12">
<div class="ms-Table">
<div class="ms-Table-row" ng-repeat="xdata in data">
<span class="ms-Table-cell" ng-repeat="ydata in xdata">{{ydata}}</span>
</div>
</div>
</div>
</div>
</div>
<script>
var app = angular.module('App', []);
app.controller('AppController', ['$scope',
function($scope) {
$scope.data = [];
for (var x = 1; x <= 9; x++) {
$scope.data.push([]);
for (var y = 1; y <= 9; y++) {
$scope.data[x-1].push(x * y);
}
}
}
]);
</script>
</body>
</html>
使用方法は以下のように、「ms-Table」がテーブル全体、「ms-Table-row」が行、「ms-Table-cell」が列になります。HTMLのTABLE,TR,TDタグで良いのでは……と同じような感じで使用します。
<div class="ms-Table">
<div class="ms-Table-row">
<span class="ms-Table-cell">aaa</span>
</div>
</div>
おまけ
ちなみに、これまでのOffice UI Advent Calednarで使用したサンプルプログラムをBitbacketで公開しました。以下のURLからサンプルプログラムを動かしてみることができます。
- Office UI Advent Calendar 2015サンプルプログラム
まとめ
OfficeUIのテーブルについて解説しました。正直Bootstrapのテーブルと比べると指定可能なクラスが少ない感じがします。Bootstrap的なtablle-condensed的な表示が必要な場合は、自分でCSSを定義することになりそうです。