third_party/polymer/v1_0/components/paper-checkbox/paper-checkbox.html

   1 <!--
   2 @license
   3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
   4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   7 Code distributed by Google as part of the polymer project is also
   8 subject 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-ripple/paper-ripple.html">
  13 <link rel="import" href="../paper-styles/default-theme.html">
  14 <link rel="import" href="../paper-behaviors/paper-inky-focus-behavior.html">
  15
  16 <!--
  17
  18 `paper-checkbox` is a button that can be either checked or unchecked.  User
  19 can tap the checkbox to check or uncheck it.  Usually you use checkboxes
  20 to allow user to select multiple options from a set.  If you have a single
  21 ON/OFF option, avoid using a single checkbox and use `paper-toggle-button`
  22 instead.
  23
  24 Example:
  25
  26     <paper-checkbox>label</paper-checkbox>
  27
  28     <paper-checkbox checked> label</paper-checkbox>
  29
  30 ### Styling
  31
  32 The following custom properties and mixins are available for styling:
  33
  34 Custom property | Description | Default
  35 ----------------|-------------|----------
  36 `--paper-checkbox-unchecked-background-color` | Checkbox background color when the input is not checked | `transparent`
  37 `--paper-checkbox-unchecked-color` | Checkbox border color when the input is not checked | `--primary-text-color`
  38 `--paper-checkbox-unchecked-ink-color` | Selected/focus ripple color when the input is not checked | `--primary-text-color`
  39 `--paper-checkbox-checked-color` | Checkbox color when the input is checked | `--default-primary-color`
  40 `--paper-checkbox-checked-ink-color` | Selected/focus ripple color when the input is checked | `--default-primary-color`
  41 `--paper-checkbox-checkmark-color` | Checkmark color | `white`
  42 `--paper-checkbox-label-color` | Label color | `--primary-text-color`
  43
  44 @demo demo/index.html
  45 -->
  46
  47 <dom-module id="paper-checkbox">
  48   <link rel="import" type="css" href="paper-checkbox.css">
  49
  50   <template>
  51
  52     <div id="checkboxContainer">
  53       <paper-ripple id="ink" class="circle" center checked$="[[checked]]"></paper-ripple>
  54       <div id="checkbox" class$="[[_computeCheckboxClass(checked)]]">
  55         <div id="checkmark" class$="[[_computeCheckmarkClass(checked)]]"></div>
  56       </div>
  57     </div>
  58
  59     <div id="checkboxLabel" aria-hidden="true"><content></content></div>
  60
  61   </template>
  62
  63   <script>
  64     Polymer({
  65       is: 'paper-checkbox',
  66
  67       behaviors: [
  68         Polymer.PaperInkyFocusBehavior
  69       ],
  70
  71       hostAttributes: {
  72         role: 'checkbox',
  73         'aria-checked': false,
  74         tabindex: 0
  75       },
  76
  77       properties: {
  78         /**
  79          * Fired when the checked state changes due to user interaction.
  80          *
  81          * @event change
  82          */
  83
  84         /**
  85          * Fired when the checked state changes.
  86          *
  87          * @event iron-change
  88          */
  89
  90         /**
  91          * Gets or sets the state, `true` is checked and `false` is unchecked.
  92          */
  93         checked: {
  94           type: Boolean,
  95           value: false,
  96           reflectToAttribute: true,
  97           notify: true,
  98           observer: '_checkedChanged'
  99         },
 100
 101         /**
 102          * If true, the button toggles the active state with each tap or press
 103          * of the spacebar.
 104          */
 105         toggles: {
 106           type: Boolean,
 107           value: true,
 108           reflectToAttribute: true
 109         }
 110       },
 111
 112       ready: function() {
 113         if (Polymer.dom(this).textContent == '') {
 114           this.$.checkboxLabel.hidden = true;
 115         } else {
 116           this.setAttribute('aria-label', Polymer.dom(this).textContent);
 117         }
 118         this._isReady = true;
 119       },
 120
 121       // button-behavior hook
 122       _buttonStateChanged: function() {
 123         if (this.disabled) {
 124           return;
 125         }
 126         if (this._isReady) {
 127           this.checked = this.active;
 128         }
 129       },
 130
 131       _checkedChanged: function(checked) {
 132         this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
 133         this.active = this.checked;
 134         this.fire('iron-change');
 135       },
 136
 137       _computeCheckboxClass: function(checked) {
 138         if (checked) {
 139           return 'checked';
 140         }
 141         return '';
 142       },
 143
 144       _computeCheckmarkClass: function(checked) {
 145         if (!checked) {
 146           return 'hidden';
 147         }
 148         return '';
 149       }
 150     })
 151   </script>
 152
 153 </dom-module>