Widgets de la interfaz de usuario

Introducción
Cómo utilizar un widget de interfaz de usuario
Cómo configurar un widget de interfaz de usuario
Atributos personalizados para widgets de interfaz de usuario

Introducción

Los widgets de UI son controles personalizados que mejoran la visualización de nuestros campos HTML5 estándar. Por ejemplo, podemos usar el widget "Entrada telefónica internacional" para mostrar un menú desplegable con banderas y códigos de países como marcadores de posición dinámicos. Por supuesto, podemos personalizarlos haciendo uso de los atributos personalizados del Creador de formularios.

Cómo utilizar un widget de interfaz de usuario

Usar widgets de UI es bastante fácil, simplemente vaya a Configuración de formulario > Configuración de UI y seleccione el widget de UI que desea usar en su formulario.

Por ejemplo, seleccionaremos el widget "Entrada telefónica internacional" y haremos clic en Guardar.

Veamos el resultado.

Tenga en cuenta que algunos widgets requieren agregar una clase CSS a su campo de formulario. Para otros, como en nuestro ejemplo anterior, sólo necesitamos activarlos para mostrarlos en el formulario.

Cómo configurar un widget de interfaz de usuario

Para configurar el widget de interfaz de usuario que queremos usar, debemos ir al Creador de formularios > Configuración de campo > Atributos personalizados.

En nuestro ejemplo, las Entradas Telefónicas Internacionales muestran la bandera del país del Usuario. Para este ejemplo, personalizaremos este comportamiento para mostrar la bandera de Gran Bretaña. Para esto vamos a agregar el siguiente atributo personalizado:

Atributo: datos-país-inicial
Valor: GB

Y guardar todo.

Veamos el resultado.

Atributos personalizados para widgets de interfaz de usuario

Ahora vamos a enumerar todos los atributos que podemos usar para configurar los widgets de la interfaz de usuario.

Recogedor plano

Reemplace cualquier campo de Fecha con un selector de fechas liviano para varios navegadores.

formato alternativo de datos : una cadena de caracteres que se utilizan para definir cómo se mostrará la fecha en el cuadro de entrada. Por ejemplo: F j, Y
data-allow-invalid-preload : Permite la precarga de una fecha no válida. Puede ser verdadero o falso.
data-aria-date-format : Define cómo se formateará la fecha en aria-label para los días calendario. Por ejemplo: F j, Y
data-default-date : establece la fecha seleccionada inicial en formato HTML5 (aaaa-mm-dd). Por ejemplo: 2021-12-31
data-default-hour : Valor inicial del elemento hora. Por ejemplo: 12
data-default-minuto : Valor inicial del elemento minuto. Por ejemplo: 0
data-disable : fechas separadas por comas en formato HTML5. Por ejemplo: 2022-01-01,2022-01-02,2022-01-03
data-disable-mobile : configúrelo en verdadero para usar siempre el selector no nativo. Puede ser verdadero o falso.
data-enable-time : habilita el selector de hora. Puede ser verdadero o falso.
data-enable-segundos : habilita segundos en el selector de tiempo. Puede ser verdadero o falso.
incremento-hora-datos : ajusta el paso para la entrada de horas (incluido el desplazamiento). Por ejemplo: 1
data-inline : muestra el calendario en línea. Puede ser verdadero o falso.
data-max-date : la fecha máxima que un usuario puede elegir (inclusive). Por ejemplo: 2021-12-31
data-min-date : la fecha mínima a partir de la cual un usuario puede comenzar a seleccionar (inclusive). Por ejemplo: 2021-12-01
incremento-minuto de datos : ajusta el paso para la entrada de minutos (incluido el desplazamiento). Por ejemplo: 5
modo de datos : "único", "múltiple" o "rango". Los campos de fecha sólo son compatibles con el modo "único", pero puedes usar los demás con campos de Texto.
data-next-arrow : HTML para el icono de flecha, utilizado para cambiar de mes. Por ejemplo: >
data-no-calendar : Oculta la selección del día en el calendario. Úselo junto con "data-enable-time" para crear un selector de tiempo. Esto no es compatible con un campo de Fecha, pero puede usarlo con campos de Texto.
posición de datos : donde el calendario se representa en relación con la entrada vertical y horizontalmente en el formato "[vertical] [horizontal]". Vertical puede ser automático, arriba o abajo (obligatorio). Horizontal puede ser izquierda, centro o derecha. Por ejemplo: "arriba" o "centro automático"
data-prev-arrow : HTML para el icono de flecha izquierda. Por ejemplo: <
data-shorthand-current-month : muestra el mes usando la versión abreviada (es decir, septiembre en lugar de septiembre). Puede ser verdadero o falso.
data-show-months : el número de meses que se mostrarán al mismo tiempo al mostrar el calendario. Por ejemplo: 1
data-time-24hr : muestra el selector de hora en modo de 24 horas sin selección AM/PM cuando está habilitado. Puede ser verdadero o falso.
números de semana de datos : permite mostrar los números de semana en el calendario.
tipo-selector-mes-datos : Cómo se debe mostrar el mes en el encabezado del calendario. Puede ser "desplegable" o "estático". Si "data-show-months" tiene un valor mayor que 1, el mes siempre se muestra como estático.

