Materiale angolare - Layout
Direttiva layout
La direttiva layout su un elemento contenitore viene utilizzata per specificare la direzione del layout per i suoi figli. Di seguito sono riportati i valori assegnabili per la direttiva layout:
row - Gli articoli sono disposti orizzontalmente con max-height = 100% e max-width è la larghezza degli articoli nel contenitore.
column - Gli articoli sono disposti verticalmente con larghezza massima = 100% e altezza massima è l'altezza degli articoli nel contenitore.
Affinché la progettazione reattiva come il layout venga modificata automaticamente in base alle dimensioni dello schermo del dispositivo, è possibile utilizzare le API di layout elencate nella tabella seguente per impostare la direzione del layout per i dispositivi con larghezza di visualizzazione.
| Suor n | API e larghezza del dispositivo quando il punto di interruzione sostituisce il valore predefinito |
|---|---|
| 1 | layout Imposta la direzione del layout di default a meno che non venga sovrascritta da un altro punto di interruzione. |
| 2 | layout-xs larghezza <600 px |
| 3 | layout-gt-xs larghezza> = 600 px |
| 4 | layout-sm 600px <= larghezza <960px |
| 5 | layout-gt-sm larghezza> = 960 px |
| 6 | layout-md 960px <= larghezza <1280px |
| 7 | layout-gt-md larghezza> = 1280 px |
| 8 | layout-lg 1280px <= larghezza <1920px |
| 9 | layout-gt-lg larghezza> = 1920 px |
| 10 | layout-xl larghezza> = 1920 px |
Esempio
L'esempio seguente mostra l'uso della direttiva layout e anche gli usi del layout.
am_layouts.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">
<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>Risultato
Verifica il risultato.
Direttiva Flex
La direttiva flex su un elemento contenitore viene utilizzata per personalizzare le dimensioni e la posizione degli elementi. Definisce il modo in cui l'elemento deve regolare la sua dimensione rispetto al suo contenitore principale e agli altri elementi all'interno del contenitore. Di seguito sono riportati i valori assegnabili per la direttiva flex:
multiples of 5 - 5, 10, 15 ... 100
33 - 33%
66 - 66%
Esempio
L'esempio seguente mostra l'uso della direttiva flex e anche gli usi di flex.
am_flex.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">
<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>Risultato
Verifica il risultato.