src/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
  55 <polymer-element name="paper-radio-button" role="radio" tabindex="0" aria-checked="false">
  56 <template>
  57
  58   <link rel="stylesheet" href="paper-radio-button.css">
  59
  60   <div id="radioContainer" class="{{ {labeled: label} | tokenList }}">
  61
  62     <div id="offRadio"></div>
  63     <div id="onRadio"></div>
  64
  65     <paper-ripple id="ink" class="circle recenteringTouch" checked?="{{!checked}}"></paper-ripple>
  66
  67   </div>
  68
  69   <div id="radioLabel" aria-hidden="true" hidden?="{{!label}}">{{label}}<content></content></div>
  70
  71 </template>
  72 <script>
  73
  74   Polymer('paper-radio-button', {
  75
  76     /**
  77      * Fired when the checked state changes.
  78      *
  79      * @event change
  80      */
  81
  82     publish: {
  83       /**
  84        * Gets or sets the state, `true` is checked and `false` is unchecked.
  85        *
  86        * @attribute checked
  87        * @type boolean
  88        * @default false
  89        */
  90       checked: {value: false, reflect: true},
  91
  92       /**
  93        * The label for the radio button.
  94        *
  95        * @attribute label
  96        * @type string
  97        * @default ''
  98        */
  99       label: '',
 100
 101       /**
 102        * Normally the user cannot uncheck the radio button by tapping once
 103        * checked.  Setting this property to `true` makes the radio button
 104        * toggleable from checked to unchecked.
 105        *
 106        * @attribute toggles
 107        * @type boolean
 108        * @default false
 109        */
 110       toggles: false,
 111
 112       /**
 113        * If true, the user cannot interact with this element.
 114        *
 115        * @attribute disabled
 116        * @type boolean
 117        * @default false
 118        */
 119       disabled: {value: false, reflect: true}
 120     },
 121
 122     eventDelegates: {
 123       tap: 'tap'
 124     },
 125
 126     tap: function() {
 127       this.toggle();
 128       this.fire('paper-radio-button-activate');
 129     },
 130
 131     toggle: function() {
 132       this.checked = !this.toggles || !this.checked;
 133     },
 134
 135     checkedChanged: function() {
 136       this.$.onRadio.classList.toggle('fill', this.checked);
 137       this.setAttribute('aria-checked', this.checked ? 'true': 'false');
 138       this.fire('change');
 139     },
 140
 141     labelChanged: function() {
 142       this.setAttribute('aria-label', this.label);
 143     }
 144
 145   });
 146
 147 </script>
 148 </polymer-element>