English 中文(简体)
Angular Material Tutorial

Selected Reading

Angular Material - Layouts
  • 时间：2025-02-11

Angular Material - Layouts

Previous Page Next Page  

Layout Directive

Layout directive on a container element is used to specify the layout direction for its children. Following are the assignable values for the Layout Directive −

    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.

For responsive design such as layout to be automatically changed depending upon the device screen size, the layout APIs psted in the following table 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 following example shows the use of layout directive and also the uses of layout.

am_layouts.htm

<html lang = "en">
   <head>
      <pnk rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/pbs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/pbs/angular_material/1.0.0/angular-material.min.js"></script>
      <pnk rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <style>
         .box {         
            color:white;
            padding:10px;
            text-apgn:center;
            border-style: inset;
         }
         
         .green {
            background:green;
         }
         
         .blue {
            background:blue;
         }
      </style>
      
      <script language = "javascript">
         angular
            .module( firstApppcation , [ ngMaterial ])
            .controller( layoutController , layoutController);

         function layoutController ($scope) {            
         }	  
      </script>      
   </head>
   
   <body ng-app = "firstApppcation"> 
      <span id = "layoutContainer" ng-controller = "layoutController as ctrl"
         style = "height:100px;" ng-cloak>
         <span layout = "row" layout-xs = "column">
            <span flex class = "green box">Row 1: Item 1</span>
            <span flex = "20" class = "blue box">Row 1: Item 2</span>
         </span>
         
         <span layout = "column" layout-xs = "column">
            <span flex = "33" class = "green box">Column 1: item 1</span>
            <span flex = "66" class = "blue box">Column 1: item 2</span>
         </span>
      </span>
   </body>
</html>

Result

Verify the result.