Formularios
Ejemplos y pautas del uso de formularios
Input
Tamaños
Añadir a la clase .formulario los diferentes tamaños.
Label sobre el formulario
Añadir un <div> contenedor con la clase .relative y dentro, encima del <input>, un <span> con la clase .label-absolute-top.
Textarea
Select
Select-estilo
Buscador con lupa
Checkbox input
Añadir a la clase .container-check a la etiqueta label.
Radio input
Añadir a la clase .container-radio a la etiqueta label.
Radio input colores
Añadir a la clase .custom-control-group a un <ul> sin estilo, y luego dentro de cada <li> añadir un <div> contendor con las clases .custom-control y .color-control, dentro de ese contendor añadir un <input> tipo radio con la clase .custom-control-input y debajo añadir una <label> con las clases .custom-control-label seguida de .dot para que el color aparezca como un círculo o .square como un cuadrado.
Switch input
Switch 1:
Switch 2:
Label
Añadir la la etiqueta <label> para ponerla por encima del formulario.
Añadir la clase .formulario a la etiqueta <label> para que se justifique a la izquierda del formulario y Añadir la clase .minwidth para que el formulario sea del 70% de largo.
Añadir .form-label-group para poner por encima de la etiqueta <label> y con texto justificado a la derecha.
Input con botones a los lados
Crear un div con la clase .input-group y añadir los iconos o botones a los lados del campo input.
Input type file
Crear un div con la clase .custom-file dentro añadir <input> con la clase .custom-file-input mas etiqueta <label> con clase .custom-file-label.
Crear una <label> con la clase .dropzone dentro añadir <input> con la clase .hidden junto con el iciono de upload y los textos.
524.5 KB
14.1 KB
Input group + calendario
Crear <input> tipo <date> con la clase .formulario.
Añadir dentro de la clase .input-group un <div> con la clase .zona-form-box con la alineación <izq> o <der> si se quiere que la caja apareza a un lado o a otro y dentro añadir el contenido.
Input-daterange
Crear una clase contenedora .relative y dentro las clases .input-daterange + .input-group y dentro los <input> separado por un <span> con un texto, para poder poner fechas, horas... desde / hasta.
http://ionden.com/a/plugins/ion.rangeSlider/index.html
Input Range sliders (javascript)
Básico
Con valor mínimo, valor máximo y punto inicial.
Doble
Control deslizante doble, rango especificado, cuadrícula y sufijo "€".
Doble
Control deslizante doble, rango especificado, cuadrícula y prefijo "$".
Valores negativos
Configurar el rango con valores negativos.
Pasos
Deslizamiento escalonado.
Fechas
La matriz de valores puede ser cualquier cosa, incluso cadenas.
Edades
Usando prefix y postfix al mismo tiempo.