Gitiles
Code Review Sign In
gerrit.avm99963.com / hores-external / be50d49a1de3579494650ceb3cad0f04719b087f / . / node_modules / material-design-lite / dist / components / textfield / demo.html
blob: 3e6625e45f6738da30d162bf99ada8e710bb6cb0 [file] [log] [blame]
Copybara botbe50d492023-11-30 00:16:42 +0100[diff] [blame^]1<!doctype html>
2<html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
7 <meta name="viewport" content="width=device-width, initial-scale=1">
8 <title>textfield test</title>
9
10 <!-- Fonts -->
11 <link href='https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
12 <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
13 rel="stylesheet">
14
15 <!-- Page styles -->
16 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.css">
17 <link rel="stylesheet" href="../../material.min.css">
18 <link rel="stylesheet" href="../../components/demos.css">
19 <script src="../../material.min.js"></script>
20
21
22 <style>
23
24 </style>
25
26 </head>
27 <body>
28
29 <div style="padding-top: 24px;">
30
31
32<style>
33 .demo-textfield__textfield-expanding .mdl-textfield {
34 width: 100px;
35 }
36</style>
37
38{% include "textfield-expanding.html" %}
39
40<!-- Expandable Textfield -->
41<form action="#">
42 <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
43 <label class="mdl-button mdl-js-button mdl-button--icon" for="sample6">
44 <i class="material-icons">search</i>
45 </label>
46 <div class="mdl-textfield__expandable-holder">
47 <input class="mdl-textfield__input" type="text" id="sample6">
48 <label class="mdl-textfield__label" for="sample-expandable">Expandable Input</label>
49 </div>
50 </div>
51</form>
52
53<style>
54 .demo-textfield__textfield-floating-numeric .mdl-textfield {
55 width: 100px;
56 }
57</style>
58
59{% include "textfield-floating-numeric.html" %}
60
61<!-- Numeric Textfield with Floating Label -->
62<form action="#">
63 <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
64 <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="sample4">
65 <label class="mdl-textfield__label" for="sample4">Number...</label>
66 <span class="mdl-textfield__error">Input is not a number!</span>
67 </div>
68</form>
69
70<style>
71 .demo-textfield__textfield-floating-text .mdl-textfield {
72 width: 100px;
73 }
74</style>
75
76{% include "textfield-floating-text.html" %}
77
78<!-- Textfield with Floating Label -->
79
80<form action="#">
81 <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
82 <input class="mdl-textfield__input" type="text" id="sample3">
83 <label class="mdl-textfield__label" for="sample3">Text...</label>
84 </div>
85</form>
86
87<style>
88 .demo-textfield__textfield-multi-line .mdl-textfield {
89 width: 100px;
90 }
91</style>
92
93{% include "textfield-multi-line.html" %}
94
95<!-- Floating Multiline Textfield -->
96<form action="#">
97 <div class="mdl-textfield mdl-js-textfield">
98 <textarea class="mdl-textfield__input" type="text" rows= "3" id="sample5" ></textarea>
99 <label class="mdl-textfield__label" for="sample5">Text lines...</label>
100 </div>
101</form>
102
103<style>
104 .demo-textfield__textfield-numeric .mdl-textfield {
105 width: 100px;
106 }
107</style>
108
109{% include "textfield-numeric.html" %}
110
111<!-- Numeric Textfield -->
112<form action="#">
113 <div class="mdl-textfield mdl-js-textfield">
114 <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="sample2">
115 <label class="mdl-textfield__label" for="sample2">Number...</label>
116 <span class="mdl-textfield__error">Input is not a number!</span>
117 </div>
118</form>
119
120<style>
121 .demo-textfield__textfield-text .mdl-textfield {
122 width: 100px;
123 }
124</style>
125
126{% include "textfield-text.html" %}
127
128<!-- Simple Textfield -->
129<form action="#">
130 <div class="mdl-textfield mdl-js-textfield">
131 <input class="mdl-textfield__input" type="text" id="sample1">
132 <label class="mdl-textfield__label" for="sample1">Text...</label>
133 </div>
134</form>
135
136
137 </div>
138 <!-- Built with love using Material Design Lite -->
139
140
141 <script>
142
143 </script>
144 </body>
145</html>