| <html> |
| <head> |
| <title>select-status-sk demo</title> |
| <meta charset="utf-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> |
| <script src="/res/common/js/common.js"></script> |
| <script src="/res/imp/bower_components/webcomponentsjs/webcomponents-lite.js"></script> |
| <link rel="import" href="/res/imp/bower_components/paper-input/paper-input.html"></script> |
| <link rel="import" href="select-status-sk.html"> |
| </head> |
| <body> |
| |
| <dom-module id="select-status-demo"> |
| <template> |
| <style> |
| #selector,#no-button { |
| max-width:100px; |
| } |
| select { |
| display:inline-block; |
| border: solid 1px lightgray; |
| padding: 0.2em; |
| background-color: white; |
| } |
| select-status-sk button { |
| display:block; |
| margin:5px auto; |
| |
| } |
| </style> |
| <h1>Demo of select-status-sk with clear button</h1> |
| |
| <div id="selector"> |
| <select id="greek" multiple> |
| <option value="alpha">Α is for Alpha</option> |
| <option value="beta">Β is for Beta</option> |
| <option value="gamma">Γ is for Gamma</option> |
| <option value="delta">Δ is for Delta</option> |
| </select> |
| <select-status-sk |
| id="greekstatus" |
| target="greek" |
| values="{{_selected}}" |
| clear> |
| </select-status-sk> |
| </div> |
| <br/> |
| <div>{{_selected}} is selected</div> |
| |
| <h1>Demo of select-status-sk without clear button</h1> |
| |
| <div id="no-button"> |
| <select id="second" multiple> |
| <option value="alpha">Α is for Alpha</option> |
| <option value="beta">Β is for Beta</option> |
| <option value="gamma">Γ is for Gamma</option> |
| <option value="delta">Δ is for Delta</option> |
| </select> |
| <select-status-sk |
| id="secondstatus" |
| target="second" |
| values="{{_no_button}}"> |
| </select-status-sk> |
| </div> |
| <br/> |
| <div>{{_no_button}} is selected</div> |
| </template> |
| <script> |
| Polymer({ |
| is: 'select-status-demo', |
| attached: function(){ |
| this.$.secondstatus.setTarget(this.$.second); |
| this.$.greekstatus.setTarget(this.$.greek); |
| }, |
| }); |
| |
| </script> |
| </dom-module> |
| |
| <select-status-demo></select-status-demo> |
| |
| |
| </body> |
| </html> |
