Upload
aleksandra-shkinderova
View
13
Download
3
Tags:
Embed Size (px)
Citation preview
Let’s look at <select>.
<select> <option>Small</option> <option>Medium</option> <option>Large</option></select>
<select id="schwag"> <option disabled>Medium</option> <option disabled>Large</option> <option selected>XX-large</option></select>
<select size=“3” multiple> <option>Do</option> <option>Re</option> <option>Mi</option></select>
<select> <optgroup label=“German cars”> <option>Mercedes</option> <option>Audi</option> </optgroup></select>
<form> <select name=“size”> <option value=“s”>Small</option> <option value=“m”>Medium</option> <option value=“l”>Large</option> </select></form>
Markup can be meaningful again.
<hangout-module> <hangout-chat from="Paul, Addy" profile="1c18a0e"> <hangout-discussion> <hangout-message from="Paul" datetime="2013-07-17T12:02"> <p>Feelin' this Web Components thing.</p> <p>Heard of it?</p> </hangout-message> <hangout-message from="Addy" datetime="2013-07-17T12:12"> ... </hangout-message> <hangout-message>...</hangout-message> ... </hangout-discussion> </hangout-chat> <hangout-chat></hangout-chat> </hangout-module>
Particles
Polyfills.
Sugar
UI Widgets
Shadow DOM, Custom Elements, HTML Imports, Pointer Events...
Some facade and common interface
Comprehensive set (in progress)And Material Design concepts
Philosophy & Goals
Utilize the modern web
platform
Eliminate
boilerplate
Everything is an
element
Support modern browsers
Remove tediousness of building web component-based apps
HTML is cool. DOM feels good.
An icon for example.
<core-icon class="big" icon=“menu” alt=“Menu”></core-icon>
<style> .big { height: 32px; width: 32px; }</style>
More than 700 SVG icons
at the moment
AJAX...using DOM.
<core-ajax url="/api/videos/" params='{"alt":"json"}'></core-ajax>
var ajax = document.querySelector(‘core-ajax');ajax.addEventListener(‘core-response', function(e) { console.log(JSON.parse(this.response));});ajax.go();
Example of core-list
<core-list height="800" data="{{collection}} "> <template> <div class="todo-item"> <input type="checkbox" checked="{{model.checked}}"> {{model.name}} </div> </template></core-list>
<script> Polymer({"collection": [ {"name": "Milk", "checked": false}, {"name": "Bread", "checked": false} {"name": "Meat", "checked": true} ]})</script>
A lot of already created modulescore-a11y-keyscore-ajaxcore-animated-pagescore-animationcore-collapsecore-component-pagecore-doc-viewercore-docscore-drag-dropcore-drawer-panelcore-dropdowncore-dropdown-menucore-elementscore-fieldcore-focusablecore-header-panelcore-iconcore-icon-button
core-iconscore-iconsetcore-iconset-svgcore-imagecore-inputcore-itemcore-labelcore-layout-gridcore-layout-trblcore-listcore-localstoragecore-media-querycore-menucore-menu-buttoncore-metacore-overlaycore-pagescore-range
core-resizablecore-scaffoldcore-scroll-header-panel
core-scroll-thresholdcore-selectioncore-selectorcore-shared-libcore-signalscore-splittercore-stylecore-testscore-toolbarcore-tooltipcore-transition
And a lot special for Material Design
paper-behaviorspaper-buttonpaper-checkboxpaper-dialogpaper-dialog-scrollablepaper-drawer-panelpaper-fabpaper-header-panelpaper-icon-buttonpaper-inputpaper-itempaper-materialpaper-menu
paper-progresspaper-radio-buttonpaper-radio-grouppaper-ripplepaper-sliderpaper-spinnerpaper-stylespaper-tabspaper-toastpaper-toggle-buttonpaper-toolbar
Declarative web components.
oDeclarative element registration: <polymer-element>oDeclarative inheritance: <polymer-element extends="...">oDeclarative two-way data-binding: <input id="input" value="{{foo}}">
oDeclarative event handlers: <button on-click="{{handleClick}}">
oPublished properties: xFoo.bar = 5 <-> <x-foo bar="5">oProperty change watchers: barChanged: function() {...}oAutomatic node finding: this.$.input.value = 5oPointerEvents / PointerGestures by default
Be declarative. Write less code.
Custom elements without Polymer :(<template id="template"> <style>input { color: orange; }</style> <input type="text"></template>
<script> var proto = Object.create(HTMLElement.prototype, { createdCallback: { value: function() { var t = document.querySelector('#template'); this.createShadowRoot() .appendChild(document.importNode(t.content, true)); } } }); var MyInput = document.register('my-input', {prototype: proto});</script>
Custom elements with Polymer :)<polymer-element name="my-input" constructor="MyInput" noscript> <template> <style>input { color: orange; }</style> <input type="text"> </template></polymer-element>
<my-input></my-input>// var myInput = document.createElement('my-input');// var myInput = new MyInput();
Define an API.
<polymer-element name="my-input"> <template> <input type=“{{type}}" id="in" style="color: {{color}};"> </template> <script> Polymer('my-input', { type: “text”, color: “orange”, get length() { return this.$.in.value.length; }, ready: function() { ... } }); </script></polymer-element>