blob: b771a546bfd0ba0c16b92d61e1cb556e86ccf69d [file] [log] [blame]
<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>