Entrada telefónica internacional ¶

Agrega un menú desplegable de banderas a los campos de Teléfono y muestra un marcador de posición relevante. El usuario escribe su número nacional y el complemento envía el número internacional estandarizado completo.

país-inicial de datos : Puede ser "auto" o un código de país de dos letras, por ejemplo: "us", "gb" o "it".

Máscara jQuery

Crea máscaras en campos de formulario y elementos HTML.

máscara de datos : para aplicar su máscara con el atributo de máscara de datos, simplemente úsela. Por ejemplo: 00/00/0000
marcador de posición de máscara de datos : para agregar un marcador de posición a su máscara. Por ejemplo: " / /____"
data-mask-reverse : Activación de una máscara reversible. Puede ser verdadero o falso.
data-mask-clearifnotmatch : borre el campo si no coincide. Puede ser verdadero o falso.
data-mask-selectonfocus : Seleccione Máscara en foco. Puede ser verdadero o falso.

Valores comunes que puede agregar al atributo personalizado "máscara de datos":

Fecha: 00/00/0000
Hora: 00:00:00
FechaHora: 00/00/0000 00:00:00
CEP: 00000-000
Teléfono: 0000-0000
Teléfono con DDD: (00) 0000-0000
Teléfono de EE. UU.: (000) 000-0000
Mixto: AAA 000-S0S
Dirección IP: 099.099.099.099
Aceptar sólo números: 0#

jQuery UI selector de fechas

Seleccione una fecha de una ventana emergente o de un calendario en línea en cualquier campo de "fecha".

formato de fecha de datos : el formato para las fechas analizadas y mostradas. Por ejemplo: dd/mm/aa
data-show-button-panel : si se muestra un panel de botones debajo del calendario. Puede ser verdadero o falso.
mes-cambio de datos : si el mes debe representarse como un menú desplegable en lugar de texto. Puede ser verdadero o falso.
año-cambio de datos : si el año debe representarse como un menú desplegable en lugar de texto. Puede ser verdadero o falso.
rango de años de datos : el rango de años que se muestra en el menú desplegable de años. Por ejemplo: 2019:2022
número-de-meses-datos : el número de meses que se mostrarán a la vez. Por ejemplo: 1
data-min-date : la fecha mínima seleccionable. Por ejemplo, "+1m +7d" representa un mes y siete días a partir de hoy.
data-max-date : la fecha máxima seleccionable. Por ejemplo, "+1m +7d" representa un mes y siete días a partir de hoy.
data-is-rtl : si el idioma actual se dibuja de derecha a izquierda. Puede ser verdadero o falso.
data-show-week : cuando es verdadero, se agrega una columna para mostrar la semana del año. Puede ser verdadero o falso.
data-first-day : establece el primer día de la semana: el domingo es 0, el lunes es 1, etc.

Entrada de archivo Krajee

