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     paper-radio-button[checked]::shadow #offRadio {
  37       border-color: #4285f4;
  38     }
  39
  40 To change the ink color for unchecked state:
  41
  42     paper-radio-button::shadow #ink {
  43       color: #b5b5b5;
  44     }
  45
  46 To change the radio unchecked color:
  47
  48     paper-radio-button::shadow #offRadio {
  49       border-color: #b5b5b5;
  50     }
  51
  52 @group Paper Elements
  53 @element paper-radio-button
  54 @homepage github.io
  55 -->
  56
  57 <link rel="import" href="../paper-ripple/paper-ripple.html">
  58 <link rel="import" href="../core-a11y-keys/core-a11y-keys.html">
  59
  60 <polymer-element name="paper-radio-button" role="radio" tabindex="0" aria-checked="false">
  61 <template>
  62
  63   <link rel="stylesheet" href="paper-radio-button.css">
  64
  65   <core-a11y-keys target="{{}}" keys="space" on-keys-pressed="{{tap}}"></core-a11y-keys>
  66
  67   <div id="radioContainer" class="{{ {labeled: label} | tokenList }}">
  68
  69     <div id="offRadio"></div>
  70     <div id="onRadio"></div>
  71
  72     <paper-ripple id="ink" class="circle recenteringTouch" checked?="{{!checked}}"></paper-ripple>
  73
  74   </div>
  75
  76   <div id="radioLabel" aria-hidden="true" hidden?="{{!label}}">{{label}}<content></content></div>
  77
  78 </template>
  79 <script>
  80
  81   Polymer('paper-radio-button', {
  82
  83     /**
  84      * Fired when the checked state changes due to user interaction.
  85      *
  86      * @event change
  87      */
  88
  89     /**
  90      * Fired when the checked state changes.
  91      *
  92      * @event core-change
  93      */
  94
  95     publish: {
  96       /**
  97        * Gets or sets the state, `true` is checked and `false` is unchecked.
  98        *
  99        * @attribute checked
 100        * @type boolean
 101        * @default false
 102        */
 103       checked: {value: false, reflect: true},
 104
 105       /**
 106        * The label for the radio button.
 107        *
 108        * @attribute label
 109        * @type string
 110        * @default ''
 111        */
 112       label: '',
 113
 114       /**
 115        * Normally the user cannot uncheck the radio button by tapping once
 116        * checked.  Setting this property to `true` makes the radio button
 117        * toggleable from checked to unchecked.
 118        *
 119        * @attribute toggles
 120        * @type boolean
 121        * @default false
 122        */
 123       toggles: false,
 124
 125       /**
 126        * If true, the user cannot interact with this element.
 127        *
 128        * @attribute disabled
 129        * @type boolean
 130        * @default false
 131        */
 132       disabled: {value: false, reflect: true}
 133     },
 134
 135     eventDelegates: {
 136       tap: 'tap'
 137     },
 138
 139     tap: function() {
 140       if (this.disabled) {
 141         return;
 142       }
 143       var old = this.checked;
 144       this.toggle();
 145       if (this.checked !== old) {
 146         this.fire('change');
 147       }
 148     },
 149
 150     toggle: function() {
 151       this.checked = !this.toggles || !this.checked;
 152     },
 153
 154     checkedChanged: function() {
 155       this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
 156       this.fire('core-change');
 157     },
 158
 159     labelChanged: function() {
 160       this.setAttribute('aria-label', this.label);
 161     }
 162
 163   });
 164
 165 </script>
 166 </polymer-element>