Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(30)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: third_party/polymer/components/paper-checkbox/demo/index.html

Issue 2906483004: [pinpoint] Add iron-form and paper-checkbox to polymer components. (Closed)
Patch Set: Created 3 years, 7 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « third_party/polymer/components/paper-checkbox/bower.json ('k') | third_party/polymer/components/paper-checkbox/index.html » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: third_party/polymer/components/paper-checkbox/demo/index.html
diff --git a/third_party/polymer/components/paper-checkbox/demo/index.html b/third_party/polymer/components/paper-checkbox/demo/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..c52eef052bcc38b1c7d65d8f7fd0c368dfb8439a
--- /dev/null
+++ b/third_party/polymer/components/paper-checkbox/demo/index.html
@@ -0,0 +1,116 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+ <head>
+ <title>paper-checkbox demo</title>
+
+ <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+ <meta name="mobile-web-app-capable" content="yes">
+ <meta name="apple-mobile-web-app-capable" content="yes">
+
+ <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+ <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
+ <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
+ <link rel="import" href="../paper-checkbox.html">
+
+ <style is="custom-style" include="demo-pages-shared-styles">
+ paper-checkbox {
+ display: block;
+ margin-right: 24px;
+ }
+
+ demo-snippet {
+ margin-bottom: 40px;
+ }
+ .vertical-section-container {
+ max-width: 550px;
+ }
+ </style>
+ </head>
+ <body unresolved>
+ <div class="vertical-section-container centered">
+ <h3>Checkboxes can be checked or unchecked, or disabled entirely</h3>
+ <demo-snippet class="centered-demo">
+ <template>
+ <paper-checkbox>Checkbox</paper-checkbox>
+ <paper-checkbox checked>Checkbox</paper-checkbox>
+ <paper-checkbox disabled>Disabled</paper-checkbox>
+ </template>
+ </demo-snippet>
+
+ <h3>Checkboxes can hide the ripple effect using the <i>noink</i> attribute</h3>
+ <demo-snippet class="centered-demo">
+ <template>
+ <paper-checkbox noink>Checkbox</paper-checkbox>
+ </template>
+ </demo-snippet>
+
+ <h3>Checkboxes can be styled using custom properties</h3>
+ <demo-snippet class="centered-demo small-text">
+ <template>
+ <style is="custom-style">
+ paper-checkbox.red {
+ --paper-checkbox-checked-color: var(--paper-red-500);
+ --paper-checkbox-checked-ink-color: var(--paper-red-500);
+ --paper-checkbox-unchecked-color: var(--paper-red-900);
+ --paper-checkbox-unchecked-ink-color: var(--paper-red-900);
+ --paper-checkbox-label-color: var(--paper-red-500);
+ --paper-checkbox-vertical-align: top;
+ }
+
+ paper-checkbox.green {
+ align-self: center;
+ border: 1px solid var(--paper-green-200);
+ padding: 8px 16px;
+
+ --paper-checkbox-checked-color: var(--paper-green-500);
+ --paper-checkbox-checked-ink-color: var(--paper-green-500);
+ --paper-checkbox-unchecked-color: var(--paper-green-900);
+ --paper-checkbox-unchecked-ink-color: var(--paper-green-900);
+ --paper-checkbox-label-color: var(--paper-green-500);
+ --paper-checkbox-label-spacing: 0;
+ --paper-checkbox-margin: 8px 16px 8px 0;
+ --paper-checkbox-vertical-align: top;
+ }
+
+ paper-checkbox.blue {
+ --paper-checkbox-checked-color: var(--paper-blue-500);
+ --paper-checkbox-checked-ink-color: var(--paper-blue-500);
+ --paper-checkbox-unchecked-color: var(--paper-blue-900);
+ --paper-checkbox-unchecked-ink-color: var(--paper-blue-900);
+ --paper-checkbox-label-color: var(--paper-blue-500);
+ --paper-checkbox-label-checked-color: var(--paper-blue-900);
+ }
+
+ paper-checkbox .subtitle {
+ display: block;
+ font-size: 0.8em;
+ margin-top: 2px;
+ max-width: 150px;
+ }
+ </style>
+
+ <paper-checkbox class="red">
+ Checkbox
+ <span class="subtitle">With a subtitle</span>
+ </paper-checkbox>
+ <paper-checkbox checked class="green">
+ Checkbox
+ <span class="subtitle">
+ With a longer subtitle that wraps to another line
+ </span>
+ </paper-checkbox>
+ <paper-checkbox class="blue">Checkbox</paper-checkbox>
+ </template>
+ </demo-snippet>
+ </div>
+ </body>
+</html>
« no previous file with comments | « third_party/polymer/components/paper-checkbox/bower.json ('k') | third_party/polymer/components/paper-checkbox/index.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698