Skip to content

Instantly share code, notes, and snippets.

@liamfiddler

liamfiddler/my-listfilter.html

Created September 29, 2016 01:21
Show Gist options
  • Save liamfiddler/35b59e880f2e3973ee28482e761ff9b7 to your computer and use it in GitHub Desktop.
Save liamfiddler/35b59e880f2e3973ee28482e761ff9b7 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. liamfiddler created this gist Sep 29, 2016.
    54 changes: 54 additions & 0 deletions my-listfilter.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,54 @@
    <link rel="import" href="../polymer/polymer.html">
    <!--
    `my-listfilter`
    A filterable list component
    @demo demo/index.html
    -->
    <dom-module id="my-listfilter">
    <template>
    <style>
    :host {
    display: block;
    }
    .hidden {
    display: none;
    }
    </style>
    <input value="{{prop1::input}}" />
    <h2>Hello [[prop1]]</h2>
    <ul id="list">
    <li>Hypertext Markup Language</li>
    <li>Cascading Style Sheets</li>
    <li>Javascript</li>
    <li>Web Components</li>
    <li>Polymer</li>
    <li>Web Browser</li>
    <li>Mentally Friendly</li>
    </ul>
    </template>
    <script>
    Polymer({
    is: 'my-listfilter',
    properties: {
    prop1: {
    type: String,
    value: 'my-listfilter',
    },
    },
    filterList: function() {
    var items = this.$.list.children;

    for (var i = 0; i < items.length; i++) {
    var item = Polymer.dom(items[i]);

    if (item.textContent.includes(this.prop1)) {
    item.classList.remove('hidden');
    } else {
    item.classList.add('hidden');
    }
    }
    }
    });
    </script>
    </dom-module>