Permalink
| <!-- | |
| 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 | |
| --> | |
| <!-- | |
| `paper-checkbox` is a button that can be either checked or unchecked. User | |
| can tap the checkbox to check or uncheck it. Usually you use checkboxes | |
| to allow user to select multiple options from a set. If you have a single | |
| ON/OFF option, avoid using a single checkbox and use `paper-toggle-button` | |
| instead. | |
| Example: | |
| <paper-checkbox></paper-checkbox> | |
| <paper-checkbox checked></paper-checkbox> | |
| Styling checkbox: | |
| To change the ink color for checked state: | |
| paper-checkbox::shadow #ink[checked] { | |
| color: #4285f4; | |
| } | |
| To change the checkbox checked color: | |
| paper-checkbox::shadow #checkbox.checked { | |
| background-color: #4285f4; | |
| border-color: #4285f4; | |
| } | |
| To change the ink color for unchecked state: | |
| paper-checkbox::shadow #ink { | |
| color: #b5b5b5; | |
| } | |
| To change the checkbox unchecked color: | |
| paper-checkbox::shadow #checkbox { | |
| border-color: #b5b5b5; | |
| } | |
| @group Paper Elements | |
| @element paper-checkbox | |
| @extends paper-radio-button | |
| @homepage github.io | |
| --> | |
| <link rel="import" href="../polymer/polymer.html"> | |
| <link rel="import" href="../paper-radio-button/paper-radio-button.html"> | |
| <polymer-element name="paper-checkbox" extends="paper-radio-button" role="checkbox"> | |
| <template> | |
| <link rel="stylesheet" href="paper-checkbox.css"> | |
| <div id="checkboxContainer" class="{{ {labeled: label} | tokenList }}"> | |
| <paper-ripple id="ink" class="circle recenteringTouch" checked?="{{!checked}}"></paper-ripple> | |
| <div id="checkbox" class="{{ {checked: checked} | tokenList }}"> | |
| <div id="checkmark" class="{{ {hidden: !checked} | tokenList }}"></div> | |
| </div> | |
| </div> | |
| <div id="checkboxLabel" hidden?="{{!label}}">{{label}}<content></content></div> | |
| </template> | |
| <script> | |
| Polymer('paper-checkbox', { | |
| /** | |
| * Fired when the checked state changes due to user interaction. | |
| * | |
| * @event change | |
| */ | |
| /** | |
| * Fired when the checked state changes. | |
| * | |
| * @event core-change | |
| */ | |
| toggles: true, | |
| checkedChanged: function () { | |
| this.setAttribute('aria-checked', this.checked ? 'true' : 'false'); | |
| this.fire('core-change'); | |
| } | |
| }); | |
| </script> | |
| </polymer-element> |