Se usa una etiqueta flotante que se muestra grande cuando el contenido de campo es una cadena vacía y se muestra pequeña cuando el elemento se está capturando o cuando su contenido no está vacío.
Añade la class
md-filled-text-field
a un elemento de tipo
p
o
div
Usa la class
float
junto a la class
md-filled-text-field
cuando quieras que la etiqueta esté arriba todo el tiempo. Esto sirve para
los
output
,
input type="date"
e
input type="file"
entre otros tipos de elemento.
Las etiquetas deben ser
label
o
span
y deben colocarse inmediatamente después del elemento que realiza la
captura.
Los textos de ayuda deben ser elementos de tipo
small
que se colocan después de la etiqueta.
1 | <!DOCTYPE html> |
2 | <html lang="es"> |
3 | |
4 | <head> |
5 | <meta charset="UTF-8"> |
6 | <meta name="viewport" |
7 | content="width=device-width"> |
8 | |
9 | <title> |
10 | Campos de texto - PWA con MD |
11 | </title> |
12 | |
13 | <meta name="theme-color" |
14 | content="#fffbfe"> |
15 | <link rel="icon" sizes="32x32" |
16 | href="favicon.ico"> |
17 | <link rel="manifest" |
18 | href="site.webmanifest"> |
19 | |
20 | <link rel="stylesheet" |
21 | href="css/estilos.css"> |
22 | <script |
23 | src="ungap/custom-elements.js"> |
24 | </script> |
25 | <script type="module" |
26 | src="js/configura.js"></script> |
27 | |
28 | </head> |
29 | |
30 | <body> |
31 | |
32 | <md-top-app-bar |
33 | headline="headline"> |
34 | |
35 | <h1>Texto</h1> |
36 | |
37 | <button is="md-menu-button" |
38 | slot="navigation" |
39 | onclick="nav.abre()"></button> |
40 | |
41 | </md-top-app-bar> |
42 | |
43 | <h1 id="headline">Campos de texto</h1> |
44 | |
45 | <main> |
46 | |
47 | |
48 | <!-- Usa class="float" cuando |
49 | quieras que la etiqueta esté |
50 | arriba todo el tiempo. --> |
51 | <p class="md-filled-text-field float"> |
52 | <label for="saludo">Saludo</label> |
53 | <output id="saludo">Saludo</output> |
54 | </p> |
55 | |
56 | <p class="md-filled-text-field"> |
57 | <input id="nombre" required |
58 | placeholder="Nombre*"> |
59 | <label for="nombre">Nombre*</label> |
60 | <small>*Requerido</small> |
61 | </p> |
62 | |
63 | <p class="md-filled-text-field"> |
64 | <input id="email" type="email" |
65 | placeholder="Email"> |
66 | <label for="email" accesskey="M"> |
67 | |
68 | </label> |
69 | </p> |
70 | |
71 | <p class="md-filled-text-field float"> |
72 | <input id="fecha" type="date" |
73 | placeholder="Fecha"> |
74 | <label for="fecha">Fecha</label> |
75 | </p> |
76 | |
77 | <p class="md-filled-text-field"> |
78 | <textarea id="direccion" |
79 | placeholder="Dirección" |
80 | rows="3"></textarea> |
81 | <label for="direccion"> |
82 | Dirección |
83 | </label> |
84 | </p> |
85 | |
86 | </main> |
87 | |
88 | <nav-drw id="nav"></nav-drw> |
89 | |
90 | </body> |
91 | |
92 | </html> |
Los campos de texto en Material Design están definidos en https://m3.material.io/components/text-fields/overview.
Los menús en Material Design están definidos en https://material.io/components/menus.