English 中文(简体)
Angular Material Tutorial

Selected Reading

Angular Material - Grids
  • 时间：2024-09-17

Angular Material - Grids

Previous Page Next Page  

The md-grid-pst, an Angular directive, is a component for laying out content for varying screen sizes. A grid has 12 columns in the desktop size screen, 8 in the tablet size screen, and 4 in the phone size screen, where each size have predefined margins and gutters. Cells are laid out in sequential manner in a row, in the order they are defined.

Attributes

The following table psts out the parameters and description of the different attributes of md-grid-pst.

Sr.No Parameter & Description
1

* md-cols

This is for the number of columns in the grid.
2

* md-row-height

One of

    CSS length − Fixed height rows (eg. 8px or 1rem).

    {width}:{height} − Ratio of width to height (eg. md-row-height = "16:9").

    "fit" − Height will be determined by subspaniding the available height by the number of rows.
3

md-gutter

The amount of space between tiles in CSS units (default 1px).
4

md-on-layout

Expression to evaluate after layout. Event object is available as $event, and contains performance information.

Example

The following example shows the use of the md-grid-pst directive and also the uses of grid.

am_grid.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">
      <script language = "javascript">
         angular
            .module( firstApppcation , [ ngMaterial ])
            .controller( gridController , gridController);

         function gridController ($scope) {
            var COLORS = [
                #ffebee ,  #ffcdd2 ,  #ef9a9a ,  #e57373 ,  #ef5350 ,  #f44336 ,
                #e53935 ,  #d32f2f ,  #c62828 ,  #b71c1c ,  #ff8a80 ,  #ff5252 ,
                #ff1744 ,  #d50000 ,  #f8bbd0 ,  #f48fb1 ,  #f06292 ,  #ec407a ,
                #e91e63 ,  #d81b60 ,  #c2185b ,  #ad1457 ,  #880e4f ,  #ff80ab ,
                #ff4081 ,  #f50057 ,  #c51162 ,  #e1bee7 ,  #ce93d8 ,  #ba68c8 ,
                #ab47bc ,  #9c27b0 ,  #8e24aa ,  #7b1fa2 ,  #4a148c ,  #ea80fc ,
                #e040fb ,  #d500f9 ,  #aa00ff ,  #ede7f6 ,  #d1c4e9 ,  #b39ddb ,
                #9575cd ,  #7e57c2 ,  #673ab7 ,  #5e35b1 ,  #4527a0 ,  #311b92 ,
                #b388ff ,  #7c4dff ,  #651fff ,  #6200ea ,  #c5cae9 ,  #9fa8da ,
                #7986cb ,  #5c6bc0 ,  #3f51b5 ,  #3949ab ,  #303f9f ,  #283593 ,
                #1a237e ,  #8c9eff ,  #536dfe ,  #3d5afe ,  #304ffe ,  #e3f2fd ,
                #bbdefb ,  #90caf9 ,  #64b5f6 ,  #42a5f5 ,  #2196f3 ,  #1e88e5 ,
                #1976d2 ,  #1565c0 ,  #0d47a1 ,  #82b1ff ,  #448aff ,  #2979ff ,
                #2962ff ,  #b3e5fc ,  #81d4fa ,  #4fc3f7 ,  #29b6f6 ,  #03a9f4 ,
                #039be5 ,  #0288d1 ,  #0277bd ,  #01579b ,  #80d8ff ,  #40c4ff ,
                #00b0ff ,  #0091ea ,  #e0f7fa ,  #b2ebf2 ,  #80deea ,  #4dd0e1 ,
                #26c6da ,  #00bcd4 ,  #00acc1 ,  #0097a7 ,  #00838f ,  #006064 ,
                #84ffff ,  #18ffff ,  #00e5ff ,  #00b8d4 ,  #e0f2f1 ,  #b2dfdb ,
                #80cbc4 ,  #4db6ac ,  #26a69a ,  #009688 ,  #00897b ,  #00796b ,
                #00695c ,  #a7ffeb ,  #64ffda ,  #1de9b6 ,  #00bfa5 ,  #e8f5e9 ,
                #c8e6c9 ,  #a5d6a7 ,  #81c784 ,  #66bb6a ,  #4caf50 ,  #43a047 ,
                #388e3c ,  #2e7d32 ,  #1b5e20 ,  #b9f6ca ,  #69f0ae ,  #00e676 ,
                #00c853 ,  #f1f8e9 ,  #dcedc8 ,  #c5e1a5 ,  #aed581 ,  #9ccc65 ,
                #8bc34a ,  #7cb342 ,  #689f38 ,  #558b2f ,  #33691e ,  #ccff90 ,
                #b2ff59 ,  #76ff03 ,  #64dd17 ,  #f9fbe7 ,  #f0f4c3 ,  #e6ee9c ,
                #dce775 ,  #d4e157 ,  #cddc39 ,  #c0ca33 ,  #afb42b ,  #9e9d24 ,
                #827717 ,  #f4ff81 ,  #eeff41 ,  #c6ff00 ,  #aeea00 ,  #fffde7 ,
                #fff9c4 ,  #fff59d ,  #fff176 ,  #ffee58 ,  #ffeb3b ,  #fdd835 ,
                #fbc02d ,  #f9a825 ,  #f57f17 ,  #ffff8d ,  #ffff00 ,  #ffea00 ,
                #ffd600 ,  #fff8e1 ,  #ffecb3 ,  #ffe082 ,  #ffd54f ,  #ffca28 ,
                #ffc107 ,  #ffb300 ,  #ffa000 ,  #ff8f00 ,  #ff6f00 ,  #ffe57f ,
                #ffd740 ,  #ffc400 ,  #ffab00 ,  #fff3e0 ,  #ffe0b2 ,  #ffcc80 ,
                #ffb74d ,  #ffa726 ,  #ff9800 ,  #fb8c00 ,  #f57c00 ,  #ef6c00 ,
                #e65100 ,  #ffd180 ,  #ffab40 ,  #ff9100 ,  #ff6d00 ,  #fbe9e7 ,
                #ffccbc ,  #ffab91 ,  #ff8a65 ,  #ff7043 ,  #ff5722 ,  #f4511e ,
                #e64a19 ,  #d84315 ,  #bf360c ,  #ff9e80 ,  #ff6e40 ,  #ff3d00 ,
                #dd2c00 ,  #d7ccc8 ,  #bcaaa4 ,  #795548 ,  #d7ccc8 ,  #bcaaa4 ,
                #8d6e63 ,  #eceff1 ,  #cfd8dc ,  #b0bec5 ,  #90a4ae ,  #78909c ,
                #607d8b ,  #546e7a ,  #cfd8dc ,  #b0bec5 ,  #78909c 
            ];
            
            this.colorTiles = (function() {
               var tiles = [];
               for (var i = 0; i < 46; i++) {
                  tiles.push ({
                     color: randomColor(),
                     colspan: randomSpan(),
                     rowspan: randomSpan()
                  });
               }
               return tiles;
            })();
            
            function randomColor() {
               return COLORS[Math.floor(Math.random() * COLORS.length)];
            }
            
            function randomSpan() {
               var r = Math.random();
               if (r < 0.8) {
                  return 1;
               } else if (r < 0.9) {
                  return 2;
               } else {
                  return 3;
               }
            }      
         }                 
      </script>      
   </head>
   
   <body ng-app = "firstApppcation"> 
      <span id = "gridContainer" ng-controller = "gridController as ctrl" ng-cloak>
         <md-content layout-padding>
            <md-grid-pst
               md-cols-gt-md = "12" md-cols-sm = "3" md-cols-md = "8"
               md-row-height-gt-md = "1:1" md-row-height = "4:3"
               md-gutter-gt-md = "16px" md-gutter-gt-sm = "8px" md-gutter = "4px">
               
               <md-grid-tile
                  ng-repeat = "tile in ctrl.colorTiles"
                  ng-style = "{
                      background : tile.color
                  }"
                  md-colspan-gt-sm = "{{tile.colspan}}"
                  md-rowspan-gt-sm = "{{tile.rowspan}}">
               </md-grid-tile>
               
            </md-grid-pst>
         </md-content>
      </span>
   </body>
</html>

Result

Verify the result.