todomvc
Version:
> Helping you select an MV\* framework
48 lines (44 loc) • 1.1 kB
HTML
<html>
<head>
<title>Selection</title>
<script src="../platform/platform.js"></script>
<link rel="import" href="polymer-selection.html">
</head>
<body>
<polymer-element name="selection-example">
<template>
<style>
/* @polyfill ul > * */
::-webkit-distributed(> *) {
cursor: pointer;
}
/* @polyfill ul > .selected */
::-webkit-distributed(> .selected) {
font-weight: bold;
font-style: italic;
}
</style>
<ul on-tap="{{itemTapAction}}">
<content></content>
</ul>
<polymer-selection id="selection" multi on-polymer-select="{{selectAction}}"></polymer-selection>
</template>
<script>
Polymer('selection-example', {
itemTapAction: function(e) {
this.$.selection.select(e.target);
},
selectAction: function(e, detail) {
detail.item.classList.toggle('selected', detail.isSelected);
}
});
</script>
</polymer-element>
<selection-example>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</selection-example>
</body>
</html>