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 <template> 17 <style> 18 :host { 19 display: block; 20 } 21 22 :host([invalid]) span { 23 color: red; 24 } 25 26 #labelText { 27 display: inline-block; 28 width: 100px; 29 } 30 </style> 31 32 <input type="checkbox" id="checkbox" on-tap="_onCheckTap"> 33 <span id="labelText">{{label}}</span> 34 <paper-button raised on-click="_onClick">validate</paper-button> 35 36 </template> 37 <script> 38 Polymer({ 39 40 is: 'simple-checkbox', 41 42 behaviors: [ 43 Polymer.IronCheckedElementBehavior 44 ], 45 46 properties: { 47 label: { 48 type: String, 49 value: 'not validated' 50 } 51 }, 52 53 _onCheckTap: function() { 54 this.checked = this.$.checkbox.checked; 55 }, 56 57 _onClick: function() { 58 this.validate(); 59 this.label = this.invalid ? 'is invalid' : 'is valid'; 60 } 61 }); 62 63 </script> 64 65 </dom-module> 66