1 <!doctype html> 2 <!-- 3 @license 4 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 5 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 6 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 7 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 8 Code distributed by Google as part of the polymer project is also 9 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 10 --> 11 12 <html> 13 <head> 14 15 <meta charset="utf-8"> 16 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 17 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> 18 19 <title>paper-button demo</title> 20 21 <script src="../../webcomponentsjs/webcomponents-lite.js"></script> 22 <link rel="import" href="../../iron-demo-helpers/demo-snippet.html"> 23 <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html"> 24 <link rel="import" href="../../iron-icons/iron-icons.html"> 25 <link rel="import" href="../../paper-styles/color.html"> 26 <link rel="import" href="../paper-button.html"> 27 28 <style is="custom-style" include="demo-pages-shared-styles"> 29 .vertical-section-container { 30 max-width: 500px; 31 } 32 paper-button { 33 margin-left: 10px; 34 margin-right: 10px; 35 } 36 </style> 37 </head> 38 <body unresolved> 39 <div class="vertical-section-container centered"> 40 <h3>Buttons can be flat, raised, toggleable, or disabled</h3> 41 <demo-snippet class="centered-demo"> 42 <template> 43 <paper-button>link</paper-button> 44 <paper-button raised>raised</paper-button> 45 <paper-button toggles raised>toggles</paper-button> 46 <paper-button disabled>disabled</paper-button> 47 </template> 48 </demo-snippet> 49 50 <h3>Buttons can have icons</h3> 51 <demo-snippet class="centered-demo"> 52 <template> 53 <paper-button><iron-icon icon="check"></iron-icon>link</paper-button> 54 <paper-button raised><iron-icon icon="file-download"></iron-icon>raised</paper-button> 55 <paper-button toggles raised><iron-icon icon="favorite"></iron-icon>toggles</paper-button> 56 <paper-button disabled><iron-icon icon="block"></iron-icon>disabled</paper-button> 57 </template> 58 </demo-snippet> 59 60 <h3>Buttons can hide the ripple effect using the <i>noink</i> attribute</h3> 61 <demo-snippet class="centered-demo"> 62 <template> 63 <paper-button noink>link</paper-button> 64 <paper-button raised noink>raised</paper-button> 65 <paper-button toggles raised noink>toggles</paper-button> 66 <paper-button disabled noink>disabled</paper-button> 67 </template> 68 </demo-snippet> 69 70 <h3>Buttons can be styled using custom properties</h3> 71 <demo-snippet class="centered-demo"> 72 <template> 73 <paper-button class="custom pink">link</paper-button> 74 <paper-button raised class="custom indigo">raised</paper-button> 75 <paper-button toggles raised class="custom green">toggles</paper-button> 76 <paper-button disabled class="custom disabled">disabled</paper-button> 77 78 <style is="custom-style"> 79 paper-button.custom { 80 --paper-button-ink-color: var(--paper-pink-a200); 81 /* These could also be individually defined for each of the 82 specific css classes, but we'll just do it once as an example */ 83 --paper-button-flat-keyboard-focus: { 84 background-color: var(--paper-pink-a200); 85 color: white !important; 86 }; 87 --paper-button-raised-keyboard-focus: { 88 background-color: var(--paper-pink-a200) !important; 89 color: white !important; 90 }; 91 } 92 paper-button.custom:hover { 93 background-color: var(--paper-indigo-100); 94 } 95 paper-button.pink { 96 color: var(--paper-pink-a200); 97 98 } 99 paper-button.indigo { 100 background-color: var(--paper-indigo-500); 101 color: white; 102 --paper-button-raised-keyboard-focus: { 103 background-color: var(--paper-pink-a200) !important; 104 color: white !important; 105 }; 106 } 107 paper-button.green { 108 background-color: var(--paper-green-500); 109 color: white; 110 } 111 paper-button.green[active] { 112 background-color: var(--paper-red-500); 113 } 114 paper-button.disabled { 115 color: white; 116 } 117 </style> 118 </template> 119 </demo-snippet> 120 121 <h3>Buttons can be used as a link</h3> 122 <demo-snippet class="centered-demo"> 123 <template> 124 <a href="https://www.polymer-project.org/" tabindex="-1"> 125 <paper-button raised>Polymer Project</paper-button> 126 </a> 127 <style> 128 a paper-button, 129 a:active paper-button, 130 a:visited paper-button { 131 color: #000; 132 } 133 </style> 134 </template> 135 </demo-snippet> 136 </div> 137 </body> 138 </html> 139
