Polymer - все, що Ви повинні знати про Polymer.
•
0 likes•372 views
Доповідач Андрій Колісник, Front-End розробник компанії Malkos, зі стажем більше 3 років, з яких більше року розробка односторінкових сайтів. Люблю отримувати фан від роботи.
Recommended
More Related Content
Viewers also liked
Viewers also liked (12)
More from Stfalcon Meetups
More from Stfalcon Meetups (20)
Polymer - все, що Ви повинні знати про Polymer.
- 1. Polymer
- 2. Для чого?
- 6. WebComponents • Templates • Shadow DOM
- 7. WebComponents • Templates • Shadow DOM • Custom Elements
- 8. WebComponents • Templates • Shadow DOM • Custom Elements • Imports
- 10. <template id="mytemplate"> <img src="" alt=""/> <div class="content"></div> </template>
- 11. Shadow DOM
- 14. <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>
- 16. Custom Elements
- 18. HTML Imports
- 19. <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <link rel="import" href="demo.html"> </head> <body> <user-list></user-list> </body> </html>
- 20. Рівні в Polymer • Elements • Polymer • WebComponents • Native
- 21. Два рівні роботи • Використовувати готові рішення • Створювати свої елементи
- 22. Core Elements
- 23. Paper Elements
- 25. <!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>
- 26. 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>
- 27. <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>
- 28. Переваги Polymer • Data binding • Elements • Core Elements • Paper Elements
- 29. Дякую за увагу!