Demo entry 6004172

Test

   

Submitted by anonymous on Sep 15, 2016 at 06:25
Language: HTML. Code size: 1.1 kB.

<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../../iron-icons/iron-icons.html">
<link rel="import" href="../icon-toggle.html">


<dom-module id="icon-toggle-demo">
  <template>
    <style>
      :host {
        --icon-toggle-color: lightgrey;
        --icon-toggle-outline-color: black;
        --icon-toggle-pressed-color: red;        
        font-family: sans-serif;
      };
    </style>
  
    <h3>Statically-configured icon-toggles</h3>
    
    <icon-toggle toggle-icon="star"></icon-toggle>
    <icon-toggle toggle-icon="star" pressed></icon-toggle>
    
    <h3>Data-bound icon-toggle</h3>

    <div><span>[[message(isFav)]]</span></div>
    <icon-toggle toggle-icon="favorite" pressed="{{isFav}}"></icon-toggle>
  </template>
  
  <script>
    Polymer({
      is: "icon-toggle-demo",
      message: function(fav) {
        if (fav) {
          return "You really like me!";
        } else {
          return "Do you like me?";
        }
      }
    });
  </script>
</dom-module>

This snippet took 0.00 seconds to highlight.

Back to the Entry List or Home.

Delete this entry (admin only).