| <html> |
| <head> |
| <title>url-params-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="url-params-sk.html"> |
| </head> |
| <body> |
| <dom-module id="url-param-demo"> |
| <template> |
| <!--We must use is=custom-style here so styles don't get leaked into local DOM. |
| Note that using custom-style inside <dom-module> can lead to |
| unintended consequences, such as CSS mixins not being visible. |
| https://www.polymer-project.org/1.0/docs/devguide/styling#custom-style --> |
| <style is="custom-style"> |
| iron-selector > * { |
| padding: 8px; |
| } |
| .horizontal-section { |
| padding: 0; |
| } |
| .iron-selected { |
| background-color: #4285f4; |
| color: white; |
| } |
| </style> |
| <url-param-sk name="exclude" value="{{exclude}}" multi></url-param-sk> |
| <paper-input value="{{exclude_value}}"></paper-input> |
| </template> |
| <script> |
| Polymer({ |
| is: 'url-param-demo', |
| |
| properties: { |
| exclude: { |
| type: Array, |
| computed: "_makeArray(exclude_value)", |
| }, |
| exclude_value: { |
| type: String, |
| value: "alpha,beta", |
| } |
| }, |
| _makeArray: function(s) { |
| if (!s) { |
| return []; |
| } |
| return s.split(','); |
| } |
| }); |
| </script> |
| </dom-module> |
| |
| <h1>url-param-sk demo</h1> |
| <url-param-demo></url-param-demo> |
| |
| </body> |
| </html> |