59 lines
1.7 KiB
HTML
59 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<!--
|
|
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
|
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
|
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
|
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
|
Code distributed by Google as part of the polymer project is also
|
|
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
|
-->
|
|
<html>
|
|
<head>
|
|
<title>Selection</title>
|
|
<script src="../webcomponentsjs/webcomponents.js"></script>
|
|
<link rel="import" href="core-selection.html">
|
|
</head>
|
|
<body unresolved>
|
|
|
|
<polymer-element name="selection-example">
|
|
<template>
|
|
<style>
|
|
polyfill-next-selector { content: 'ul > *'; }
|
|
::content > * {
|
|
cursor: pointer;
|
|
}
|
|
|
|
polyfill-next-selector { content: 'ul > .selected'; }
|
|
::content > .selected {
|
|
font-weight: bold;
|
|
font-style: italic;
|
|
}
|
|
</style>
|
|
|
|
<ul on-tap="{{itemTapAction}}">
|
|
<content></content>
|
|
</ul>
|
|
|
|
<core-selection id="selection" multi on-core-select="{{selectAction}}"></core-selection>
|
|
|
|
</template>
|
|
<script>
|
|
Polymer('selection-example', {
|
|
itemTapAction: function(e, detail, sender) {
|
|
this.$.selection.select(e.target);
|
|
},
|
|
selectAction: function(e, detail, sender) {
|
|
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>
|