Embed Size (px)
Citation preview
Polymer
Для чого?
WebComponents
WebComponents
• Templates
WebComponents
• Templates
• Shadow DOM
WebComponents
• Templates
• Shadow DOM
• Custom Elements
WebComponents
• Templates
• Shadow DOM
• Custom Elements
• Imports
HTML Templates
<template id="mytemplate"> <img src="" alt=""/> <div class="content"></div> </template>
Shadow DOM
<div id="host"> <h1>My Title</h1> <h2>My Subtitle</h2> <div> ...other content...</div> </div> <script> var host = document.querySelector('#host'); var shadow = host.createShadowRoot(); shadow.innerHTML = '<h2>Yo, you got replaced!</h2>' + '<div>by my awesome content</div>'; </script>
Custom Elements
<user-list></user-list>
HTML Imports
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <link rel="import" href="demo.html"> </head> <body> <user-list></user-list> </body> </html>
Рівні в Polymer
• Elements
• Polymer
• WebComponents
• Native
Два рівні роботи
• Використовувати готові рішення
• Створювати свої елементи
Core Elements
Paper Elements
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script> <link rel="import" href="bower_components/polymer/polymer.html"> <link rel="import" href="elements/demo-element/demo-element.html"> </head> <body unresolved> <demo-element></demo-element> </body> </html>
<link rel="import" href="../../bower_components/polymer/polymer.html"> <polymer-element name="demo-element"> <template> <link rel="stylesheet" href="style.css"> <h1>Hello, {{name}}!</h1> <input type="text" value="{{ name }}"/> <button on-click="{{buttonClick}}">I am button</button> </template> <script> Polymer({ name: 'world', buttonClick: function(){ this.name = "ALL" } }); </script> </polymer-element>
demo-element.html
<core-header-panel> <core-toolbar> <paper-tabs id="tabs" selected="all" self-end> <paper-tab name="all">All</paper-tab> <paper-tab name="favorites">Favorites</paper-tab> </paper-tabs> </core-toolbar> <div class="container" layout vertical center> <post-list show="all"></post-list> </div> </core-header-panel>
Переваги Polymer
• Data binding
• Elements
• Core Elements
• Paper Elements
Дякую за увагу!
