index.html
4.77 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!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="../paper-input.html">
<link rel="import" href="../paper-input-container.html">
<link rel="import" href="../paper-input-error.html">
<link rel="import" href="../paper-input-char-counter.html">
<link rel="import" href="../paper-textarea.html">
<link rel="import" href="../../iron-input/iron-input.html">
<link rel="import" href="../../iron-icon/iron-icon.html">
<link rel="import" href="../../iron-icons/iron-icons.html">
<link rel="import" href="../../paper-icon-button/paper-icon-button.html">
<link rel="import" href="ssn-input.html">
<link rel="stylesheet" href="../../paper-styles/color.html">
<link rel="import" href="../../paper-styles/demo-pages.html">
<style is="custom-style">
body {
padding: 40px;
}
paper-input.short {
width: 200px;
}
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;
}
</style>
</head>
<body unresolved>
<div class="vertical center-justified layout">
<h4>Text input</h4>
<div class="vertical-section">
<paper-input label="label"></paper-input>
<paper-input label="password" type="password"></paper-input>
<paper-input no-label-float label="label (no-label-float)"></paper-input>
<paper-input label="disabled" disabled></paper-input>
</div>
<h4>Text area</h4>
<div class="vertical-section">
<paper-textarea label="textarea label"></paper-textarea>
</div>
<h4>Validation</h4>
<div class="vertical-section">
<paper-input label="input validates on blur (required, auto-validate)" required auto-validate error-message="needs some text!"></paper-input>
<paper-input label="only type letters (auto-validate)" auto-validate pattern="[a-zA-Z]*" error-message="letters only!"></paper-input>
<paper-input id="inputForValidation" required label="only type letters (no auto validate)" pattern="[a-zA-Z]*" error-message="letters only, required input!"></paper-input>
<br>
<button onclick="validate()">Validate!</button>
</div>
<h4>Character counter</h4>
<div class="vertical-section">
<paper-input label="label" char-counter></paper-input>
<paper-input label="at most 10 letters" char-counter auto-validate pattern="[a-zA-Z]*" maxlength="10" error-message="letters only!"></paper-input>
<paper-textarea label="textarea" char-counter></paper-textarea>
<paper-textarea label="textarea with maxlength" char-counter maxlength="10"></paper-textarea>
<paper-textarea label="text area with rows and max-rows" rows="3" max-rows="4"></paper-textarea>
</div>
<h4>Prefixes and Suffixes</h4>
<div class="vertical-section">
<paper-input class="short" label="total" type="number">
<div prefix>$</div>
</paper-input>
<paper-input class="short" label="username">
<div suffix>@email.com</div>
</paper-input>
<paper-input class="short" label="icons and buttons" id="inputWithButton">
<iron-icon icon="search" prefix></iron-icon>
<paper-icon-button suffix onclick="clearInput()"
icon="clear" alt="clear" title="clear" tabindex="0">
</paper-icon-button>
</paper-input>
</div>
<h4>Complex inputs</h4>
<div class="vertical-section">
<template is="dom-bind">
<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>
</div>
</div>
<script>
function validate() {
document.getElementById('inputForValidation').validate();
}
function clearInput() {
document.getElementById('inputWithButton').value = '';
}
</script>
</body>
</html>