1<!doctype html> 2<!-- 3@license 4Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 5This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 6The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 7The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 8Code distributed by Google as part of the polymer project is also 9subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 10--> 11<html> 12<head> 13 <title>paper-radio-button demo</title> 14 15 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> 16 <meta name="mobile-web-app-capable" content="yes"> 17 <meta name="apple-mobile-web-app-capable" content="yes"> 18 19 <script src="../../webcomponentsjs/webcomponents-lite.js"></script> 20 21 <link rel="import" href="../../iron-demo-helpers/demo-snippet.html"> 22 <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html"> 23 <link rel="import" href="../paper-radio-button.html"> 24 25 <style is="custom-style" include="demo-pages-shared-styles"> 26 .vertical-section-container { 27 max-width: 630px; 28 } 29 30 paper-radio-button { 31 margin-right: 24px; 32 } 33 </style> 34</head> 35<body unresolved> 36 <div class="vertical-section-container centered"> 37 <h3>Radio buttons can be checked or unchecked, or disabled entirely</h3> 38 <demo-snippet class="centered-demo"> 39 <template> 40 <paper-radio-button>Radio</paper-radio-button> 41 <paper-radio-button checked>Radio</paper-radio-button> 42 <paper-radio-button disabled>Disabled</paper-radio-button> 43 </template> 44 </demo-snippet> 45 46 <h3>Radio buttons can hide the ripple effect using the <i>noink</i> attribute</h3> 47 <demo-snippet class="centered-demo"> 48 <template> 49 <paper-radio-button noink>Radio</paper-radio-button> 50 </template> 51 </demo-snippet> 52 53 <h3>Radio buttons can be styled using custom properties</h3> 54 <demo-snippet class="centered-demo"> 55 <template> 56 <style is="custom-style"> 57 paper-radio-button.red { 58 --paper-radio-button-checked-color: var(--paper-red-500); 59 --paper-radio-button-checked-ink-color: var(--paper-red-500); 60 --paper-radio-button-unchecked-color: var(--paper-red-900); 61 --paper-radio-button-unchecked-ink-color: var(--paper-red-900); 62 --paper-radio-button-label-color: var(--paper-red-500); 63 } 64 paper-radio-button.green { 65 --paper-radio-button-checked-color: var(--paper-green-500); 66 --paper-radio-button-checked-ink-color: var(--paper-green-500); 67 --paper-radio-button-unchecked-color: var(--paper-green-900); 68 --paper-radio-button-unchecked-ink-color: var(--paper-green-900); 69 --paper-radio-button-label-color: var(--paper-green-500); 70 } 71 </style> 72 73 <paper-radio-button class="red">Radio</paper-radio-button> 74 <paper-radio-button checked class="green">Radio</paper-radio-button> 75 </template> 76 </demo-snippet> 77 </div> 78</body> 79</html> 80