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" assetpath=""> 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 73 </polymer-element> 74 <script src="paper-radio-button-extracted.js"></script>
