Material Design for AngularJS

José Fdo. Durán

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.

Que es Material Design?

Google Material Design

  • Liderado por Matias Duarte
  • El nuevo diseño que Google esta implementando en todas sus aplicaciones, sin importar el dispositivo
  • Tendencia de diseño para apps

En AngularJS?

  • La primera referencia fue "Twitter Bootstrap"
  • Diseñado especialmente para AngularJS
  • Con animaciones incluidas
  • Altamente configurable y personalizable
  • Crece cada día
  • Desde ya con soporte para ng2
  • basado en paper components de Polymerjs

Componentes

Soporte?

  • Evergreen Browsers
  • Box Model: Flex
  • Animaciones con CSS transforms & animate

Flex Model

  • La nueva forma de diagramación
  • Simple y declarativa
  • No mas DIV's anidados eternamente
<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>

Detalles del Flex model

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.

Detalles del Flex model

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!

Responsive design?

  • Modificadores para distintas pantallas
  • Personaliza la diagramación dependiendo de la pantalla
  • Media Queries sin la declaración en CSS
  • los modificadores están disponibles para cada atributo disponible: layout / layout-align / flex-order / offset

Personalización de colores

angular.module('myApp', ['ngMaterial'])
.config(function($mdThemingProvider) {
  $mdThemingProvider.theme('default')
    .primaryPalette('pink')
    .accentPalette('orange');
});

Instalando

<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

  • Source y API docs
  • Ejemplos y CodePen

Starter points to play

y ngAnimate?

Motor de animación simple

  • Se basa en CSS transforms y animate
  • Angular crea clases especiales para nosotros
  • No todas las core directives tienen soporte

Core Directives supported

Como funciona?

  • Angular injecta clases
  • Las clases definen key entry points o keyFrames en el tiempo
  • Depende de nosotros añadir las clases y sus propiedades para producir la animación deseada

Clases Keyframes

  • .ng-enter
  • .ng-enter.ng-enter-active
  • .ng-leave
  • .ng-leave.ng-leave-active

Preguntas?

Referencias:

  • https://www.google.com/design/spec/material-design/introduction.html
  • https://material.angularjs.org/
  • https://github.com/angular/material-start
  • https://docs.angularjs.org/api/ngAnimate

Material Design for AngularJS

By Jose Fernando Duran

Made with Slides.com

Material Design for AngularJS

  • 1,698

More from Jose Fernando Duran