1<!-- 2@license 3Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 5The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 6The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 7Code distributed by Google as part of the polymer project is also 8subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 9--> 10 11<link rel="import" href="../../polymer/polymer.html"> 12<link rel="import" href="../../paper-button/paper-button.html"> 13<link rel="import" href="../iron-checked-element-behavior.html"> 14 15<dom-module id="simple-checkbox"> 16 <style> 17 :host { 18 display: block; 19 } 20 21 :host([invalid]) span { 22 color: red; 23 } 24 25 #labelText { 26 display: inline-block; 27 width: 100px; 28 } 29 </style> 30 <template> 31 <input type="checkbox" id="checkbox" on-tap="_onCheckTap"> 32 <span id="labelText">{{label}}</span> 33 <paper-button raised on-click="_onClick">validate</paper-button> 34 35 </template> 36 <script> 37 Polymer({ 38 39 is: 'simple-checkbox', 40 41 behaviors: [ 42 Polymer.IronCheckedElementBehavior 43 ], 44 45 properties: { 46 label: { 47 type: String, 48 value: 'not validated' 49 } 50 }, 51 52 _onCheckTap: function() { 53 this.checked = this.$.checkbox.checked; 54 }, 55 56 _onClick: function() { 57 this.validate(); 58 this.label = this.invalid ? 'is invalid' : 'is valid'; 59 } 60 }); 61 62 </script> 63 64 </dom-module> 65