Angular Material - Angular Material Layouts - Angular Material Tutorial



What is Layout in Angular Material?

  • Layout directive on a container element is used for the specification of the layout direction for its children.
  • The following are the assignable values:
    • Row - Items are arranged horizontally with max-height = 100% and max-width is the width of the items in the container.
    • Column - Items are arranged vertically with max-width = 100% and max-height is the height of the items in the container.
    learn angular material tutorials - layout

    learn angular material tutorials - layout Example

  • For responsive design such as layout to be automatically changed depending upon the device screen size, following layout APIs can be used to set the layout direction for devices with view widths.
Sr.No API & Device width when breakpoint overrides default
1

layout

Sets default layout direction unless overridden by another breakpoint.

2

layout-xs

width < 600px

3

layout-gt-xs

width >= 600px

4

layout-sm

600px <= width < 960px

5

layout-gt-sm

width >= 960px

6

layout-md

960px <= width < 1280px

7

layout-gt-md

width >= 1280px

8

layout-lg

1280px <= width < 1920px

9

layout-gt-lg

width >= 1920px

10

layout-xl

width >= 1920px

Example:

  • The example shows the uses of the layout directive to showcase uses of layout.
<html lang="en" >
   <head>
      <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
	  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
	  <style>
	   .box {         
		  color:white;
		  padding:10px;
		  text-align:center;
		  border-style: inset;
	   }
	   .green {
	       background:green;
	   }
	   .blue {
	       background:blue;
	   }
	  </style>
      <script language="javascript">
          angular
            .module('firstApplication', ['ngMaterial'])
            .controller('layoutController', layoutController);

          function layoutController ($scope) {            
          }	  
      </script>      
   </head>
   <body ng-app="firstApplication"> 
      <div id="layoutContainer" ng-controller="layoutController as ctrl" style="height:100px;" ng-cloak>
         <div layout="row" layout-xs="column">
            <div flex class="green box">Row 1: Item 1</div>
            <div flex="20" class="blue box">Row 1: Item 2</div>
         </div>
         <div layout="column" layout-xs="column">
            <div flex="33" class="green box">Column 1: item 1</div>
            <div flex="66" class="blue box">Column 1: item 2</div>
         </div>
      </div>
   </body>
</html>
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy angular material tutorial , angular 4 material , angular material2 , angular material example team

Output

Related Tags - angular material , angular 2 material , angular material 2 , angular material design , material angular

Flex Directive:

  • Flex directive on a container element is used to customize the size and position of elements.
  • Flex directive defines the way how the element is to adjust its size with respect to its parent container and the other elements within the container.
  • Following are the assignable values:
    • multiples of 5 - 5, 10, 15 ... 100
    • 33 - 33%
    • 66 - 66%

Example:

  • The example shows the use of flex directive to showcase uses of flex.
<html lang="en" >
   <head>
      <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
	  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
	  <style>
	   .box {         
		  color:white;
		  padding:10px;
		  text-align:center;
		  border-style: inset;
	   }
	   .green {
	       background:green;
	   }
	   .blue {
	       background:blue;
	   }
	  </style>
      <script language="javascript">
          angular
            .module('firstApplication', ['ngMaterial'])
            .controller('layoutController', layoutController);

          function layoutController ($scope) {            
          }	  
      </script>      
   </head>
   <body ng-app="firstApplication"> 
      <div id="layoutContainer" ng-controller="layoutController as ctrl" layout="row" style="height:100px;" ng-cloak layout-wrap>
         <div flex="30" class="green box">
            [flex="30"]
         </div>
         <div flex="45" class="blue box">
            [flex="45"]
         </div>
         <div flex="25" class="green box">
            [flex="25"]
         </div>
         <div flex="33" class="green box">
            [flex="33"]
         </div>
         <div flex="66" class="blue box">
            [flex="66"]
         </div>
         <div flex="50" class="blue box">
            [flex="50"]
         </div>
         <div flex class="green box">
            [flex]
         </div>
      </div>
   </body>
</html>
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy angular material tutorial , angular 4 material , angular material2 , angular material example team

Output


This tutorial provides most of the basics of all the below related informations such as angular material design , material design angular , angular material table , angularjs material , material angular , angular material icons , angular 2 material design , angular material template , angular materialize , angular material theme , angular material layout , material design angular 2 , angular material demo , angular material dialog , angular material form , angular material button , material angular 2 , angular material datepicker , angular material data table , angular material tutorial , angular material login form , material for angular 2 , angular material data grid , material ui angular , angular material calendar , angular material design table , angular material grid , google angular material , angular material components , angular 2 material ui , angular material autocomplete example , material ui angular 2 , angular material 2 demo , angular2 material demo , angular material template free , angular material design tutorial , angularjs material tutorial , material design for angular 2 , angular material tabs example , angular material ui , table angular material , angular material angular 2 , angular material layout align , what is angular material , angular material tabs , angular2 material example , angular 2 material tutorial , angular material login page , angular 2 material demo , angular material cdn , angular material design example , angularjs material design template , material angularjs , angular material grid list , angular material search bar , angular material vs bootstrap , angular material js , angular material range slider , angular material sidenav example , angular material form example , material angular icons , angular material datepicker example , angular material design icons , angular material design template , angular material bootstrap , materialize angular , angular material template free download , bootstrap material design angular , angular material table example

Related Searches to Angular Material Layout Directive