Office UI Fabricのトグルボタンとチェックボックス #AdventCalendar

今日のOffice UI Fabric Advent Calendarは昨日のボタンに引き続き、基本コンポーネントについて紹介していこうと思います。

今回はtrue/falseを切り替える用途で使用する、トグルボタンとチェックボックスについて解説します。

トグルボタン

まずはトグルボタンです。表示は以下のようにボタンを押し込む感じではなく、ON/OFFを切り替える感じです。ON,OFFのラベルはms-Label--offとms-Label--onで指定することで任意のラベルを指定できます。

サンプルコードは以下です。トグルボタンは「ms-Toggle"」というクラスで指定します。

<!DOCTYPE html>
<html ng-app="App">
  <head>
    <meta charset="utf-8" />
    <title>Toggle Button 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>
    <style>
      .result { color: red; }
    </style>
  </head>
  <body ng-controller="AppController">
    <div class="ms-Grid-col ms-u-sm6 ms-u-md8 ms-u-lg12"><!-- トグルボタン -->
      <span class="ms-Toggle">
        <span class="ms-Toggle-description">トグルボタン</span>
        <input id="toggle1" type="checkbox" class="ms-Toggle-input" ng-model="myToggleButton">
        <label for="toggle1" class="ms-Toggle-field">
          <span class="ms-Label ms-Label--off">OFF</span>
          <span class="ms-Label ms-Label--on">ON</span>
        </label>
      </span>
    </div>
    <div class="ms-Grid-col ms-u-sm6 ms-u-md8 ms-u-lg12"><!-- 結果表示 -->
      <p>トグルボタンの値＝<span class="result">{{myToggleButton}}</span></p>
    </div>
    <script>
      var app = angular.module('App', []);
      app.controller('AppController', ['$scope',
        function($scope) {
          $scope.myToggleButton = true;
        }
      ]);
    </script>
  </body>
</html>

チェックボックス

チェックボックスは以下のような表示になります。動きはFORMタグのチェックスボックスそのものですね。

サンプルコードは以下のようになります。チェックボックスは「ms-ChoiceField」というクラスで指定します。ms-ChoiceFieldクラスを指定したタグで挟んだラベルは、チェックボックスのクリック領域として扱われます。

<!DOCTYPE html>
<html ng-app="App">
  <head>
    <meta charset="utf-8" />
    <title>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>
    <style>
      .result { color: red; }
    </style>
  </head>
  <body ng-controller="AppController">
    <div class="ms-Grid-col ms-u-sm6 ms-u-md8 ms-u-lg12"><!-- チェックボックス -->
      <div class="ms-ChoiceField">
        <input id="check1" class="ms-ChoiceField-input" type="checkbox" ng-model="myCheckBox">
        <label for="check1" class="ms-ChoiceField-field">
          <span class="ms-Label">チェックボックス</span>
        </label>
      </div>
    </div>
    <div class="ms-Grid-col ms-u-sm6 ms-u-md8 ms-u-lg12"><!-- 結果表示 -->
      <p>チェックボックスの値＝<span class="result">{{myCheckBox}}</span></p>
    </div>
    <script>
      var app = angular.module('App', []);
      app.controller('AppController', ['$scope',
        function($scope) {
          $scope.myCheckBox = true;
        }
      ]);
    </script>
  </body>
</html>

まとめ

今日はtrue/falseを切り替えるトグルボタンとチェックボックスについて紹介しました。
明日はテキストボックスの解説を行う予定です。