Angular Material Layout

by pankaj agrawal

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-aria.js"></script>
<link rel="stylesheet" href="http://localhost:8080/angular-material.css">
<script src="http://localhost:8080/angular-material.js"></script>
<div class="wrapper"
     layout="column"
     layout-fill
     ng-app="sandbox">
    
    <header>
        <md-content class="md-whiteframe-z1"
                    layout="row"
                    layout-align="center center">
            <h1>Header</h1>
        </md-content>
    </header>
    
    <div flex
    
         layout layout-margin>
         
        <main flex-gt-sm="60" flex-order-gt-md="2"
              layout="column">
            <md-content flex layout="row" layout-padding ><rzslider rz-slider-model="slider.value"
          rz-slider-options="slider.options"></rzslider>
        
                 <h1 class="md-title">
                     Main Content
                </h1>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu lectus vel libero porta dictum. Donec a lorem consequat, fermentum lorem sed, sollicitudin neque. Pellentesque placerat interdum orci, eget sodales tortor vehicula id.
                </p>
            </md-content>
        </main>
        
        <div flex-gt-sm="40" flex-order-gt-md="1" layout="column" class="imgCntr" >
                <img src="http://placehold.it/600x400/4682B4/ffffff" />
        </div>
        
        
    </div>
    
    <footer>
        <md-toolbar layout="row"
                    layout-align="center center">
            <h4>Footer</h4>
        </md-toolbar>
    </footer>
    
</div>

CSS

/* *[flex] > img {
    max-width: 100%;
}
 */
.wrapper {
    background: peachpuff;
}

header > md-content {
    background: lavender;
}

main > md-content {
    background: ivory;
}

.imgCntr {
    background-color: green;
}

JavaScript

angular.module('sandbox', ['ngMaterial'], '$scope');

$scope.slider = { //requires angular-bootstrap to display tooltips
  value: 5,
  options: {
    floor: 0,
    ceil: 10,
    showTicks: true,
    ticksTooltip: function(v) {
      return 'Tooltip for ' + v;
    }
  }
};