catapult/third_party/polymer/components/paper-input/demo/index.html - platform/external/chromium-trace - Git at Google

 <!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>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">

   <title>paper-input demo</title>

   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>

   <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
   <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
   <link rel="import" href="../../iron-icon/iron-icon.html">
   <link rel="import" href="../../iron-icons/iron-icons.html">
   <link rel="import" href="../../iron-input/iron-input.html">
   <link rel="import" href="../../paper-icon-button/paper-icon-button.html">
   <link rel="import" href="../../paper-styles/color.html">
   <link rel="import" href="../paper-input-container.html">
   <link rel="import" href="../paper-input-error.html">
   <link rel="import" href="../paper-input.html">
   <link rel="import" href="../paper-textarea.html">
   <link rel="import" href="ssn-input.html">

   <style is="custom-style" include="demo-pages-shared-styles">
     paper-input {
       display: block;
     }

     demo-snippet.horizontal {
       --demo-snippet-demo: {
         @apply(--layout-horizontal);
         @apply(--layout-justified);
         @apply(--layout-wrap);
       }
     }
     demo-snippet.horizontal paper-input {
       display: inline-block;
     }

     button {
       width: 70px;
     }

     #inputForValidation {
       display: inline-block;
       width: calc(100% - 75px);
     }

     .vertical-section-container {
       max-width: 600px;
     }

     paper-icon-button {
       color: var(--paper-red-300);
       --paper-icon-button-ink-color: var(--paper-red-a100);
       width: 23px; /* 15px + 2*4px for padding */
       height: 23px;
       padding: 0px 4px;
     }

     iron-icon {
       padding-right: 5px;
     }
   </style>
 </head>
 <body unresolved>
   <div class="vertical-section-container centered">
     <h3>Inputs can have different types, and be disabled</h3>
     <demo-snippet>
       <template>
         <paper-input label="text input"></paper-input>
         <paper-textarea label="autoresizing textarea input"></paper-textarea>
         <paper-input label="password input" type="password"></paper-input>
         <paper-input label="disabled input" disabled></paper-input>
       </template>
     </demo-snippet>

     <h3>Inputs can have character counters</h3>
     <demo-snippet>
       <template>
         <paper-input label="simple character counter" char-counter></paper-input>
         <paper-input label="input with at most 10 characters" char-counter maxlength="10"></paper-input>
       </template>
     </demo-snippet>

     <h3>The label can have different floating states</h3>
     <demo-snippet>
       <template>
         <paper-input label="this label floats after typing"></paper-input>
         <paper-input label="this label is always floating" always-float-label></paper-input>
         <paper-input label="this label never floats" no-label-float></paper-input>
         <paper-input label="this label is always floating" always-float-label placeholder="placeholder text"></paper-input>
       </template>
     </demo-snippet>

     <h3>Inputs can validate automatically or on demand, and can have custom error messages</h3>
     <demo-snippet>
       <template>
         <paper-input label="this input requires some text" required auto-validate error-message="needs some text!"></paper-input>
         <paper-input label="this input requires letters only" auto-validate pattern="[a-zA-Z]*" error-message="letters only!"></paper-input>
         <paper-input label="this input will only let you type letters" auto-validate allowed-pattern="[a-zA-Z]"></paper-input>
         <paper-input id="inputForValidation" required label="this input is manually validated" pattern="[a-zA-Z]*" error-message="letters only!"></paper-input>
         <button onclick="validate()">Validate!</button>
       </template>
     </demo-snippet>

     <h3>Inputs can have prefixes and suffixes</h3>
     <demo-snippet class="horizontal">
       <template>
         <paper-input label="total" type="number">
           <div prefix>$</div>
         </paper-input>
         <paper-input label="username" id="inputWithButton">
           <iron-icon icon="mail" prefix></iron-icon>
           <div suffix>@email.com</div>
           <paper-icon-button suffix onclick="clearInput()"
               icon="clear" alt="clear" title="clear">
           </paper-icon-button>
         </paper-input>
       </template>
     </demo-snippet>

     <h3>Inputs can have custom logic</h3>
     <demo-snippet>
       <template>
         <paper-input-container always-float-label auto-validate attr-for-value="value">
           <label>Social Security Number</label>
           <ssn-input class="paper-input-input"></ssn-input>
           <paper-input-error>SSN invalid!</paper-input-error>
         </paper-input-container>
       </template>
     </demo-snippet>
   </div>

   <script>
     function validate() {
       document.getElementById('inputForValidation').validate();
     }

     function clearInput() {
       document.getElementById('inputWithButton').value = '';
     }
   </script>
 </body>
 </html>
	<!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>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">

	<title>paper-input demo</title>

	<script src="../../webcomponentsjs/webcomponents-lite.js"></script>

	<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
	<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
	<link rel="import" href="../../iron-icon/iron-icon.html">
	<link rel="import" href="../../iron-icons/iron-icons.html">
	<link rel="import" href="../../iron-input/iron-input.html">
	<link rel="import" href="../../paper-icon-button/paper-icon-button.html">
	<link rel="import" href="../../paper-styles/color.html">
	<link rel="import" href="../paper-input-container.html">
	<link rel="import" href="../paper-input-error.html">
	<link rel="import" href="../paper-input.html">
	<link rel="import" href="../paper-textarea.html">
	<link rel="import" href="ssn-input.html">

	<style is="custom-style" include="demo-pages-shared-styles">
	paper-input {
	display: block;
	}

	demo-snippet.horizontal {
	--demo-snippet-demo: {
	@apply(--layout-horizontal);
	@apply(--layout-justified);
	@apply(--layout-wrap);
	}
	}
	demo-snippet.horizontal paper-input {
	display: inline-block;
	}

	button {
	width: 70px;
	}

	#inputForValidation {
	display: inline-block;
	width: calc(100% - 75px);
	}

	.vertical-section-container {
	max-width: 600px;
	}

	paper-icon-button {
	color: var(--paper-red-300);
	--paper-icon-button-ink-color: var(--paper-red-a100);
	width: 23px; /* 15px + 24px for padding /
	height: 23px;
	padding: 0px 4px;
	}

	iron-icon {
	padding-right: 5px;
	}
	</style>
	</head>
	<body unresolved>
	<div class="vertical-section-container centered">
	<h3>Inputs can have different types, and be disabled</h3>
	<demo-snippet>
	<template>
	<paper-input label="text input"></paper-input>
	<paper-textarea label="autoresizing textarea input"></paper-textarea>
	<paper-input label="password input" type="password"></paper-input>
	<paper-input label="disabled input" disabled></paper-input>
	</template>
	</demo-snippet>

	<h3>Inputs can have character counters</h3>
	<demo-snippet>
	<template>
	<paper-input label="simple character counter" char-counter></paper-input>
	<paper-input label="input with at most 10 characters" char-counter maxlength="10"></paper-input>
	</template>
	</demo-snippet>

	<h3>The label can have different floating states</h3>
	<demo-snippet>
	<template>
	<paper-input label="this label floats after typing"></paper-input>
	<paper-input label="this label is always floating" always-float-label></paper-input>
	<paper-input label="this label never floats" no-label-float></paper-input>
	<paper-input label="this label is always floating" always-float-label placeholder="placeholder text"></paper-input>
	</template>
	</demo-snippet>

	<h3>Inputs can validate automatically or on demand, and can have custom error messages</h3>
	<demo-snippet>
	<template>
	<paper-input label="this input requires some text" required auto-validate error-message="needs some text!"></paper-input>
	<paper-input label="this input requires letters only" auto-validate pattern="[a-zA-Z]*" error-message="letters only!"></paper-input>
	<paper-input label="this input will only let you type letters" auto-validate allowed-pattern="[a-zA-Z]"></paper-input>
	<paper-input id="inputForValidation" required label="this input is manually validated" pattern="[a-zA-Z]*" error-message="letters only!"></paper-input>
	<button onclick="validate()">Validate!</button>
	</template>
	</demo-snippet>

	<h3>Inputs can have prefixes and suffixes</h3>
	<demo-snippet class="horizontal">
	<template>
	<paper-input label="total" type="number">
	<div prefix>$</div>
	</paper-input>
	<paper-input label="username" id="inputWithButton">
	<iron-icon icon="mail" prefix></iron-icon>
	<div suffix>@email.com</div>
	<paper-icon-button suffix onclick="clearInput()"
	icon="clear" alt="clear" title="clear">
	</paper-icon-button>
	</paper-input>
	</template>
	</demo-snippet>

	<h3>Inputs can have custom logic</h3>
	<demo-snippet>
	<template>
	<paper-input-container always-float-label auto-validate attr-for-value="value">
	<label>Social Security Number</label>
	<ssn-input class="paper-input-input"></ssn-input>
	<paper-input-error>SSN invalid!</paper-input-error>
	</paper-input-container>
	</template>
	</demo-snippet>
	</div>

	<script>
	function validate() {
	document.getElementById('inputForValidation').validate();
	}

	function clearInput() {
	document.getElementById('inputWithButton').value = '';
	}
	</script>
	</body>
	</html>