Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Creating Reusable Polymer Elements

Creating Reusable Polymer Elements

In this talk, you'll learn how to create your own reusable elements using Polymer.

Addy Osmani

August 11, 2014
Tweet

More Decks by Addy Osmani

Other Decks in Programming

Transcript

  1. Not

  2. Not

  3. $ npm install -g bower ! npm http GET https://registry.npmjs.org/bower

    npm http 200 https://registry.npmjs.org/bower npm http GET https://registry.npmjs.org/bower/-/bower-1.3.3.tgz npm http 200 https://registry.npmjs.org/bower/-/bower-1.3.3.tgz npm http GET https://registry.npmjs.org/bower-endpoint-parser npm http GET https://registry.npmjs.org/bower-json npm http GET https://registry.npmjs.org/bower-config npm http GET https://registry.npmjs.org/bower-logger npm http GET https://registry.npmjs.org/bower-registry-client npm http GET https://registry.npmjs.org/insight … Terminal
  4. ~/development/ $ ls ! core-action-icons core-component-page my-tabs platform polymer chai

    mocha Terminal Avoids nested dependency trees my-tabs / bower_components my-toolbar / bower_components my-button / bower_components
  5. ! <link rel="import" href="../polymer/polymer.html"> ! <polymer-element name="seed-element" attributes=“notitle author"> !

    <template> <link href="seed-element.css" rel="stylesheet" /> </template> ! <script> Polymer(‘seed-element’, {…}); </script> </polymer-element> my-tabs.html
  6. ! <link rel="import" href="../polymer/polymer.html"> ! <polymer-element name="seed-element" noscript> ! <template>

    <link href="seed-element.css" rel="stylesheet" /> </template> ! </polymer-element> my-tabs.html noscript if not using JS
  7. ! $ bower install Polymer/core-selector —save ! bower cached git://github.com/Polymer/core-selector.git#0.3.0

    bower validate 0.3.0 against git://github.com/Polymer/core-selector.git#* bower not-cached git://github.com/Polymer/core-selection.git#>=0.3.0 <1.0.0 bower resolve git://github.com/Polymer/core-selection.git#>=0.3.0 <1.0.0 bower not-cached git://github.com/Polymer/polymer.git#>=0.3.0 <1.0.0 bower resolve git://github.com/Polymer/polymer.git#>=0.3.0 <1.0.0 Terminal
  8. ! <link rel="import" href="../polymer/polymer.html"> <link rel="import" href="../core-selector/core-selector.html"> ! ! <!--

    Element providing solution to no problem in particular. ! ##### Example ! <my-tabs></my-tabs> my-tabs.html
  9. ! <polymer-element name="my-tabs" extends="core-selector" noscript> ! <template> ! <link href="my-tabs.css"

    rel="stylesheet" /> <content></content> ! </template> ! </polymer-element> my-tabs.html
  10. :host { font-family: ‘Roboto’, ‘Arial’, sans-serif; } ! polyfill-next-selector {

    content: ':host > .core-selected'; } ::content > .core-selected { background: #5599FF; color: white; } ! polyfill-next-selector { content: ':host > *'; } ::content > * { min-width: 60px; height: 60px; line-height: 60px; text-align: center; padding: 0 8px; font-size: 14px; color: #999; } my-tabs.css
  11. ! <polymer-element name="my-tabs" extends="core-selector" noscript> ! <template> ! <link href="my-tabs.css"

    rel="stylesheet" /> <div horizontal layout> <shadow></shadow> </div> </template> ! </polymer-element> my-tabs.html
  12. <html> <head> ... </head> <body unresolved> ! <my-tabs selected=“0”> <span>One</span>

    <span>Two</span> <span>Three</span> </my-tabs> ! </body> </html> demo.html
  13. <html> <head> ... </head> <body unresolved> ! <my-tabs selected=“0”> <span>One</span>

    <span>Two</span> <span>Three</span> </my-tabs> ! </body> </html> demo.html selected=“0” selects the first tab
  14. $ git clone git://github.com/Polymer/tools.git ! Cloning into 'tools'... remote: Reusing

    existing pack: 1201, done. remote: Total 1201 (delta 0), reused 0 (delta 0) Receiving objects: 100% (1201/1201), 834.45 KiB | 277.00 KiB/s, done. Resolving deltas: 100% (476/476), done. Checking connectivity... done. ! ! Terminal
  15. ! var hello = myEl.sayHello(); assert.equal(hello, 'seed-element says, Hello World!');

    ! var greetings = myEl.sayHello('greetings Earthlings'); assert.equal(greetings, 'seed-element says, greetings Earthlings'); Test methods