kkroesch
6/28/2016 - 1:51 PM

Angular Material Start

Angular Material Start

index.htm
content_copyfile_download
<html lang="en" >

<head>
   <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   <style type="text/css">
      .location-item { padding: 0.5em; cursor: pointer; }
      .level-2 { padding-left: 1.5em; }
      .level-3 { padding-left: 2.5em; }
      .level-4 { padding-left: 3.5em; }
   </style>
</head>

<body ng-app="firstApplication"> 
   <div id="themeContainer" ng-controller="themeController as ctrl" ng-cloak>
      <md-toolbar class="md-primary md-warn">
         <div class="md-toolbar-tools">
            <h2 class="md-flex">LO</h2>
            <span flex></span>
            <md-button>Verwaltung</md-button>
            <md-button>Inventar</md-button>
            <md-button>Dashboard</md-button>
         </div>
      </md-toolbar>
      <div flex layout>
         <div flex="20" layout="column">
            <div flex layout class="location-item">
               <span>Gartenstr. 7</span>
               <span flex></span>
               <md-checkbox class="md-secondary"></md-checkbox>
            </div>
            <div flex layout class="location-item level-2">
               <span>Keller</span>
               <span flex></span>
               <md-checkbox class="md-secondary"></md-checkbox>
            </div>
            <div flex layout class="location-item level-3">
               <span>Home Office</span>
               <span flex></span>
               <md-checkbox class="md-secondary"></md-checkbox>
            </div>
            <div flex layout class="location-item level-3">
               <span>Werkstatt</span>
               <span flex></span>
               <md-checkbox class="md-secondary"></md-checkbox>
            </div>
            <div flex layout class="location-item level-3">
               <span>Maschinenraum</span>
               <span flex></span>
               <md-checkbox class="md-secondary"></md-checkbox>
            </div>
            <div flex layout class="location-item level-3">
               <span>Lager</span>
               <span flex></span>
               <md-checkbox class="md-secondary"></md-checkbox>
            </div>
            <div flex layout class="location-item level-2">
               <span>Erdgeschoss</span>
               <span flex></span>
               <md-checkbox class="md-secondary"></md-checkbox>
            </div>
            <div flex layout class="location-item level-3">
               <span>Kantine</span>
               <span flex></span>
               <md-checkbox class="md-secondary"></md-checkbox>
            </div>
            <div flex layout class="location-item level-3">
               <span>Sonnendeck</span>
               <span flex></span>
               <md-checkbox class="md-secondary"></md-checkbox>
            </div>
            <div flex layout class="location-item level-2">
               <span>Erster Stock</span>
               <span flex></span>
               <md-checkbox class="md-secondary"></md-checkbox>
            </div>
            <div flex layout class="location-item level-2">
               <span>Dachgeschoss</span>
               <span flex></span>
               <md-checkbox class="md-secondary"></md-checkbox>
            </div>
         </div>
      <div flex></div>
      <md-card flex="20">
         <md-list flex>
            <md-list-item>
              <md-checkbox></md-checkbox>
              <span>Objektnummer</span>
              <span class="md-secondary">Status</span>
              <md-divider></md-divider>
            </md-list-item>
            <md-list-item>
              <md-checkbox></md-checkbox>
              <p>297520752378</p>
              <md-icon>done</md-icon>
              <md-divider></md-divider>
            </md-list-item>
            <md-list-item>
              <md-checkbox></md-checkbox>
              <p>2374629873</p>
              <md-icon>done</md-icon>
              <md-divider></md-divider>
            </md-list-item>
            <md-list-item>
              <md-checkbox></md-checkbox>
              <p>2374629873</p>
              <md-icon>error</md-icon>
              <md-divider></md-divider>
            </md-list-item>
         </md-list>
      </md-card>
   </div>

   <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
   <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
   <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
   <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
   <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
   <script language="javascript">
      angular
         .module('firstApplication', ['ngMaterial'])
         .controller('themeController', themeController)
         .config(function($mdThemingProvider) {
            $mdThemingProvider.theme('customTheme') 
               .primaryPalette('grey')
               .accentPalette('orange')
               .warnPalette('red');
            });

         function themeController ($scope) {
         }    
   </script>      

</body>
</html>