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

Office UI FabricのリストUI

More than 3 years have passed since last update.

今日はOffice UI Fabric(以下"OfficeUI")のListについて解説します。

リスト表示を行うサンプルプログラムを作成してみました。表示例は以下の通りです。併せて実際に動くサンプルを用意しました。

img700.png

また、「ms-List--grid」クラスを追加指定することで、複数カラムにわたるリスト表示が可能です。

img701.png

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

<!DOCTYPE html>
<html ng-app="App">
  <head>
    <meta charset="utf-8" />
    <title>List 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-ChoiceField">
            <input id="check1" class="ms-ChoiceField-input" type="checkbox" ng-model="isGridStyle">
              <label for="check1" class="ms-ChoiceField-field">
              <span class="ms-Label">"ms-List--grid"クラスを適用する</span>
            </label>
          </div>
        </div>
      </div>
      <div class="ms-Grid-row">
        <div class="ms-Grid-col ms-u-sm6 ms-u-md8 ms-u-lg12">
          <div class="ms-List {{isGridStyle?'ms-List--grid':''}} is-selectable" ng-repeat="item in items">
            <div class="ms-ListItem is-unread is-selectable">
              <span class="ms-ListItem-secondaryText">{{item.title}}</span>
              <span class="ms-ListItem-tertiaryText">第{{item.episode}}羽</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
      var app = angular.module('App', []);
      app.controller('AppController', ['$scope',
        function($scope) {
          $scope.init = function() {
            $scope.isGridStyle = false;
            $scope.items = [
              { episode: 1, title: 'ひと目で尋常でないもふもふだと見抜いたよ' },
              { episode: 2, title: '小麦を愛した少女と小豆に愛された少女' },
              { episode: 3, title: '初めて酔った日の事憶えてる?自分の家でキャンプファイヤーしようとしたわよね' },
              { episode: 4, title: 'ラッキーアイテムは野菜と罪と罰' },
              { episode: 5, title: 'ココアと悪意なき殺意' },
              { episode: 6, title: 'お話をするお話' },
              { episode: 7, title: 'Call Me Sister.' },
              { episode: 8, title: 'プールに濡れて雨に濡れて涙に濡れて' },
              { episode: 9, title: '青山スランプマウンテン' },
              { episode: 10, title: '対お姉ちゃん用決戦部隊、通称チマメ隊' },
              { episode: 11, title: '少女は赤い外套を纏いウサギを駆りて聖夜の空を行く' },
              { episode: 12, title: '君のためなら寝坊する' },
            ];
          }
          $scope.init();
        }
      ]);
    </script>
  </body>
</html>

まとめ

すごく駆け足ですが、OfficeUIのListについて解説しました。特徴的なUIなので効果的に使える場面を見つけて行きたいところです。

参考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
ユーザーは見つかりませんでした