Patrón de etiqueta flotante de JavaScript puro para campos de formulario-Float-Labels. js
| Autor: | geminilab |
|---|---|
| Views Total: | 2,710 |
| Sitio oficial: | Ir a la web |
| Actualizado: | September 23, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Sólo otro plugin de JavaScript para crear el patrón de etiqueta flotante en los campos de formulario que admiten el campo de entrada, TextArea e incluso elementos selectos. Totalmente personalizable a través de JavaScript y SCSS.
Install it via package managers:
# Yarn yarn add float-labels.js # NPM $ npm install float-labels.js # Bower $ bower install float-labels.js
Funcionamiento
Agregue los archivos JS y CSS requeridos a la Página Web.
<link href="dist/float-labels.css" rel="stylesheet"> <script src="dist/float-labels.min.js"></script>
Inicialice la biblioteca en el elemento de formulario de destino como esta:
new FloatLabels( '.my-form');
Opciones predeterminadas para personalizar el patrón de etiqueta flotante.
new FloatLabels( '.my-form',{
customEvent
: null,
customLabel
: null,
exclude
: '.no-label',
inputRegex
: /email|number|password|search|tel|text|url/,
prioritize
: 'label', // label|placeholder
requiredClass: 'required',
style
: 0, // 0|1|2
transform
: 'input,select,textarea'
}); Override the default styles in the SCSS.
$float-labels-defaults: ( base-height : 24px, base-padding : 6px, border-radius : 3px, border-width : 1px, margin-bottom : 24px, color-background : #fff, color-background-active : #fff, color-background-focus : #fff, color-border : #dfdfdf, color-border-active : #dfdfdf, color-border-focus : #1976D2, color-placeholder : #bbb, color-required : #D32F2F, color-text : #444, color-text-focus : #1976D2, line-height : 1.5, font-size : 16px, font-size-small : 12px, font-weight : 400, transition-easing : ease-in-out, transition-speed : 0.2s, );
Registro de cambios
v3.3.5 (09/23/2018)
- Corregido: error de tipo no capturado: no se puede leer la propiedad ' defaultSelected ' de
