Date post: | 10-May-2015 |
Category: |
Technology |
Upload: | rob-dodson |
View: | 6,210 times |
Download: | 0 times |
Unlock the next era of UIDeveloping with Polymer
+RobDodson @rob_dodson
<h1> !<ul><p>
<animated-pages> !<drawer-panel><icon-button>
http://bit.ly/1jkTo5c
core-elementsImage:
<core-toolbar>
<core-header-panel>
<core-drawer-panel>
<core-menu>
<core-icon>
<core-overlay>
Visual
<core-ajax>
<core-localstorage>
<core-range>
<core-shared-lib>
<core-media-query>
<core-iconset>
Non-visual
And many more…Image: http://bit.ly/1kuX889,
paper-elements
Agenda
Layout Material TransitionsTheming
Layout
<core-toolbar>A basic container for controls like tabs or buttons
<link rel=“import” href=“core-toolbar.html”>
<core-toolbar>A basic container for controls like tabs or buttons
<core-toolbar> <div>I/O 2014</div> </core-toolbar>
<link rel=“import” href=“core-toolbar.html”>
<core-toolbar>A basic container for controls like tabs or buttons
<core-toolbar> <core-icon-button icon=“menu”> </core-icon-button> <div>I/O 2014</div> </core-toolbar>
<link rel=“import” href=“core-toolbar.html”>
<core-toolbar>A basic container for controls like tabs or buttons
<core-toolbar class=“tall”> <core-icon-button icon=“menu”> </core-icon-button> <div class>I/O 2014</div> </core-toolbar>
<link rel=“import” href=“core-toolbar.html”>
<core-toolbar>A basic container for controls like tabs or buttons
A simple container with a header section and a content section
<core-header-panel>
<core-header-panel> <core-toolbar> <core-icon-button icon=“menu"> </core-icon-button> I/O 2014 </core-toolbar> <div class=“content”>…</div> </core-header-panel>
A simple container with a header section and a content section
<core-header-panel> <core-toolbar> <core-icon-button icon=“menu"> </core-icon-button> I/O 2014 </core-toolbar> <div class=“content”>…</div> </core-header-panel>
<core-header-panel>
A simple container with a header section and a content section
<core-header-panel> <core-toolbar> <core-icon-button icon=“menu"> </core-icon-button> I/O 2014 </core-toolbar> <div class=“content”>…</div> </core-header-panel>
<core-header-panel>
A simple container with a header section and a content section
<core-header-panel> <core-toolbar> <core-icon-button icon=“menu"> </core-icon-button> I/O 2014 </core-toolbar> <div class=“content”>…</div> </core-header-panel>
<core-header-panel>
<core-header-panel mode=“scroll”> <core-toolbar> <core-icon-button icon=“menu"> </core-icon-button> I/O 2014 </core-toolbar> <div class=“content”>…</div> </core-header-panel>
Toolbar will scroll with the page
<core-header-panel>
<core-header-panel mode=“waterfall-tall”> <core-toolbar class=“tall animate”> <core-icon-button icon=“menu"> </core-icon-button> I/O 2014 </core-toolbar> <div class=“content”>…</div> </core-header-panel>
Toolbar will shrink on scroll
<core-header-panel>
A <core-scroll-header-panel> provides an additional condenses attribute to create a cross-fade effect
<core-scroll-header-panel condenses> <core-toolbar class=“tall" animate> <core-icon-button icon=“arrow-back"> </core-icon-button> <div class="bottom indent title”> Title </div> ... </core-toolbar> </core-scroll-header-panel>
Image: http://bit.ly/1b3E67J
Responsive layout
A responsive container that combines a left- or right-side drawer panel and a main content area.
<core-drawer-panel>
<core-drawer-panel> <div drawer> Drawer panel... </div> <div main> Main panel... </div> </core-drawer-panel>
<core-drawer-panel> <div drawer> Drawer panel... </div> <div main> Main panel... </div> </core-drawer-panel>
A responsive container that combines a left- or right-side drawer panel and a main content area.
<core-drawer-panel>
<core-drawer-panel> <div drawer> Drawer panel... </div> <div main> Main panel... </div> </core-drawer-panel>
A responsive container that combines a left- or right-side drawer panel and a main content area.
<core-drawer-panel>
Layout attributes
Layout attributes add declarative support for CSS flexbox
<div layout horizontal> <div>One</div> <div>Two</div> <div>Three</div> </div>
Horizontal Layout
One Two Three
<div layout horizontal> <div>One</div> <div flex>Two (flex)</div> <div>Three</div> </div>
Horizontal Layout
One Two (flex) Three
Flex to fill available space
<div layout vertical> <div>One</div> <div flex>Two</div> <div>Three</div> </div>
Vertical Layout One
Two (flex)
Three
<div layout horizontal> <div flex three>Alpha</div> <div>Beta</div> <div flex two>Gamma</div> </div>
Flex Ratios
Alpha Beta Gamma
<div layout horizontal center-justified> <div>Centered</div> </div>
Axis Centering Centered
Main Axis
<div layout horizontal center> <div>Centered</div> </div>
Axis Centering
Centered
Cross Axis
<div layout horizontal center center-justified> <div>OMG, Centered!</div> </div>
The Holy Grail
OMG, Centered!
Material controls
<paper-checkbox></paper-checkbox>
<paper-toggle-button></paper-toggle-button>
<paper-input floatinglabel label="Type only numbers... (floating)" validate="^[0-9]*$" error="Input is not a number!"> </paper-input>
<paper-tabs> <paper-tab>KNOWLEDGE</paper-tab> <paper-tab>HISTORY</paper-tab> <paper-tab>FOOD</paper-tab> </paper-tabs>
Less markup. Less CSS. Less clutter.
Material effects
<div class=“card”> <img src=“science.svg”> <paper-ripple fit></paper-ripple> </div>
A reactive ink effect for indicating touch and mouse actions
<paper-ripple>
<div class=“card”> <paper-shadow z=“5” animated> </paper-shadow> </div>
A dynamic shadow for conveying z-depth and spatial relationships
<paper-shadow>
polymer-project.org
Theming
<paper-slider min=“0” max=“100”> </paper-slider>
allows you to style nodes internal to an element’s shadow dom
::shadow
paper-slider::shadow #sliderKnobInner { background-color: #f4b400; }
<paper-slider min=“0” max=“100”> </paper-slider>
allows you to style nodes internal to an element’s shadow dom
::shadow
.red-theme /deep/ #ink { background-color: #E91E63; }
styles will pierce all shadow boundaries
/deep/
With ::shadow and /deep/ you can apply site wide themes
source: ebidel.github.io/material-playground
You’re breaking the style encapsulation!Angry Developer
<core-style>
<core-style id=“tomato-theme“> :host { display: block; color: white; background-color: tomato; } </core-style>
EXPERIMENTAL
<polymer-element name="x-foo" noscript> <template> <core-style ref=“tomato-theme“> </core-style> <content></content> </template> </polymer-element>
<core-style id=“tomato-theme“> :host { display: block; color: white; background-color: tomato; } </core-style>
EXPERIMENTAL
<polymer-element name="x-foo" noscript> <template> <core-style ref=“tomato-theme“> </core-style> <content></content> </template> </polymer-element>
<core-style id=“tomato-theme“> :host { display: block; color: white; background-color: tomato; } </core-style>
EXPERIMENTAL
Style producer
Style consumer
<polymer-element name="x-foo" noscript> <template> <core-style ref=“tomato-theme“> </core-style> <content></content> </template> </polymer-element>
<core-style id=“tomato-theme“> :host { display: block; color: white; background-color: tomato; } </core-style>
Hello from <x-foo>
EXPERIMENTAL
EXPERIMENTAL
<core-style id=“blue-theme“> :host { display: block; color: white; background-color: {{myColor}}; } </core-style>
Style binding
EXPERIMENTAL
<script> CoreStyle.g.myColor = 'steelblue'; </script>
<core-style id=“blue-theme“> :host { display: block; color: white; background-color: {{myColor}}; } </core-style>
<script> CoreStyle.g.myColor = 'steelblue'; </script>
Hello from <x-foo>
EXPERIMENTAL
<core-style id=“blue-theme“> :host { display: block; color: white; background-color: {{myColor}}; } </core-style>
Transitions
A pluggable system for creating smooth transitions from one view to the next.
<core-animated-pages>
<core-animated-pages selected=“0” transitions="slide-from-right"> <section>…</section> <section>…</section> <section>…</section> </core-animated-pages>
Designer
github.com/Polymer/designer+
polymer-project.org
What did we learn
Layout
Material
Theming
Transitions
Scaffold your application with core-* elements
Material
Theming
Transitions
Layout
Create beautiful UIs using paper-* elements
Theming
Transitions
Layout
Material
Theme your app with ::shadow, /deep/ and core-style
Transitions
Layout
Material
Theming
Move between states with core-animated-pages
polymer-project.org
<what-next>Get started at polymer-project.org
Session Feedback http://goo.gl/sUiJbx
youtube.com/GoogleDevelopers
+RobDodson @rob_dodson
Thank you!