Widgets de UI

Introducción

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

Cómo usar un Widget de UI

Usar widgets de UI es bastante fácil, simplemente ve a Configuración de Formulario > Configuración de UI y selecciona el widget de UI que deseas usar en tu formulario.

Por ejemplo, vamos a seleccionar el widget "Entrada Telefónica Internacional" y hacer clic en Guardar.

Veamos el resultado.

Toma en cuenta que algunos widgets requieren añadir una Clase CSS a tu Campo de Formulario. Para otros, como en nuestro ejemplo anterior, solo necesitamos activarlos para mostrarlos en el formulario.

Cómo configurar un Widget de UI

Para configurar el Widget de UI que queremos usar, necesitamos ir al Constructor de Formularios > Configuración de Campo > Atributos Personalizados.

En nuestro ejemplo, la Entrada Telefónica Internacional muestra la bandera del país del usuario. Para este ejemplo, vamos a personalizar este comportamiento para mostrar la bandera de Gran Bretaña. Para esto, vamos a añadir el siguiente atributo personalizado:

• Atributo: data-initial-country
• Valor: gb

Y, guardar todo.

Veamos el resultado.

Atributos Personalizados para Widgets de UI

Ahora vamos a listar todos los atributos que podemos usar para configurar los Widgets de UI.

Flatpickr

Reemplaza cualquier campo de Fecha con un selector de fecha ligero y compatible con varios navegadores.

• data-alt-format: Una cadena de caracteres que se usa 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 inválida. Puede ser true o false.
• data-aria-date-format: Define cómo se formateará la fecha en el aria-label para los días del calendario. Por ejemplo: F j, Y
• data-default-date: Establece la fecha seleccionada inicialmente en formato HTML5 (aaaa-mm-dd). Por ejemplo: 2021-12-31
• data-default-hour: Valor inicial del elemento de hora. Por ejemplo: 12
• data-default-minute: Valor inicial del elemento de 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: Establecer en true para siempre usar el selector no nativo. Puede ser true o false.
• data-enable-time: Habilita el selector de tiempo. Puede ser true o false.
• data-enable-seconds: Habilita los segundos en el selector de tiempo. Puede ser true o false.
• data-hour-increment: Ajusta el paso para la entrada de hora (incluyendo el desplazamiento). Por ejemplo: 1
• data-inline: Muestra el calendario en línea. Puede ser true o false.
• data-max-date: La fecha máxima que un usuario puede seleccionar (inclusive). Por ejemplo: 2021-12-31
• data-min-date: La fecha mínima desde la cual un usuario puede empezar a seleccionar (inclusive). Por ejemplo: 2021-12-01
• data-minute-increment: Ajusta el paso para la entrada de minuto (incluyendo el desplazamiento). Por ejemplo: 5
• data-mode: "single", "multiple" o "range". Los campos de fecha solo son compatibles con el modo "single", pero puedes usar los otros con campos de texto.
• data-next-arrow: HTML para el ícono de flecha, usado para cambiar de mes. Por ejemplo: >
• data-no-calendar: Oculta la selección de día en el calendario. Úsalo junto con "data-enable-time" para crear un selector de tiempo. Esto no es compatible con un campo de Fecha, pero puedes usarlo con campos de Texto.
• data-position: Dónde se renderiza el calendario en relación con la entrada vertical y horizontalmente. En el formato de "[vertical] [horizontal]". Vertical puede ser auto, arriba o abajo (requerido). Horizontal puede ser izquierda, centro o derecha. Por ejemplo: "arriba" o "auto center"
• data-prev-arrow: HTML para el ícono de flecha izquierda. Por ejemplo: <
• data-shorthand-current-month: Muestra el mes usando la versión abreviada (es decir, Sep en lugar de September). Puede ser true o false.
• 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 tiempo en modo de 24 horas sin selección de AM/PM cuando está habilitado. Puede ser true o false.
• data-week-numbers: Habilita la visualización de números de semana en el calendario.
• data-month-selector-type: Cómo se debe mostrar el mes en el encabezado del calendario. Puede ser "dropdown" o "static". Si "data-show-months" tiene un valor mayor a 1, el mes siempre se muestra como estático.

Entrada Telefónica Internacional ¶

Añade un 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 plugin envía el número internacional estandarizado completo.

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

jQuery Mask

Aplica máscaras en los campos de formulario y elementos HTML.

• data-mask: Para aplicar tu máscara con el atributo data-mask, solo úsalo. Por ejemplo: 00/00/0000
• data-mask-placeholder: Para añadir un marcador de posición a tu máscara. Por ejemplo: "//____"
• data-mask-reverse: Activa una máscara reversible. Puede ser true o false.
• data-mask-clearifnotmatch: Limpia el campo si no coincide. Puede ser true o false.
• data-mask-selectonfocus: Seleccionar la máscara al enfocar. Puede ser true o false.

Valores comunes que puedes añadir al atributo personalizado "data-mask":

• 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 Solo Números: 0#

jQuery Ui Datepicker

Selecciona una fecha desde un calendario emergente o en línea en cualquier campo de 'fecha'.

