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
label,
span,
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.
El rótulo de las etiquetas deben ser
span
o
label
y deben colocarse inmediatamente después del elemento que realiza la
captura.
Para que la etiquta flote correctamente, el elemento de captura debe
repetir el rótulo de la etiqueta en el atributo
placeholder.
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" class="light dark"> |
| 3 | |
| 4 | <head> |
| 5 | |
| 6 | <meta charset="UTF-8"> |
| 7 | <title>Campos de texto - PWA con MD</title> |
| 8 | |
| 9 | <script src="js/registraServiceWorker.js"></script> |
| 10 | |
| 11 | <meta name="viewport" content="width=device-width"> |
| 12 | <meta name="theme-color" content="#fffbfe"> |
| 13 | <link rel="icon" sizes="32x32" href="favicon.ico"> |
| 14 | <link rel="manifest" href="site.webmanifest"> |
| 15 | <script src="ungap/custom-elements.js"></script> |
| 16 | |
| 17 | <script type="module" src="js/configura.js"></script> |
| 18 | <link rel="stylesheet" href="css/estilos.css"> |
| 19 | <link rel="stylesheet" href="css/transicion_completa.css"> |
| 20 | |
| 21 | </head> |
| 22 | |
| 23 | <body> |
| 24 | |
| 25 | <md-top-app-bar headline="headline"> |
| 26 | |
| 27 | <h1>Texto</h1> |
| 28 | |
| 29 | <button is="md-menu-button" slot="navigation"></button> |
| 30 | |
| 31 | </md-top-app-bar> |
| 32 | |
| 33 | <h1 id="headline">Campos de texto</h1> |
| 34 | |
| 35 | <main> |
| 36 | |
| 37 | <!-- Usa |
| 38 | class="float" |
| 39 | cuando quieras que la etiqueta esté arriba todo el tiempo. --> |
| 40 | <p> |
| 41 | <label class="md-filled-text-field float"> |
| 42 | <output>Saludo</output> |
| 43 | <span>Saludo</span> |
| 44 | </label> |
| 45 | </p> |
| 46 | |
| 47 | <p> |
| 48 | <label class="md-filled-text-field"> |
| 49 | <input required placeholder="Nombre*"> |
| 50 | <span>Nombre *</span> |
| 51 | <small>Obligatorio</small> |
| 52 | </label> |
| 53 | </p> |
| 54 | |
| 55 | <p> |
| 56 | <label class="md-filled-text-field"> |
| 57 | <input type="email" placeholder="Email"> |
| 58 | <span accesskey="M">Email</span> |
| 59 | </label> |
| 60 | </p> |
| 61 | |
| 62 | <p> |
| 63 | <label class="md-filled-text-field float"> |
| 64 | <input type="date" placeholder="Fecha"> |
| 65 | <span>Fecha</span> |
| 66 | </label> |
| 67 | </p> |
| 68 | |
| 69 | <p> |
| 70 | <label class="md-filled-text-field"> |
| 71 | <textarea rows="3" placeholder="Dirección"></textarea> |
| 72 | <span>Dirección</span> |
| 73 | </label> |
| 74 | </p> |
| 75 | |
| 76 | </main> |
| 77 | |
| 78 | <nav-drw></nav-drw> |
| 79 | |
| 80 | </body> |
| 81 | |
| 82 | </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.