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.