third_party/polymer/components/paper-radio-button/paper-radio-button.html

   1 <!--
   2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   3 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   5 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   6 Code distributed by Google as part of the polymer project is also
   7 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   8 -->
   9
  10 <!--
  11 `paper-radio-button` is a button that can be either checked or unchecked.
  12 User can tap the radio button to check it.  But it cannot be unchecked by
  13 tapping once checked.
  14
  15 Use `paper-radio-group` to group a set of radio buttons.  When radio buttons
  16 are inside a radio group, only one radio button in the group can be checked.
  17
  18 Example:
  19
  20     <paper-radio-button></paper-radio-button>
  21
  22 Styling radio button:
  23
  24 To change the ink color for checked state:
  25
  26     paper-radio-button::shadow #ink[checked] {
  27       color: #4285f4;
  28     }
  29
  30 To change the radio checked color:
  31
  32     paper-radio-button::shadow #onRadio {
  33       background-color: #4285f4;
  34     }
  35
  36 To change the ink color for unchecked state:
  37
  38     paper-radio-button::shadow #ink {
  39       color: #b5b5b5;
  40     }
  41
  42 To change the radio unchecked color:
  43
  44     paper-radio-button::shadow #offRadio {
  45       border-color: #b5b5b5;
  46     }
  47
  48 @group Paper Elements
  49 @element paper-radio-button
  50 @homepage github.io
  51 -->
  52
  53 <link rel="import" href="../paper-ripple/paper-ripple.html">
  54 <link rel="import" href="../core-a11y-keys/core-a11y-keys.html">
  55
  56 <polymer-element name="paper-radio-button" role="radio" tabindex="0" aria-checked="false">
  57 <template>
  58
  59   <link rel="stylesheet" href="paper-radio-button.css">
  60
  61   <core-a11y-keys target="{{}}" keys="space" on-keys-pressed="{{tap}}"></core-a11y-keys>
  62
  63   <div id="radioContainer" class="{{ {labeled: label} | tokenList }}">
  64
  65     <div id="offRadio"></div>
  66     <div id="onRadio"></div>
  67
  68     <paper-ripple id="ink" class="circle recenteringTouch" checked?="{{!checked}}"></paper-ripple>
  69
  70   </div>
  71
  72   <div id="radioLabel" aria-hidden="true" hidden?="{{!label}}">{{label}}<content></content></div>
  73
  74 </template>
  75 <script>
  76
  77   Polymer('paper-radio-button', {
  78
  79     /**
  80      * Fired when the checked state changes due to user interaction.
  81      *
  82      * @event change
  83      */
  84
  85     /**
  86      * Fired when the checked state changes.
  87      *
  88      * @event core-change
  89      */
  90
  91     publish: {
  92       /**
  93        * Gets or sets the state, `true` is checked and `false` is unchecked.
  94        *
  95        * @attribute checked
  96        * @type boolean
  97        * @default false
  98        */
  99       checked: {value: false, reflect: true},
 100
 101       /**
 102        * The label for the radio button.
 103        *
 104        * @attribute label
 105        * @type string
 106        * @default ''
 107        */
 108       label: '',
 109
 110       /**
 111        * Normally the user cannot uncheck the radio button by tapping once
 112        * checked.  Setting this property to `true` makes the radio button
 113        * toggleable from checked to unchecked.
 114        *
 115        * @attribute toggles
 116        * @type boolean
 117        * @default false
 118        */
 119       toggles: false,
 120
 121       /**
 122        * If true, the user cannot interact with this element.
 123        *
 124        * @attribute disabled
 125        * @type boolean
 126        * @default false
 127        */
 128       disabled: {value: false, reflect: true}
 129     },
 130
 131     eventDelegates: {
 132       tap: 'tap'
 133     },
 134
 135     tap: function() {
 136       if (this.disabled) {
 137         return;
 138       }
 139       var old = this.checked;
 140       this.toggle();
 141       if (this.checked !== old) {
 142         this.fire('change');
 143       }
 144     },
 145
 146     toggle: function() {
 147       this.checked = !this.toggles || !this.checked;
 148     },
 149
 150     checkedChanged: function() {
 151       this.$.onRadio.classList.toggle('fill', this.checked);
 152       this.setAttribute('aria-checked', this.checked ? 'true': 'false');
 153       this.fire('core-change');
 154     },
 155
 156     labelChanged: function() {
 157       this.setAttribute('aria-label', this.label);
 158     }
 159
 160   });
 161
 162 </script>
 163 </polymer-element>