angular-material-demo/index.html at master · hawz/angular-material-demo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Angular Material - Demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="node_modules/angular-material/angular-material.min.css">
  <link rel="stylesheet" href="assets/app.css">
</head>
<body ng-app="MyApp" layout="column" ng-controller="UsersController as ul">

  <md-toolbar layout="row">
    <md-button class="menu" hide-gt-sm ng-click="ul.toggleList()" aria-label="Show User List">
      <md-icon md-svg-icon="menu"></md-icon>
    </md-button>
    <h3>Angular Material - Demo</h3>
  </md-toolbar>

  <div layout="row" flex>
    <md-sidenav md-is-locked-open="$mdMedia('gt-sm')" md-component-id="left" class="md-whiteframe-z2">
      <md-list ng-click="ul.toggleList()">
        <md-list-item ng-repeat="user in ul.users">
          <md-button ng-click="ul.selectUser(user)">
            <md-icon md-svg-src="{{ user.avatar }}" class="avatar"></md-icon>
            {{ user.name }}
          </md-button>
        </md-list-item>
      </md-list>
    </md-sidenav>
    <md-content flex id="content">
      <md-icon md-svg-icon="{{ ul.selected.avatar }}" class="avatar"></md-icon>
      <h2>{{ ul.selected.name }}</h2>
      <p>{{ ul.selected.content }}</p>

      <md-button class="share" md-no-ink aria-label="Share with {{ ul.selected.name }}" ng-click="ul.share(ul.selected)">
        <md-icon md-svg-icon="share"></md-icon>
      </md-button>
    </md-content>
  </div>

  <script src="node_modules/angular/angular.min.js"></script>
  <script src="node_modules/angular-animate/angular-animate.js"></script>
  <script src="node_modules/angular-aria/angular-aria.min.js"></script>
  <script src="node_modules/angular-material/angular-material.min.js"></script>
  <script src="/app/src/components/users/users.module.js"></script>
  <script src="/app/src/components/users/users.service.js"></script>
  <script src="/app/src/components/users/users.controller.js"></script>
  <script>
    angular.module('MyApp', ['ngMaterial', 'users'])
      .config(function($mdIconProvider, $mdThemingProvider) {
        $mdIconProvider
          .defaultIconSet('./assets/svg/avatars.svg'          , 128)
          .icon('menu', './assets/svg/menu.svg'               , 24)
          .icon("share"      , "./assets/svg/share.svg"       , 24)
          .icon("google_plus", "./assets/svg/google_plus.svg" , 512)
          .icon("hangouts"   , "./assets/svg/hangouts.svg"    , 512)
          .icon("twitter"    , "./assets/svg/twitter.svg"     , 512)
          .icon("phone"      , "./assets/svg/phone.svg"       , 512);

        $mdThemingProvider.theme('default')
          .primaryPalette('brown')
          .accentPalette('red');
      });
  </script>
</body>
</html>