Polymer
Для чого?
WebComponents.org
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 = do...
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>
...
Рівні в 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/webcompo...
demo-element.html
<link rel="import" href="../../bower_components/polymer/polymer.html">
<polymer-element name="demo-ele...
<core-header-panel>
<core-toolbar>
<paper-tabs id="tabs" selected="all" self-end>
<paper-tab name="all">All</paper-tab>...
Переваги Polymer
• Data binding
• Elements
• Core Elements
• Paper Elements
Дякую за увагу!
Polymer - все, що Ви повинні знати про Polymer.
Polymer - все, що Ви повинні знати про Polymer.
Polymer - все, що Ви повинні знати про Polymer.
Polymer - все, що Ви повинні знати про Polymer.
of 29

Polymer - все, що Ви повинні знати про Polymer.

Доповідач Андрій Колісник, Front-End розробник компанії Malkos, зі стажем більше 3 років, з яких більше року розробка односторінкових сайтів. Люблю отримувати фан від роботи.
Published on: Mar 4, 2016
Published in: Software      
Source: www.slideshare.net


Transcripts - Polymer - все, що Ви повинні знати про Polymer.

  • 1. Polymer
  • 2. Для чого?
  • 3. WebComponents.org
  • 4. WebComponents
  • 5. WebComponents • Templates
  • 6. WebComponents • Templates • Shadow DOM
  • 7. WebComponents • Templates • Shadow DOM • Custom Elements
  • 8. WebComponents • Templates • Shadow DOM • Custom Elements • Imports
  • 9. HTML Templates
  • 10. <template id="mytemplate"> <img src="" alt=""/> <div class="content"></div> </template>
  • 11. Shadow DOM
  • 12. <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>
  • 13. Custom Elements
  • 14. <user-list></user-list>
  • 15. HTML Imports
  • 16. <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <link rel="import" href="demo.html"> </head> <body> <user-list></user-list> </body> </html>
  • 17. Рівні в Polymer • Elements • Polymer • WebComponents • Native
  • 18. Два рівні роботи • Використовувати готові рішення • Створювати свої елементи
  • 19. Core Elements
  • 20. Paper Elements
  • 21. <!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>
  • 22. demo-element.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>
  • 23. <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>
  • 24. Переваги Polymer • Data binding • Elements • Core Elements • Paper Elements
  • 25. Дякую за увагу!

Related Documents