Pretty Checkbox Radio
Convierte los elementos de formulario estándar de casillas de verificación y botones de radio en elementos visualmente atractivos con estilo de botón que son más fáciles de usar y amigables para dispositivos táctiles.
pcr
Instalar
composer require 'drupal/pcr:^2.0'
Overview
El módulo Pretty Checkbox Radio transforma las entradas HTML predeterminadas de casillas de verificación y botones de radio en elementos de botón estilizados. Esto proporciona una interfaz más moderna y amigable para dispositivos táctiles que funciona bien tanto en escritorio como en dispositivos móviles.
El módulo se integra perfectamente con la Form API y el sistema de campos de Drupal, permitiendo a los constructores de sitios habilitar fácilmente los botones estilizados en cualquier campo Boolean, List (texto/entero/flotante) o Entity Reference a través de la interfaz Manage Form Display. También proporciona integración con el módulo Better Exposed Filters, habilitando widgets de filtros estilizados en formularios expuestos de Views.
El estilo presenta un diseño de botón limpio con efectos de hover y retroalimentación visual clara para los estados seleccionados. Los elementos seleccionados se resaltan con un color azul distintivo, facilitando a los usuarios ver sus selecciones actuales. El módulo también incluye soporte RTL (derecha a izquierda) para idiomas.
Features
- Convierte casillas de verificación y botones de radio en elementos con estilo de botón con diseño visual limpio
- Widget de campo 'Pretty Check boxes/radio buttons' que soporta campos Boolean, List (entero/texto/flotante) y Entity Reference
- Integración con Better Exposed Filters con widgets 'Pretty Checkboxes/Radio Buttons' y 'Pretty Single On/Off Checkbox'
- Efectos de hover y retroalimentación visual clara para estados seleccionados (botones resaltados en azul)
- Soporte RTL (derecha a izquierda) para internacionalización
- Diseño amigable para dispositivos táctiles, adecuado para dispositivos móviles
- Implementación ligera con CSS mínimo y sin dependencias de JavaScript
Use Cases
Estilizado de campos Boolean en formularios de Node
Al crear tipos de contenido con campos Boolean (ej., 'Destacado', 'Publicado en redes sociales', 'Enviar newsletter'), puedes usar el widget Pretty Checkbox Radio para hacer estas opciones más visualmente prominentes y fáciles de hacer clic. Navega a Estructura > Tipos de contenido > [Tu tipo] > Manage Form Display, y selecciona 'Pretty Check boxes/radio buttons' para tu campo Boolean.
Campos de selección de listas mejorados
Para campos List (texto) con múltiples opciones (ej., 'Categoría', 'Nivel de prioridad', 'Estado'), el widget pretty transforma los botones de radio en una fila de botones clicables, facilitando a los editores de contenido ver todas las opciones a la vez y hacer selecciones rápidamente.
Better Exposed Filters en Views
Al usar Views con filtros expuestos, puedes aplicar el widget Pretty Checkboxes/Radio Buttons para hacer las opciones de filtro más amigables para el usuario. En la configuración de formulario expuesto de la View con Better Exposed Filters habilitado, selecciona 'Pretty Checkboxes/Radio Buttons' o 'Pretty Single On/Off Checkbox' para el tipo de widget.
Diseño de formularios amigables para móviles
Para sitios con tráfico móvil significativo, el diseño de botón amigable para táctiles de los elementos pretty es más fácil de tocar con precisión que las pequeñas casillas de verificación o botones de radio, mejorando la experiencia del usuario móvil en formularios.
Selección de Entity Reference
Al usar campos Entity Reference con un número limitado de opciones, el widget pretty puede mostrar las entidades referenciadas como botones seleccionables, proporcionando una interfaz más limpia que las casillas de verificación tradicionales o listas de selección.
Tips
- Limpia la caché después de habilitar el módulo o cambiar la configuración del widget si los elementos estilizados no aparecen inmediatamente
- El módulo usa estilizado solo con CSS sin dependencias de JavaScript, asegurando cargas de página rápidas y compatibilidad
- Los temas personalizados pueden sobrescribir el archivo pretty_elements.css para coincidir con el sistema de diseño de tu sitio
- Los elementos seleccionados usan un color azul (#337ab7) por defecto; sobrescribe .pretty-element input:checked + label en tu tema para personalizar
- El módulo soporta idiomas RTL automáticamente a través de CSS direccional
- Para Views, asegúrate de que el módulo Better Exposed Filters esté correctamente configurado antes de que los widgets Pretty estén disponibles
Technical Details
Hooks 4
hook_help
Proporciona texto de ayuda para el módulo en la página de ayuda de administración, explicando el propósito del módulo e instrucciones básicas de uso.
hook_theme
Registra los hooks de tema personalizados 'elements__pretty_options' y 'form_element__pretty_element' para renderizar elementos de formulario estilizados.
hook_theme_suggestions_form_element_alter
Añade la sugerencia de tema 'form_element__pretty_element' cuando el elemento de formulario contiene marcado de elemento pretty.
hook_element_info_alter
Añade el callback PrettyElement::process a los tipos de elementos de formulario checkboxes, radios, checkbox y radio. Esto permite al módulo interceptar y transformar elementos marcados con #pretty_option.
Troubleshooting 4
Limpia todas las cachés de Drupal (drush cr o admin/config/development/performance). Si usas CDN o caché del navegador, limpia también esas cachés.
Asegúrate de que la biblioteca pcr/pretty_elements se esté cargando correctamente. Verifica en las herramientas de desarrollador del navegador si hay errores de carga de CSS. Verifica que ningún CSS del tema esté en conflicto con los estilos de .pretty-element.
Verifica que el módulo Better Exposed Filters esté instalado (versión 6.0.3+ o 7.0.0+) y habilitado. Asegúrate de que tu View use 'BEF' como estilo de formulario expuesto.
Asegúrate de que la dirección del idioma de tu sitio esté correctamente configurada. El módulo usa el selector CSS [dir=rtl] que requiere el atributo dir en el elemento html.