Office UI Fabricのボタン #AdventCalendar

今日はOffice UI Fabric(以下"")のボタンの作り方を紹介します。

ボタンのサンプル

サンプルソースコードは以下になります。OfficeUIのボタンは「ms-Button--XX」というクラスで指定します。

<!DOCTYPE html>
<html ng-app="App">
  <head>
    <meta charset="utf-8" />
    <title>fontSize 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-col ms-u-sm6 ms-u-md8 ms-u-lg12" ng-repeat="button in buttons">
      <button class="ms-Button {{button}}" onclick="alert('hello')">
        <span class="ms-Button-label">{{button}}<span>
      </button>
    </div>
    <script>
      var app = angular.module('App', []);
      app.controller('AppController', ['$scope',
        function($scope) {
          $scope.buttons = [
            "ms-Button", "ms-Button--primary", "ms-Button--hero",
            "ms-Button--compound", "ms-Button--command"
          ];
        }
      ]);
    </script>
  </body>
</html>

実行結果は以下のようになります。

まとめ

OfficeUIでのボタンについて紹介しました。単にボタンを作るだけなので、サクッと記事が終わってしまいました……。
明日以降もOfficeUIの基本コンポーネントまわりの解説を行う予定です。