third_party/polymer/v1_0/components-chromium/paper-toggle-button/paper-toggle-button.html

   1 <!--
   2 @license
   3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
   4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   7 Code distributed by Google as part of the polymer project is also
   8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   9 --><html><head><link rel="import" href="../polymer/polymer.html">
  10 <link rel="import" href="../paper-styles/color.html">
  11 <link rel="import" href="../paper-styles/default-theme.html">
  12 <link rel="import" href="../paper-ripple/paper-ripple.html">
  13 <link rel="import" href="../paper-behaviors/paper-inky-focus-behavior.html">
  14
  15 <!--
  16 `paper-toggle-button` provides a ON/OFF switch that user can toggle the state
  17 by tapping or by dragging the switch.
  18
  19 Example:
  20
  21     <paper-toggle-button></paper-toggle-button>
  22
  23 ### Styling
  24
  25 The following custom properties and mixins are available for styling:
  26
  27 Custom property | Description | Default
  28 ----------------|-------------|----------
  29 `--paper-toggle-button-unchecked-bar-color` | Slider color when the input is not checked | `#000000`
  30 `--paper-toggle-button-unchecked-button-color` | Button color when the input is not checked | `--paper-grey-50`
  31 `--paper-toggle-button-unchecked-ink-color` | Selected/focus ripple color when the input is not checked | `--dark-primary-color`
  32 `--paper-toggle-button-checked-bar-color` | Slider button color when the input is checked | `--google-green-500`
  33 `--paper-toggle-button-checked-button-color` | Button color when the input is checked | `--google-green-500`
  34 `--paper-toggle-button-checked-ink-color` | Selected/focus ripple color when the input is checked | `--google-green-500`
  35
  36 @group Paper Elements
  37 @element paper-toggle-button
  38 @hero hero.svg
  39 @demo demo/index.html
  40 -->
  41
  42 </head><body><dom-module id="paper-toggle-button">
  43
  44   <link rel="import" type="css" href="paper-toggle-button.css">
  45
  46   <template>
  47
  48     <div id="toggleContainer">
  49       <div id="toggleBar" class="toggle-bar"></div>
  50       <div id="toggleButton" class="toggle-button">
  51         <paper-ripple id="ink" class="toggle-ink circle" recenters=""></paper-ripple>
  52       </div>
  53     </div>
  54
  55   </template>
  56
  57   </dom-module>
  58 <script src="paper-toggle-button-extracted.js"></script></body></html>