• data-date-format: El formato para fechas analizadas y mostradas. Por ejemplo: mm/dd/yy
• data-show-button-panel: Si se debe mostrar un panel de botones debajo del calendario. Puede ser true o false.
• data-change-month: Si el mes debe mostrarse como un desplegable en lugar de texto. Puede ser true o false.
• data-change-year: Si el año debe mostrarse como un desplegable en lugar de texto. Puede ser true o false.
• data-year-range: El rango de años que se muestran en el desplegable de años. Por ejemplo: 2019:2022
• data-number-of-months: 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 true o false.
• data-show-week: Cuando es true, se añade una columna para mostrar la semana del año. Puede ser true o false.
• data-first-day: Establece el primer día de la semana: Domingo es 0, Lunes es 1, etc.

Krajee File Input

Añade la clase CSS "file" al campo de archivo para mejorar el input de archivos HTML5.

• data-browse-label: La etiqueta que se muestra para el botón de exploración/búsqueda de archivos. Por defecto Browse...
• data-browse-icon: El ícono que se muestra antes de la etiqueta para el botón de exploración/búsqueda de archivos. Por defecto
• data-remove-label: La etiqueta que se muestra para el botón de eliminar archivos. Por defecto Remove .
• data-remove-icon: El ícono que se muestra antes de la etiqueta para el botón de eliminar archivos. Por defecto   .
• data-cancel-label: La etiqueta que se muestra para el botón de cancelar la subida de archivos. Por defecto Cancel .
• data-cancel-icon: El ícono que se muestra antes de la etiqueta para el botón de cancelar la subida de archivos. Por defecto   .
• data-upload-label: La etiqueta que se muestra para el botón de subir archivos. Por defecto Upload .
• data-upload-icon: El ícono que se muestra antes de la etiqueta para el botón de subir archivos. Por defecto   .
• data-show-preview: Si se debe mostrar la vista previa del archivo. Puede ser true o false. Por defecto true .
• data-show-browse: Si se debe mostrar el botón de exploración de archivos. Puede ser true o false. Por defecto true .
• data-show-remove: Si se debe mostrar el botón de eliminar/limpiar archivos. Puede ser true o false. Por defecto true .
• data-show-upload: Si se debe mostrar el botón de subir archivos. Puede ser true o false. Por defecto true .

Krajee Star Rating

Muestra un widget de Calificación de Estrellas en cualquier campo con la clase CSS .rating. Además, podemos usar un tema personalizado con las siguientes clases CSS:

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

Podemos personalizar este widget usando los siguientes atributos personalizados:

• data-container-class: La clase CSS que se añadirá al contenedor de la calificación de estrellas. Esto es útil si quieres prefijar alguna clase CSS al contenedor y sobrescribir el estilo del widget del plugin para tu caso de uso.
• data-empty-star: El marcado del símbolo para mostrar una estrella vacía. Por defecto:
• data-filled-star: El marcado del símbolo para mostrar una estrella llena / resaltada:
• data-stars: El número de estrellas a mostrar. Por defecto: 5.
• data-min: El valor mínimo para la entrada de calificación. Por defecto: 0.
• data-max: El valor máximo para la entrada de calificación. Por defecto: 5.
• data-step: El paso para incrementar la calificación cuando se hace clic en cada estrella. Por defecto: 0.5.
• data-rtl: Si la entrada de calificación debe estar orientada de derecha a izquierda. Puede ser true o false. Por defecto false .
• data-show-caption: Si se debe mostrar el título de la calificación. Puede ser true o false. Por defecto true.
• data-size: Tamaño del control de calificación. Uno de xl, lg, md, sm, o xs. Por defecto md .
• data-default-caption: El texto del título por defecto, que se mostrará cuando no se haya configurado un título para la calificación. Por defecto {rating} Stars .
• data-star-caption: El texto del título correspondiente a una estrella. Por defecto One star .
• data-star-captions: El texto del título correspondiente a múltiples estrellas. Por defecto {rating} stars .
• data-clear-button: El marcado para mostrar el botón de limpiar. Por defecto
• data-clear-button-title: El título que se muestra al pasar el cursor sobre el botón de limpiar. Por defecto Clear .
• data-clear-caption: El título que se muestra cuando se hace clic en el botón de limpiar. Por defecto Not Rated .

Select2

Muestra un widget Select2 en un campo de Lista de Selección con la clase CSS .select2.

Podemos personalizar este widget usando los siguientes atributos personalizados:

• data-theme: El tema que usará el widget. Puede ser classic o bootstrap . Por defecto bootstrap .
• data-placeholder: El marcador de posición que se mostrará cuando no se seleccione ninguna opción. Por ejemplo: " Select a country ".
• data-allow-clear: Permite al usuario limpiar la selección actual. Debe usarse con " data-placeholder " para funcionar. Puede ser true o false.
• data-tags: Permite al usuario crear nuevas opciones a partir del texto ingresado en el cuadro de búsqueda. Puede ser true o false .
• data-maximum-selection-length: Por ejemplo: 2
• data-minimum-input-length: Solo comienza a buscar cuando el usuario ha ingresado un número de caracteres. Por ejemplo: 3
• data-maximum-input-length: Permite limitar la longitud del término de búsqueda para que no exceda una cierta longitud. Por ejemplo: 20
• data-minimum-results-for-search: Permite ocultar el cuadro de búsqueda dependiendo del número de resultados. Por ejemplo: 3.