Home | History | Annotate | Download | only in paper-radio-button 
      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>
    149