Desarrollador web desde 1999 enfocado a Front end y con experiencia en algunas tecnologías de Backend.
Actualmente Lead Fron End Developer en Talos Digital con AngularJS, NodeJS, Firebase y MongoDB.
<div layout="row">
<div>I'm left.</div>
<div>I'm right.</div>
</div>
<div layout="column">
<div>I'm above.</div>
<div>I'm below.</div>
</div>
Flex
<div layout="row">
<div flex>
[flex]
</div>
<div flex>
[flex]
</div>
<div flex hide-sm>
[flex]
</div>
</div>
Flex percent values y wrap content
<div layout="row" layout-wrap>
<div flex="33">
[flex="33"]
</div>
<div flex="55">
[flex="55"]
</div>
<div flex>
[flex]
</div>
<div flex="66">
[flex]
</div>
<div flex="33">
[flex]
</div>
</div>
El contenido puede ocupar nuevas líneas si sobrepasa el 100% y evitar un "fit content"
Cada contendor con el atributo flex puede tener un valor o llenar el espacio faltante con un fit in window por defecto.
Flex order atribute
<div layout="row" layout-margin>
<div flex flex-order="3">
[flex-order="3"]
</div>
<div flex flex-order="2">
[flex-order="2"]
</div>
<div flex flex-order="1">
[flex-order="1"]
</div>
</div>
Hack: layout-fill attribute
No puede llenar un contenido? use este atributo
Puede hacer un "override" del orden con este atributo
Experience: los elementos no respetan dimensiones
Usted ha abusado del atributo layout, use un DIV simple!
angular.module('myApp', ['ngMaterial'])
.config(function($mdThemingProvider) {
$mdThemingProvider.theme('default')
.primaryPalette('pink')
.accentPalette('orange');
});
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.0/angular-material.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.0/angular-material.min.js"></script>
var app = angular.module('StarterApp', ['ngMaterial']);
index.html
app.js
Navegando la documentación
ngRepeat enter, leave and move
ngView enter and leave
ngInclude enter and leave
ngSwitch enter and leave
ngIf enter and leave
ngClass add and remove (the CSS class(es) present)
form & ngModel add and remove (dirty, pristine, valid, invalid & all other validations)
ngMessages add and remove (ng-active & ng-inactive)
ngMessage enter and leave