designer

designer.html

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

<polymer-element name="selector-examples">

  <template>
    <style>    
      .list {
        display: block;
        border-top-width: 1px;
        border-right-width: 1px;
        border-left-width: 1px;
        border-style: solid solid none;
        border-top-color: rgb(204, 204, 204);
        border-right-color: rgb(204, 204, 204);
        border-left-color: rgb(204, 204, 204);
        color: white;
        list-style: none;
        margin: 0px;
        padding: 0px;
        background: rgb(102, 102, 102);
      }
      .list > * {
        height: 40px;
        line-height: 40px;
        padding: 0px 20px;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: rgb(204, 204, 204);
      }
      .list > .core-selected {
        background: rgb(51, 51, 51);
      }
      li {
        height: 30px;
      }
      li.core-selected::after {
        content: '✓';
        position: absolute;
        padding-left: 10px;
      }
    </style>
    <h2>basic</h2>
    <core-selector class="list" selected="0">
      <div>Item 0</div>
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
      <div>Item 4</div>
    </core-selector>
  </template>

  <script>

    Polymer('selector-examples', {
      ready: function () {
          this.multiSelected = [1, 3];
          this.color = 'green';
        }
    });

  </script>

</polymer-element>