srdone/README.md

## README.md

      
    Raw
  

              README.md
            
          
    An example of angular material design layout with a collapsible sidenav.

  
## index.html
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.css" />
  <!-- Angular Material Dependencies -->
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-aria.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.js"></script>
  <script src="script.js"></script>
</head>

<!-- Use 'layout' to specify a row or column layout for div elements -->

<body ng-app="materialDesignApp" ng-controller="MainCtrl" layout="row">

  <md-sidenav
    md-component-id="left"
    md-is-locked-open="$mdMedia('gt-md')"
    layout="column"
    class="md-sidenav-left md-whiteframe-z3">
    <md-toolbar layout-align="center center">
      Sidenav Header
    </md-toolbar>
    <md-content layout="column">
      <md-button ng-click="close()" hide-gt-md>
        Close Sidenav
      </md-button>
      <md-button ng-repeat="item in items" ng-click="notifyClicked(item)">
        {{item}}
      </md-button>
    </md-content>
  </md-sidenav>

  <div layout="column">

    <md-toolbar layout="row" layout-align="start center">
      <md-button ng-click="open()" hide-gt-md>
        <md-icon md-svg-src="https://google.github.io/material-design-icons/navigation/svg/ic_menu_24px.svg"></md-icon>
      </md-button>
      <div flex layout-margin>Main Toolbar Stuff</div>
    </md-toolbar>

    <md-content layout-margin>

      <h3>An example of Angular Material</h3>

      <p ng-repeat="item in items">
        This is a much longer paragraph. Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
        ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>

    </md-content>

  </div>

</body>

</html>

## script.js
app = angular.module('materialDesignApp', ['ngMaterial', 'ngAria']);

app.controller('MainCtrl', function($scope, $mdSidenav, $mdToast) {

  $scope.items = function () {
    var items = [];
    for (i = 0; i < 20; i++) {
      items.push('item ' + i);
    }
    return items;
  }();

  $scope.notifyClicked = function (x) {
    $mdToast.showSimple(x + ' clicked');
  };

  $scope.close = function () {
    $mdSidenav('left').close().then(function () {
      $mdToast.showSimple('Sidenav Closed');
    });
  };

  $scope.open = function () {
    $mdSidenav('left').open().then(function () {
      $mdToast.showSimple('Sidenav Opened');
    });
  };

});
	<!DOCTYPE html>
	<html>

	<head>
	<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.css" />
	<!-- Angular Material Dependencies -->
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-aria.min.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.js"></script>
	<script src="script.js"></script>
	</head>

	<!-- Use 'layout' to specify a row or column layout for div elements -->

	<body ng-app="materialDesignApp" ng-controller="MainCtrl" layout="row">

	<md-sidenav
	md-component-id="left"
	md-is-locked-open="$mdMedia('gt-md')"
	layout="column"
	class="md-sidenav-left md-whiteframe-z3">
	<md-toolbar layout-align="center center">
	Sidenav Header
	</md-toolbar>
	<md-content layout="column">
	<md-button ng-click="close()" hide-gt-md>
	Close Sidenav
	</md-button>
	<md-button ng-repeat="item in items" ng-click="notifyClicked(item)">
	{{item}}
	</md-button>
	</md-content>
	</md-sidenav>

	<div layout="column">

	<md-toolbar layout="row" layout-align="start center">
	<md-button ng-click="open()" hide-gt-md>
	<md-icon md-svg-src="https://google.github.io/material-design-icons/navigation/svg/ic_menu_24px.svg"></md-icon>
	</md-button>
	<div flex layout-margin>Main Toolbar Stuff</div>
	</md-toolbar>

	<md-content layout-margin>

	<h3>An example of Angular Material</h3>

	<p ng-repeat="item in items">
	This is a much longer paragraph. Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
	ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>

	</md-content>

	</div>

	</body>

	</html>
	app = angular.module('materialDesignApp', ['ngMaterial', 'ngAria']);

	app.controller('MainCtrl', function($scope, $mdSidenav, $mdToast) {

	$scope.items = function () {
	var items = [];
	for (i = 0; i < 20; i++) {
	items.push('item ' + i);
	}
	return items;
	}();

	$scope.notifyClicked = function (x) {
	$mdToast.showSimple(x + ' clicked');
	};

	$scope.close = function () {
	$mdSidenav('left').close().then(function () {
	$mdToast.showSimple('Sidenav Closed');
	});
	};

	$scope.open = function () {
	$mdSidenav('left').open().then(function () {
	$mdToast.showSimple('Sidenav Opened');
	});
	};

	});