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

   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 `paper-toggle-button` provides a ON/OFF switch that user can toggle the state
  10 by tapping or by dragging the swtich.
  11
  12 Example:
  13
  14     <paper-toggle-button></paper-toggle-button>
  15
  16 Styling toggle button:
  17
  18 To change the toggle color:
  19
  20     paper-toggle-button::shadow .toggle {
  21       background-color: #9c27b0;
  22     }
  23
  24 To change the ink color:
  25
  26     paper-toggle-button::shadow .toggle-ink {
  27       color: #009688;
  28     }
  29
  30 To change the checked toggle color:
  31
  32     paper-toggle-button::shadow [checked] .toggle {
  33       background-color: #4285f4;
  34     }
  35
  36 To change the checked ink color:
  37
  38     paper-toggle-button::shadow [checked] .toggle-ink {
  39       color: #4285f4;
  40     }
  41
  42 To change the toggle bar and toggle button colors separately:
  43
  44     paper-toggle-button::shadow .toggle-bar {
  45       background-color: #5677fc;
  46     }
  47
  48     paper-toggle-button::shadow .toggle-button {
  49       background-color: #9c27b0;
  50     }
  51
  52 @group Paper Elements
  53 @element paper-toggle-button
  54 @homepage github.io
  55 --><html><head><link rel="import" href="../paper-radio-button/paper-radio-button.html">
  56 <link rel="import" href="../core-a11y-keys/core-a11y-keys.html">
  57
  58 </head><body><polymer-element name="paper-toggle-button" attributes="checked disabled" role="button" aria-pressed="false" tabindex="0" assetpath="">
  59 <template>
  60
  61   <link rel="stylesheet" href="paper-toggle-button.css">
  62
  63   <core-a11y-keys target="{{}}" keys="space" on-keys-pressed="{{tap}}"></core-a11y-keys>
  64
  65   <div id="toggleContainer" checked?="{{checked}}" disabled?="{{disabled}}">
  66
  67     <div id="toggleBar" class="toggle toggle-bar"></div>
  68
  69     <div id="toggleButton" class="toggle toggle-button">
  70       <paper-ripple id="ink" class="toggle-ink circle"></paper-ripple>
  71     </div>
  72
  73   </div>
  74
  75 </template>
  76
  77 </polymer-element>
  78 <script charset="utf-8" src="paper-toggle-button-extracted.js"></script></body></html>