Material Design simples e rapido com AngularJS
-
Upload
henrique-limas -
Category
Technology
-
view
219 -
download
2
Transcript of Material Design simples e rapido com AngularJS
ANGULAR MATERIALMaterial Design simples e rápido com AngularJS
HENRIQUE LIMASgoogle.com/+HenriqueRamosLimas
github/HenriqueLimas [email protected]
E VOCÊS?
MATERIAL DESIGN
O QUE É O MATERIAL DESIGN?
ÊNFASE NA AÇÃO DO USUÁRIO
COMPONENTES
https://www.google.com/design/spec/material-design/introduction.html
ANGULARJS
FRAMEWORK JAVASCRIPT
Desenvolvido pelo Google
Aplicações Single page
Extender o HTML
CARACTERÍSTICAS
DATA BINDING
AngularJSOutros sistemas de template
EXPRESSIONS
!
!
<span> 40 + 2= {{ 40 + 2 }} </span>
Expressions
!
40 + 2 = 42
DIRETIVAS
<div role="tabpanel"> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"> <a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> <li role="presentation"> <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li> ... </ul> ! <!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home">...</div> <div role="tabpanel" class="tab-pane" id="profile">...</div> ... </div> </div> !
!
Diretivas
<my-tabs> <my-panel title="Home"></my-panel> <my-panel title="Profile"></my-panel> … </my-tabs> !!!!!!!!
Diretivas
Módulos
Controllers
Serviços
Diretivas
E O QUE MAIS?
Filtros
Sistema de rotas
Validação do Form
Uma ótima comunidade
ANGULAR MATERIAL
ANGULAR MATERIAL
AngularJS
+
Componentes UI
Serviços dos componentes
Efeitos UX
Suporte a ARIA
CSS de layout
Temas
COMPONENTES UI
console.log(‘Demo’);
OMG!
LAYOUT CSS
<div layout="row"> <div>Eu estou a esquerda.</div> <div>Eu estou a direita.</div> </div> !<div layout="column"> <div>Eu estou em cima.</div> <div>Eu estou em baixo.</div> </div> !!!!!!
Layout
ATRIBUTO FLEX
<div layout="row"> <div flex> … </div> ! <div flex> … </div> ! <div flex> … </div> </div> !!!!!
Flex
ATRIBUTO FLEX
!<div layout="row"> <div flex="33"> </div> ! <div flex="55"> </div> ! <div flex> </div> </div> !!!!!
Flex
COMO E ONDE APRENDER MAIS?
console.log(‘Obrigado’);
google.com/+HenriqueRamosLimas github/HenriqueLimas [email protected]