Agregue la clase CSS "archivo" al campo de archivo para mejorar la entrada del archivo HTML 5.

etiqueta-exploración-datos : La etiqueta que se mostrará para el botón de selección/exploración de archivos. El valor predeterminado es Explorar...
icono de exploración de datos : el icono que se mostrará antes de la etiqueta del botón de selección/examinación de archivos. El valor predeterminado es
etiqueta-eliminación de datos : la etiqueta que se mostrará para el botón de eliminación de archivo. Valores predeterminados para eliminar .
icono de eliminación de datos : el icono que se mostrará antes de la etiqueta del botón de eliminación de archivos. El valor predeterminado es .
etiqueta-cancelación de datos : la etiqueta que se mostrará para el botón de cancelación de carga de archivos. El valor predeterminado es Cancelar .
icono de cancelación de datos : el icono que se mostrará antes de la etiqueta del botón de cancelación de carga del archivo. El valor predeterminado es .
etiqueta-carga-datos : La etiqueta que se mostrará para el botón de carga de archivos. Valor predeterminado para cargar .
icono de carga de datos : el icono que se mostrará antes de la etiqueta del botón de carga de archivos. El valor predeterminado es .
data-show-preview : si se muestra la vista previa del archivo. Puede ser verdadero o falso. El valor predeterminado es verdadero .
data-show-browse : si se muestra el botón de exploración de archivos. Puede ser verdadero o falso. El valor predeterminado es verdadero .
data-show-remove : si se muestra el botón eliminar/borrar archivo. Puede ser verdadero o falso. El valor predeterminado es verdadero .
data-show-upload : si se muestra el botón de carga de archivos. Puede ser verdadero o falso. El valor predeterminado es verdadero .

Calificación de estrellas de Krajee

Muestre un widget de calificación de estrellas en cualquier campo con la .rating . Además, podemos usar un tema personalizado con las siguientes clases CSS:

.rating-theme-fas : Tema Font Awesome 5.x
.rating-theme-uni : Tema Unicode
.rating-theme-gly : Tema de Glyphicons

Podemos personalizar este widget utilizando los siguientes atributos personalizados:

clase-contenedor-de-datos : la clase CSS que se agregará al contenedor de calificación de estrellas. Esto es útil si desea anteponer alguna clase CSS al contenedor y anular el estilo del widget del complemento para su caso de uso.
data-empty-star : el marcado de símbolo que se mostrará para una estrella vacía. El valor predeterminado es:
estrella llena de datos : el símbolo que se mostrará para una estrella llena/resaltada:
estrellas de datos : el número de estrellas que se mostrarán. El valor predeterminado es 5.
data-min : el valor mínimo para la entrada de calificación. El valor predeterminado es 0.
data-max : el valor máximo para la entrada de calificación. El valor predeterminado es 5.
paso de datos : el paso para incrementar la calificación cuando se hace clic en cada estrella. El valor predeterminado es 0,5.
data-rtl : Si la entrada de calificación debe orientarse DE DERECHA A IZQUIERDA. Puede ser verdadero o falso. El valor predeterminado es falso .
data-show-caption : si se mostrará el título de calificación. Puede ser verdadero o falso. El valor predeterminado es verdadero.
tamaño de datos : Tamaño del control de calificación. Uno de xl, lg, md, sm o xs. El valor predeterminado es md .
data-default-caption : el texto del título predeterminado, que se mostrará cuando no se configure ningún título para la clasificación. El valor predeterminado es {rating} Estrellas .
data-star-caption : el texto del título correspondiente a una estrella. El valor predeterminado es Una estrella .
data-star-captions : el texto del título correspondiente a varias estrellas. El valor predeterminado es {rating} estrellas .
botón de borrado de datos : el marcado para mostrar el botón de borrado. El valor predeterminado es
data-clear-button-title : el título que se muestra al pasar el botón borrar. El valor predeterminado es Borrar .
data-clear-caption : el título que se muestra cuando se hace clic en el botón borrar. El valor predeterminado es No clasificado .

Seleccionar2

Muestre un widget Select2 en un campo de Lista de selección con la .select2 .