Help us understand the problem. What is going on with this article?

Office UI Fabricのテーブル表示

More than 3 years have passed since last update.

13日目(もう昨日だけど……)はOffce UI Fabric(以下"OfficeUI")のテーブル表示について解説します。

HTMLにもTABLEタグがありますが、OfficeUIにもテーブル表示を行うCSSクラスが用意されている、という位置付けです。簡単なサンプルとして、九九の表をOfficeUIのテーブルを使用して表示してみました。以下のような表示になります。

img700.png

サンプルソースコードは以下になります。

<!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からサンプルプログラムを動かしてみることができます。

まとめ

OfficeUIのテーブルについて解説しました。正直Bootstrapのテーブルと比べると指定可能なクラスが少ない感じがします。Bootstrap的なtablle-condensed的な表示が必要な場合は、自分でCSSを定義することになりそうです。

参考URL

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした