# 📦 EJEMPLOS COMPLETOS Y RECURSOS ## Ejemplo 1: Campo de Color con Valor Hex ```html
#0E2337
``` --- ## Ejemplo 2: Campo de Texto con Icono de Bootstrap ```html
Ver: Bootstrap Icons
``` --- ## Ejemplo 3: Textarea con Contador y Progress Bar ```html
``` --- ## Template Básico Completo ```html Admin: [Component Name]

Configuración de [Component]

[Descripción del componente]

Sección 1
Sección 2
Vista Previa en Tiempo Real
Los cambios se reflejan en tiempo real
``` --- ## Checklist de Implementación ### Antes de Empezar - [ ] Leer este manual completo - [ ] Revisar la librería de componentes HTML (`../componentes-html-bootstrap/`) - [ ] Identificar qué campos necesita el componente - [ ] Determinar si necesita vista previa en tiempo real ### Estructura HTML - [ ] Crear el header del tab con gradiente navy + border orange - [ ] Incluir botón "Restaurar valores por defecto" - [ ] Organizar campos en grid de 2 columnas (`col-lg-6`) - [ ] Agrupar campos relacionados en cards con border-left navy - [ ] Agregar card de vista previa con border-left orange ### Formularios - [ ] Todos los labels tienen icono orange - [ ] Labels importantes tienen `fw-semibold` - [ ] Campos requeridos tienen `*` - [ ] Color pickers muestran valor hex debajo - [ ] Textareas tienen contador de caracteres + progress bar - [ ] Selects usan `.form-select-sm` - [ ] Inputs usan `.form-control-sm` - [ ] Switches tienen icono + strong en label ### Vista Previa - [ ] HTML de preview es IDÉNTICO al del front-end - [ ] Se usa clase real del componente (ej: `.top-notification-bar`) - [ ] NO hay inline styles que sobreescriban el CSS real - [ ] Se cargan los mismos archivos CSS que el front-end - [ ] Botones Desktop/Mobile funcionales ### JavaScript - [ ] Función `updatePreview()` implementada - [ ] Función `saveConfig()` guarda en localStorage/JSON - [ ] Función `loadConfig()` carga al iniciar - [ ] Función `resetToDefaults()` restaura valores - [ ] Event listeners en todos los campos - [ ] Color pickers actualizan el valor hex - [ ] Textareas actualizan contador + progress bar ### CSS - [ ] Fix WordPress `.card { max-width: none !important; }` - [ ] Fix WordPress switches (pseudo-elementos) - [ ] Fix alineación vertical switches - [ ] Responsive breakpoints configurados --- ## Troubleshooting ### La vista previa no se ve igual al front-end **Causa:** Inline styles sobreescribiendo el CSS real **Solución:** 1. Verificar que NO haya inline styles en el HTML del preview 2. Verificar que se carga `../../Css/style.css` 3. Usar solo la clase del componente real 4. Si es necesario, agregar CSS con `!important` SOLO para el border ### Los colores no coinciden **Causa:** No se están usando los valores correctos **Solución:** 1. Usar valores hex exactos: `#0E2337`, `#FF8600`, etc. 2. Verificar que `style.css` define las variables `:root` ### El contador de caracteres no funciona **Causa:** Event listener no conectado **Solución:** ```javascript textarea.addEventListener('input', function() { counter.textContent = this.value.length; }); ``` ### El responsive no funciona **Causa:** Falta el viewport meta tag **Solución:** ```html ``` --- ## Recursos ### Bootstrap 5.3.2 - Documentación: https://getbootstrap.com/docs/5.3/ - Components: https://getbootstrap.com/docs/5.3/components/ ### Bootstrap Icons - Catálogo: https://icons.getbootstrap.com/ - Búsqueda: Usar el buscador para encontrar iconos ### Google Fonts - Poppins - Pesos usados: 400 (Regular), 500 (Medium), 600 (Semi-Bold), 700 (Bold) --- ## Volver al Índice [← Volver al README](README.md)