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

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: third_party/polymer/components/iron-form/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/iron-form/bower.json ('k') | third_party/polymer/components/iron-form/demo/simple-element.html » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: third_party/polymer/components/iron-form/demo/index.html
diff --git a/third_party/polymer/components/iron-form/demo/index.html b/third_party/polymer/components/iron-form/demo/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..ba8079ef5184736e8ad2bf50137c2e8dd70af3fb
--- /dev/null
+++ b/third_party/polymer/components/iron-form/demo/index.html
@@ -0,0 +1,261 @@
+<!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>iron-form 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-button/paper-button.html">
+ <link rel="import" href="../../paper-checkbox/paper-checkbox.html">
+ <link rel="import" href="../../paper-dropdown-menu/paper-dropdown-menu.html">
+ <link rel="import" href="../../paper-input/paper-input.html">
+ <link rel="import" href="../../paper-item/paper-item.html">
+ <link rel="import" href="../../paper-menu/paper-menu.html">
+ <link rel="import" href="../../paper-spinner/paper-spinner.html">
+ <link rel="import" href="../../paper-styles/color.html">
+ <link rel="import" href="../../paper-styles/typography.html">
+ <link rel="import" href="../iron-form.html">
+ <link rel="import" href="simple-element.html">
+
+ <style is="custom-style" include="demo-pages-shared-styles">
+ .output {
+ margin-top: 20px;
+ word-wrap: break-word;
+ @apply(--paper-font-common-code);
+ }
+ form > paper-button {
+ width: 45%;
+ margin-top: 20px;
+ }
+ form > paper-button:not([disabled]) {
+ background: var(--paper-light-blue-500);
+ color: white;
+ }
+ button {
+ margin-top: 20px;
+ }
+ paper-spinner {
+ width: 14px;
+ height: 14px;
+ margin-right: 20px;
+ }
+ paper-dropdown-menu {
+ display: block;
+ }
+ demo-snippet {
+ --demo-snippet-code: {
+ max-height: 300px;
+ };
+ }
+ </style>
+</head>
+<body unresolved>
+
+ <div class="vertical-section-container centered">
+ <h3>An <code>iron-form</code> can submit both custom and native elements.</h3>
+ <demo-snippet>
+ <template>
+ <form is="iron-form" method="get" action="/" id="basic">
+ <paper-input name="name" label="Name" required></paper-input>
+ <br>
+ <input type="checkbox" name="food" value="donuts" checked> I like donuts<br>
+ <input type="checkbox" name="food" value="pizza" required> I like pizza<br>
+ <paper-checkbox name="food" value="cheese" required>I like cheese</paper-checkbox><br>
+ <paper-dropdown-menu label="Cars" name="cars" required>
+ <paper-menu class="dropdown-content">
+ <paper-item value="volvo">Volvo</paper-item>
+ <paper-item value="saab">Saab</paper-item>
+ <paper-item value="fiat">Fiat</paper-item>
+ <paper-item value="audi">Audi</paper-item>
+ </paper-menu>
+ </paper-dropdown-menu>
+ <paper-button raised onclick="_submit(event)">Submit</paper-button>
+ <paper-button raised onclick="_reset(event)">Reset</paper-button>
+ <div class="output"></div>
+ </form>
+ <script>
+ function _submit(event) {
+ Polymer.dom(event).localTarget.parentElement.submit();
+ }
+ function _reset(event) {
+ var form = Polymer.dom(event).localTarget.parentElement
+ form.reset();
+ form.querySelector('.output').innerHTML = '';
+ }
+ basic.addEventListener('iron-form-submit', function(event) {
+ this.querySelector('.output').innerHTML = JSON.stringify(event.detail);
+ });
+ </script>
+ </template>
+ </demo-snippet>
+
+ <h3>You can submit a form in many different ways: by manually calling submit(),
+ using a native button, or by wrapping a paper-button in a native button:</h3>
+ <demo-snippet>
+ <template>
+ <style>
+ button.no-style {
+ -webkit-appearance: none;
+ border: 0;
+ padding: 0;
+ background: transparent;
+ }
+ </style>
+ <p>You can also submit this form by pressing "Enter" in the input</p>
+ <form is="iron-form" method="get" action="/" id="submitOptions">
+ <paper-input name="name" label="Name" value="Batman" required></paper-input>
+ <button type="submit">Submit</button>
+ <button type="submit" class="no-style"><paper-button raised>Submit</paper-button></button>
+ <br>
+ <paper-button raised onclick="_submit(event)">Submit</paper-button>
+ <paper-button raised onclick="_reset(event)">Reset</paper-button>
+
+ <div class="output"></div>
+ </form>
+ <script>
+ function _submit(event) {
+ Polymer.dom(event).localTarget.parentElement.submit();
+ }
+ function _reset(event) {
+ var form = Polymer.dom(event).localTarget.parentElement
+ form.reset();
+ form.querySelector('.output').innerHTML = '';
+ }
+ submitOptions.addEventListener('iron-form-submit', function(event) {
+ this.querySelector('.output').innerHTML = JSON.stringify(event.detail);
+ });
+ </script>
+ </template>
+ </demo-snippet>
+
+ <h3>To customize the request sent to the server, you can listen to the `iron-form-presubmit` event</h3>
+ <demo-snippet>
+ <template>
+ <form is="iron-form" method="get" action="/" id="presubmit">
+ <paper-input name="name" label="Name" value="Batman" required></paper-input>
+ <paper-button raised onclick="_submit(event)">Submit</paper-button>
+ <paper-button raised onclick="_reset(event)">Reset</paper-button>
+ <div class="output"></div>
+ </form>
+ <script>
+ function _submit(event) {
+ Polymer.dom(event).localTarget.parentElement.submit();
+ }
+ function _reset(event) {
+ var form = Polymer.dom(event).localTarget.parentElement
+ form.reset();
+ form.querySelector('.output').innerHTML = '';
+ }
+ presubmit.addEventListener('iron-form-presubmit', function(event) {
+ this.request.params['sidekick'] = 'Robin';
+ });
+ presubmit.addEventListener('iron-form-submit', function(event) {
+ this.querySelector('.output').innerHTML = JSON.stringify(event.detail);
+ });
+ </script>
+ </template>
+ </demo-snippet>
+
+ <h3>Example of an <code>iron-form</code> reacting to state changes.</h3>
+ <p>This form will have the "Submit" button disabled until all fields
+ are valid, and then show a spinner during submission.</p>
+
+ <demo-snippet>
+ <template>
+
+ <form is="iron-form" method="get" action="/" id="eventsDemo">
+ <paper-input name="name" label="Name" required auto-validate></paper-input>
+ <paper-input name="password" label="Password" type="password" required auto-validate></paper-input>
+ <paper-checkbox name="read" required>You must check this box</paper-checkbox><br>
+ <paper-button raised onclick="_delayedSubmit(event)" disabled id="eventsDemoSubmit">
+ <paper-spinner id="spinner" hidden></paper-spinner>Submit</paper-button>
+ <paper-button raised onclick="_reset(event)">Reset</paper-button>
+ <div class="output"></div>
+ </form>
+ <script>
+ eventsDemo.addEventListener('change', function(event) {
+ // Validate the entire form to see if we should enable the `Submit` button.
+ eventsDemoSubmit.disabled = !eventsDemo.validate();
+ });
+ function _delayedSubmit(event) {
+ spinner.active = true;
+ spinner.hidden = false;
+ eventsDemoSubmit.disabled = true;
+ // Simulate a slow server response.
+ setTimeout(function() {
+ Polymer.dom(event).localTarget.parentElement.submit();
+ }, 1000);
+ }
+ function _reset(event) {
+ var form = Polymer.dom(event).localTarget.parentElement
+ form.reset();
+ form.querySelector('.output').innerHTML = '';
+ }
+ document.getElementById('eventsDemo').addEventListener('iron-form-submit', function(event) {
+ spinner.active = false;
+ spinner.hidden = true;
+ eventsDemoSubmit.disabled = false;
+ this.querySelector('.output').innerHTML = JSON.stringify(event.detail);
+ });
+ </script>
+ </template>
+ </demo-snippet>
+
+ <h3>Example of using a native <code>form</code> to do a page redirect.</h3>
+
+ <p>Since an <code>iron-form</code> submits its elements with an XHR,
+ it cannot do a page redirect after submission. If you need one, you
+ can use a native <code>form</code> element and submit all the custom
+ elements using <code>hidden</code> inputs.</p>
+ <demo-snippet>
+ <template>
+ <!-- This form is only used to display the elements -->
+ <form is="iron-form" id="redirectDemo">
+ <paper-input name="name" label="Name" required></paper-input>
+ <paper-input name="password" label="Password" type="password" required></paper-input>
+ <paper-checkbox name="read" required>You must check this box</paper-checkbox><br>
+ <paper-button raised onclick="_nativeSubmit(event)">Submit</paper-button>
+ </form>
+
+ <!-- This form is used to submit the elements. This is where you would
+ set your method, action, etc. -->
+ <form method="get" action="redirect" id="nativeForm">
+ </form>
+ <script>
+ function _nativeSubmit(event) {
+ if (redirectDemo.validate()) {
+ // For each element the iron-form wants to submit, create a hidden
+ // input in the submission form.
+ var serializedItems = redirectDemo.serialize();
+ for (var name in serializedItems) {
+ var input = document.createElement('input');
+ input.hidden = true;
+ input.name = name;
+ input.value = serializedItems[name];
+ nativeForm.appendChild(input);
+ }
+ nativeForm.submit();
+ }
+ }
+ </script>
+ </template>
+ </demo-snippet>
+
+ </div>
+</body>
+
+</html>
« no previous file with comments | « third_party/polymer/components/iron-form/bower.json ('k') | third_party/polymer/components/iron-form/demo/simple-element.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698