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