Patrón de etiqueta flotante implementado en JavaScript-Floatl
| Autor: | richardvenneman |
|---|---|
| Views Total: | 2,278 |
| Sitio oficial: | Ir a la web |
| Actualizado: | September 22, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Un sencillo plugin de JavaScript libre de dependencias que le permite implementar el conocido patrón de etiqueta flotante en campos de formulario (entrada y TextArea) para mejorar la experiencia del usuario.
Instalación
# Yarn $ yarn add floatl # NPM $ npm install floatl --save
Funcionamiento
Incluya el código JavaScript y la hoja de estilos de Floatl en la Página Web.
<link href="lib/css/floatl.css" rel="stylesheet"> <script src="lib/js/floatl.js"></script>
Agregue las siguientes clases CSS a los campos de formulario existentes:
<div class="floatl js-floatl"> <label class="floatl__label">Username</label> <input class="floatl__input" placeholder="Username" type="text"> </div> <div class="floatl js-floatl"> <label class="floatl__label">Password</label> <input class="floatl__input" placeholder="Password" type="password"> </div>
Inicialice el Floatl y ya terminamos.
new Floatl(document.querySelectorAll('.js-floatl')[0])
new Floatl(document.querySelectorAll('.js-floatl')[1]) Registro de cambios
v0.2.1 (09/22/2018)
- Bugfix
