Rob Dodson

Staff Developer Advocate,

google.com/+RobDodson

@rob_dodson

robdodson.me

<polymer-ui-accordion>

<polymer-ui-animated-pages>

<polymer-ui-overlay>

<polymer-ui-card> demo

<polymer-ui-sidebar-menu> demo

<polymer-ui-tabs> demo

<polymer-ui-toggle-button> demo

<polymer-ui-theme-aware>

<script src="platform.js"></script>
<link rel="import" href="polymer-ui-tabs.html">

<polymer-ui-tabs selected="0">
  <span>Home</span>
  <span>About</span>
  <span>Contact</span>
</polymer-ui-tabs>

<script src="platform.js"></script>
<link rel="import" href="polymer-ui-collapsible.html">

<polymer-ui-collapsible>
  <h3 class="polymer-ui-collapsible-header">Click Me!</h3>
  <div>
    some content...
  </div>
</polymer-ui-collapsible>

<script src="platform.js"></script>
<link rel="import" href="polymer-ui-toggle-button.html">

<polymer-ui-toggle-button offcaption="Nope">
</polymer-ui-toggle-button>

<script src="platform.js"></script>
<link rel="import" href="polymer-flex-layout.html">

<polymer-flex-layout vertical iscontainer>
  <div>Header</div>
  <div flex>Body</div>
  <div>Footer</div>
</polymer-flex-layout>

<script src="platform.js"></script>
<link rel="import" href="polymer-ajax.html">

<polymer-ajax url="http://gdata.youtube.com/feeds/api/videos/"
              params='{"q":"chrome", "alt":"json"}'>
</polymer-ajax>

var ajax = document.querySelector('polymer-ajax');
ajax.addEventListener('polymer-response', function(e) {
  console.log(JSON.parse(this.response).feed.entry);
});
ajax.go();

<link rel="import" href="polymer.html">

<polymer-element name="my-element" noscript>
  <template>
    <style>h2 { color: orange; }</style>
    <h2>Hello from my-element!</h2>
  </template>
</polymer-element>

<my-element></my-element>

<link rel="import" href="polymer.html">

<polymer-element name="hello-element">
  <template>
    <h2>I can say hello</h2>
  </template>
  <script>
  Polymer('hello-element', {
    sayHello: function() { alert('Howdy folks!'); }
  });
  </script>
</polymer-element>

<polymer-element name="owner-element">
  <template>
    <h2>{{owner}} built me with Polymer</h2>
  </template>
  <script>
  Polymer('owner-element', {
    owner: 'Rob'
  });
  </script>
</polymer-element>

<owner-element></owner-element>

<polymer-element name="owner-element" attributes="owner">
  <template>
    <h2>{{owner}} built me with Polymer</h2>
  </template>
  <script>
  Polymer('owner-element', {
    owner: 'Rob'
  });
  </script>
</polymer-element>

<owner-element owner="Alex"></owner-element>

<polymer-element name="click-element">
  <template>
    <button on-click="{{setMessage}}">Click me</button>
    <span>{{message}}</span>
  </template>
  <script>
  Polymer('click-element', {
    message: 'Waiting to be clicked...'
    setMessage: function() { this.message = 'I was clicked!' }
  });
  </script>
</polymer-element>

<polymer-element name="focus-element">
  <template>
    <button on-click="{{setFocus}}">Set Focus</button>
    <input id="nameInput" type="text">
  </template>
  <script>
  Polymer('focus-element', {
    setFocus: function() { this.$.nameInput.focus(); }
  });
  </script>
</polymer-element>

• Declarative element registration: <polymer-element>
• Declarative inheritance: <polymer-element extends="...">
• Declarative two-way data-binding: <input id="input" value="{{foo}}">
• Declarative event handlers: <button on-click="{{handleClick}}">
• Published properties: xFoo.bar = 5 <-> <x-foo bar="5">
• Property change watchers: barChanged: function() {...}
• Automatic node finding: this.$.input.value = 5
• PointerEvents / PointerGestures by default
• Support for Web Animations

<polymer-element name="my-input" noscript> <template> <input type="text" id="in" style="color: orange;"> </template> </polymer-element> <polymer-element name="my-input"> <template> <input type="text" id="in" style="color: orange;"> </template> <script>Polymer('my-input');</script> </polymer-element> <polymer-element name="my-input"> <template> <input type="text" id="in" style="color: orange;"> </template> <script> Polymer('my-input', { get length() { return this.$.in.value.length; }, ready: function() { ... } }); </script> </polymer-element> <polymer-element name="my-input"> <template> <link rel="stylesheet" href="styles.css"> <input id="in" type="text"> </template> <script src="path/to/elements/myinput.js"></script> </polymer-element>

• Properties/methods are added to prototype
• this refers to the element itself (e.g. this.localName == "my-input")
• Can reference external scripts/stylesheets (e.g. CSP friendly)

1. Inside the element → use data-binding
2. Outside the element → users configure us using attributes

<polymer-element name="my-input"> <template> <input type="text" style="color: orange;"> </template> <script> Polymer('my-input', { type: 'text', color: 'orange' }); </script> </polymer-element> <polymer-element name="my-input"> <template> <input type="{{type}}" style="color: {{color}};"> </template> <script> Polymer('my-input', { type: 'text', color: 'orange' }); </script> </polymer-element> <polymer-element name="my-input"> <template> <input type="{{type}}" style="color: {{color}};" value="{{val}}"> <polymer-localstorage name="myInputStorage" value="{{val}}"></polymer-localstorage> </template> <script> Polymer('my-input', { type: 'text', color: 'orange' }); </script> </polymer-element> <polymer-element name="my-input" attributes="type color"> <template> <input type="{{type}}" style="color: {{color}};" value="{{val}}"> <polymer-localstorage name="myInputStorage" value="{{val}}"></polymer-localstorage> </template> <script> Polymer('my-input', { type: 'text', color: 'orange' }); </script> </polymer-element> <my-input color="red"></my-input>

<script src="platform.js"></script>
<link rel="import" href="polymer-media-query.html">

<polymer-element name="responsive-layout" attributes="responsive">
  <template>
    <polymer-media-query query="max-width:640px" queryMatches="{{isPhone}}"></...
    <template if="{{isPhone && responsive}}"> <!-- Phone markup -->
      <content></content>
    </template>
    <template if="{{!responsive}}"> <!-- Non-responsive case -->
     ...
    </template>
  </template>
  <script>Polymer('responsive-layout', {responsive: false});</script>
</polymer-element>

<responsive-layout responsive>
  <div>...</div>
</responsive-layout>