third_party/polymer/v1_0/components-chromium/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 --><html><head><link rel="import" href="../polymer/polymer.html">
   9 <link rel="import" href="../paper-ripple/paper-ripple.html">
  10 <link rel="import" href="../paper-styles/default-theme.html">
  11 <link rel="import" href="../paper-behaviors/paper-inky-focus-behavior.html">
  12
  13 <!--
  14 `paper-radio-button` is a button that can be either checked or unchecked.
  15 User can tap the radio button to check or uncheck it.
  16
  17 Use a `<paper-radio-group>` to group a set of radio buttons.  When radio buttons
  18 are inside a radio group, exactly one radio button in the group can be checked
  19 at any time.
  20
  21 Example:
  22
  23     <paper-radio-button></paper-radio-button>
  24     <paper-radio-button>Item label</paper-radio-button>
  25
  26 ### Styling
  27
  28 The following custom properties and mixins are available for styling:
  29
  30 Custom property | Description | Default
  31 ----------------|-------------|----------
  32 `--paper-radio-button-unchecked-background-color` | Radio button background color when the input is not checked | `transparent`
  33 `--paper-radio-button-unchecked-color` | Radio button color when the input is not checked | `--primary-text-color`
  34 `--paper-radio-button-unchecked-ink-color` | Selected/focus ripple color when the input is not checked | `--primary-text-color`
  35 `--paper-radio-button-checked-color` | Radio button color when the input is checked | `--default-primary-color`
  36 `--paper-radio-button-checked-ink-color` | Selected/focus ripple color when the input is checked | `--default-primary-color`
  37 `--paper-radio-button-label-color` | Label color | `--primary-text-color`
  38
  39 @group Paper Elements
  40 @element paper-radio-button
  41 @hero hero.svg
  42 @demo demo/index.html
  43 -->
  44
  45 </head><body><dom-module id="paper-radio-button">
  46
  47   <link rel="import" type="css" href="paper-radio-button.css">
  48
  49   <template>
  50
  51     <div id="radioContainer">
  52       <div id="offRadio"></div>
  53       <div id="onRadio"></div>
  54       <paper-ripple id="ink" class="circle" center="" checked$="[[checked]]"></paper-ripple>
  55     </div>
  56
  57     <div id="radioLabel" aria-hidden="true"><content></content></div>
  58
  59   </template>
  60
  61   </dom-module>
  62 <script src="paper-radio-button-extracted.js"></script></body></html>