rramona2
11/15/2015 - 1:17 PM

Angular Material Basic App

Angular Material Basic App

style.css
content_copyfile_download
.md-toolbar-tools h1 {
		font-size: inherit;
		font-weight: inherit;
		margin: inherit;
}

md-sidenav.md-locked-open {
		width: 150px !important;
		min-width: 150px !important;
		max-width: 150px !important;
}

.btn1 {
		background: indigo;
		font-size: 14px;
		text-align: center;
		text-transform: uppercase;
		text-decoration: none;
		border: none;
		outline: none;
		padding: 0 6px 0 6px;
		margin: 6px 8px 6px 8px;
		min-width: 88px;
		border-radius: 3px;
		//
scripts
content_copyfile_download
<script src="https://cdn.firebase.com/js/client/2.2.7/firebase.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
script.js
content_copyfile_download
var app = angular.module('StarterApp', ['ngMaterial']);

app.controller('AppController', function($mdSidenav) {
		var vm = this;

		vm.toggleSidenav = function(menuId) {
				$mdSidenav(menuId).toggle();
		};

});
index.html
content_copyfile_download
<html lang="en" ng-app="StarterApp">

<head>
		<meta name="viewport" content="initial-scale=1" />
		<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0-rc1/angular-material.min.css">
</head>

<body layout="column" ng-controller="AppController as vm">
		<md-toolbar layout="row">
				<div class="md-toolbar-tools">
						<md-button ng-click="vm.toggleSidenav('left')" hide-gt-sm class="md-primary">
								<md-icon aria-label="Menu" md-svg-icon="https://s3-us-west-2.amazonaws.com/s.cdpn.io/68133/menu.svg">
								</md-icon>
						</md-button>
						<h1>Equipment Pricing Validation  </h1>
				</div>
		</md-toolbar>
		<div layout="row" flex>
				<md-sidenav layout="column" class="md-sidenav-left md-whiteframe-4dp" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')">
						<md-button class="md-primary">Link 1</md-button>
						<md-button class="md-primary">Link 2</md-button>
						<md-button class="md-primary">Link 3</md-button>
				</md-sidenav>
				<div layout="column" flex id="content">
						<md-content layout="column" flex class="md-padding">
								This Starter Application consists of a Toolbar, SideNav (with two buttons), and Content area.
								<p>This is the content area! </p>
						</md-content>
				</div>
		</div>
		<!-- Angular Material Dependencies -->
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.min.js"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-aria.min.js"></script>

		<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0-rc1/angular-material.min.js"></script>
</body>

</html>
Angular Material Basic App.markdown
content_copyfile_download
  • Rendered
  • Source

Angular Material Basic App

This shell app shows the dependencies

Forked from Marcy Sutton's Pen Angular Material Basic App.

Forked from Marcy Sutton's Pen Angular Material Basic App.

Forked from Marcy Sutton's Pen Angular Material Basic App.

A Pen by ryan ramona on CodePen.

License.