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

   1 <!--
   2 Copyright (c) 2015 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 <link rel="import" href="../polymer/polymer.html">
  11 <link rel="import" href="../paper-ripple/paper-ripple.html">
  12 <link rel="import" href="../paper-styles/default-theme.html">
  13 <link rel="import" href="../paper-behaviors/paper-inky-focus-behavior.html">
  14
  15 <!--
  16 `paper-radio-button` is a button that can be either checked or unchecked.
  17 User can tap the radio button to check or uncheck it.
  18
  19 Use a `<paper-radio-group>` to group a set of radio buttons.  When radio buttons
  20 are inside a radio group, exactly one radio button in the group can be checked
  21 at any time.
  22
  23 Example:
  24
  25     <paper-radio-button></paper-radio-button>
  26     <paper-radio-button>Item label</paper-radio-button>
  27
  28 ### Styling
  29
  30 The following custom properties and mixins are available for styling:
  31
  32 Custom property | Description | Default
  33 ----------------|-------------|----------
  34 `--paper-radio-button-unchecked-background-color` | Radio button background color when the input is not checked | `transparent`
  35 `--paper-radio-button-unchecked-color` | Radio button color when the input is not checked | `--primary-text-color`
  36 `--paper-radio-button-unchecked-ink-color` | Selected/focus ripple color when the input is not checked | `--primary-text-color`
  37 `--paper-radio-button-checked-color` | Radio button color when the input is checked | `--default-primary-color`
  38 `--paper-radio-button-checked-ink-color` | Selected/focus ripple color when the input is checked | `--default-primary-color`
  39 `--paper-radio-button-label-color` | Label color | `--primary-text-color`
  40
  41 @group Paper Elements
  42 @element paper-radio-button
  43 @hero hero.svg
  44 @demo demo/index.html
  45 -->
  46
  47 <dom-module id="paper-radio-button">
  48
  49   <link rel="import" type="css" href="paper-radio-button.css">
  50
  51   <template>
  52
  53     <div id="radioContainer">
  54       <div id="offRadio"></div>
  55       <div id="onRadio"></div>
  56       <paper-ripple id="ink" class="circle" center checked$="[[checked]]"></paper-ripple>
  57     </div>
  58
  59     <div id="radioLabel" aria-hidden="true"><content></content></div>
  60
  61   </template>
  62
  63   <script>
  64     Polymer({
  65       is: 'paper-radio-button',
  66
  67       behaviors: [
  68         Polymer.PaperInkyFocusBehavior
  69       ],
  70
  71       hostAttributes: {
  72         role: 'radio',
  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.$.radioLabel.hidden = true;
 115         } else {
 116           this.setAttribute('aria-label', Polymer.dom(this).textContent);
 117         }
 118         this._isReady = true;
 119       },
 120
 121       _buttonStateChanged: function() {
 122         if (this.disabled) {
 123           return;
 124         }
 125         if (this._isReady) {
 126           this.checked = this.active;
 127         }
 128       },
 129
 130       _checkedChanged: function() {
 131         this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
 132         this.active = this.checked;
 133         this.fire('iron-change');
 134       }
 135     })
 136   </script>
 137
 138 </dom-module>