Skip to content

Instantly share code, notes, and snippets.

@matt-daniel-brown

matt-daniel-brown/angular-material-layout-sandbox.markdown

Created November 28, 2018 01:16
Show Gist options
  • Save matt-daniel-brown/5c11efce6650085d4c65ed60e2081789 to your computer and use it in GitHub Desktop.
Save matt-daniel-brown/5c11efce6650085d4c65ed60e2081789 to your computer and use it in GitHub Desktop.
Download ZIP
Angular Material Layout Sandbox
Raw
angular-material-layout-sandbox.markdown
Raw
index.html
<html lang="en" ng-app="StarterApp">
<head>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
<meta name="viewport" content="initial-scale=1" />
</head>
<body layout="column" ng-controller="AppCtrl">
<md-toolbar layout="row">
<button ng-click="toggleSidenav('left')" hide-gt-sm class="menuBtn">
<span class="visually-hidden">Menu</span>
</button>
<h1 class="md-toolbar-tools" layout-align-gt-sm="center">Angular Material Layout Sandbox</h1>
</md-toolbar>
<div layout="row" flex>
<md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')">
</md-sidenav>
<div layout="column" flex id="content">
<md-content layout="column" flex class="md-padding">
<div style="margin-top: 200px;">
<label for="first_name">First Name</label>
<input type="text" id="first_name">
</div>
<md-input-container>
<label>Last Name</label>
<input type="text">
</md-input-container>
</md-content>
</div>
</div>
<!-- Angular Material Dependencies -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.js"></script>
</body>
</html>
Raw
script.js
var app = angular.module('StarterApp', ['ngMaterial']);
app.controller('AppCtrl', ['$scope', '$mdSidenav', function($scope, $mdSidenav){
$scope.toggleSidenav = function(menuId) {
$mdSidenav(menuId).toggle();
};
}]);
Raw
style.css
.menuBtn {
background-color: transparent;
border: none;
height: 38px;
margin: 16px 0 0 16px;
width: 36px;
}
md-toolbar h1 {
font-weight: normal;
}
md-list .md-button {
color: inherit;
font-weight: 500;
text-align: left;
width: 100%;
}
/* Using Data-URI converted from svg until <md-icon> becomes available
https://github.com/google/material-design-icons
*/
.menuBtn {
background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI0IDI0IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGcgaWQ9IkhlYWRlciI+CiAgICA8Zz4KICAgICAgICA8cmVjdCB4PSItNjE4IiB5PSItMjIzMiIgZmlsbD0ibm9uZSIgd2lkdGg9IjE0MDAiIGhlaWdodD0iMzYwMCIvPgogICAgPC9nPgo8L2c+CjxnIGlkPSJMYWJlbCI+CjwvZz4KPGcgaWQ9Ikljb24iPgogICAgPGc+CiAgICAgICAgPHJlY3QgZmlsbD0ibm9uZSIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ii8+CiAgICAgICAgPHBhdGggZD0iTTMsMThoMTh2LTJIM1YxOHogTTMsMTNoMTh2LTJIM1YxM3ogTTMsNnYyaDE4VjZIM3oiIHN0eWxlPSJmaWxsOiNmM2YzZjM7Ii8+CiAgICA8L2c+CjwvZz4KPGcgaWQ9IkdyaWQiIGRpc3BsYXk9Im5vbmUiPgogICAgPGcgZGlzcGxheT0iaW5saW5lIj4KICAgIDwvZz4KPC9nPgo8L3N2Zz4=) no-repeat center center;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment