Matériau angulaire - Grilles
le md-grid-list, une directive angulaire, est un composant permettant de disposer du contenu pour différentes tailles d'écran. Une grille comporte 12 colonnes dans l'écran de taille de bureau, 8 dans l'écran de taille de tablette et 4 dans l'écran de taille de téléphone, où chaque taille a des marges et des gouttières prédéfinies. Les cellules sont disposées de manière séquentielle dans une rangée, dans l'ordre où elles sont définies.
Les attributs
Le tableau suivant répertorie les paramètres et la description des différents attributs de md-grid-list.
| Sr. Non | Paramètre et description |
|---|---|
| 1 | * md-cols C'est pour le nombre de colonnes de la grille. |
| 2 | * md-row-height Un des
|
| 3 | md-gutter La quantité d'espace entre les tuiles en unités CSS (1px par défaut). |
| 4 | md-on-layout Expression à évaluer après mise en page. L'objet Event est disponible en tant que $ event et contient des informations sur les performances. |
Exemple
L'exemple suivant montre l'utilisation du md-grid-list directive et aussi les utilisations de la grille.
am_grid.htm
<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">
<script language = "javascript">
angular
.module('firstApplication', ['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 = "firstApplication">
<div id = "gridContainer" ng-controller = "gridController as ctrl" ng-cloak>
<md-content layout-padding>
<md-grid-list
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-list>
</md-content>
</div>
</body>
</html>Résultat
Vérifiez le résultat.
Redimensionnez l'écran pour voir l'effet.