Material angular: diseños

Directiva de diseño

La directiva de diseño en un elemento contenedor se usa para especificar la dirección del diseño para sus hijos. A continuación se muestran los valores asignables para la Directiva de diseño:

  • row - Los artículos se organizan horizontalmente con altura máxima = 100% y el ancho máximo es el ancho de los artículos en el contenedor.

  • column - Los artículos están ordenados verticalmente con max-width = 100% y max-height es la altura de los artículos en el contenedor.

Para que el diseño receptivo, como el diseño, se cambie automáticamente según el tamaño de la pantalla del dispositivo, las API de diseño que se enumeran en la siguiente tabla se pueden usar para establecer la dirección del diseño para dispositivos con anchos de vista.

No Señor API y ancho del dispositivo cuando el punto de interrupción anula el valor predeterminado
1

layout

Establece la dirección de diseño predeterminada a menos que sea reemplazada por otro punto de interrupción.
2

layout-xs

ancho <600px
3

layout-gt-xs

ancho> = 600px
4

layout-sm

600px <= ancho <960px
5

layout-gt-sm

ancho> = 960px
6

layout-md

960px <= ancho <1280px
7

layout-gt-md

ancho> = 1280px
8

layout-lg

1280px <= ancho <1920px
9

layout-gt-lg

ancho> = 1920px
10

layout-xl

ancho> = 1920px

Ejemplo

El siguiente ejemplo muestra el uso de la directiva de diseño y también los usos de diseño.

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>

Resultado

Verifica el resultado.

Directiva Flex

La directiva flex en un elemento contenedor se utiliza para personalizar el tamaño y la posición de los elementos. Define la forma en que el elemento va a ajustar su tamaño con respecto a su contenedor principal y los otros elementos dentro del contenedor. Los siguientes son los valores asignables para la directiva flex:

  • multiples of 5 - 5, 10, 15 ... 100

  • 33 - 33%

  • 66 - 66%

Ejemplo

El siguiente ejemplo muestra el uso de la directiva flex y también los usos de 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>

Resultado

Verifica el resultado.