0f6387ab46
- renombrar openspec/ a _openspec/ (carpeta auxiliar) - mover specs de features a changes/ - crear specs base: arquitectura-limpia, estandares-codigo, nomenclatura - migrar _planificacion/ con design-system y roi-theme-template - agregar especificacion recaptcha anti-spam (proposal, tasks, spec) - corregir rutas y referencias en todas las specs Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
93 lines
2.7 KiB
Markdown
93 lines
2.7 KiB
Markdown
# 🧩 COMPONENTES REUTILIZABLES
|
|
|
|
## ¿Qué es esto?
|
|
|
|
Una **librería de 28 componentes HTML** listos para copiar y pegar, construidos con Bootstrap 5.3.2 y alineados al design system de APU.
|
|
|
|
Cada componente incluye:
|
|
- ✅ HTML completo y funcional
|
|
- ✅ Múltiples ejemplos de uso
|
|
- ✅ Comentarios explicativos inline
|
|
- ✅ Fixes para conflictos con WordPress
|
|
|
|
---
|
|
|
|
## 📂 Documentación Completa
|
|
|
|
**Ir a:** [`../componentes-html-bootstrap/README.md`](../componentes-html-bootstrap/README.md)
|
|
|
|
Ahí encontrarás:
|
|
- Índice completo de los 28 componentes
|
|
- Categorías organizadas (formularios, botones, layouts, navegación, etc.)
|
|
- Instrucciones de uso y personalización
|
|
- Dependencias requeridas (CDN links)
|
|
- Fixes CSS para WordPress
|
|
- Componentes que requieren JavaScript
|
|
|
|
---
|
|
|
|
## 📋 Categorías de Componentes
|
|
|
|
### 🎨 Layout y Estructura
|
|
Headers con gradiente, Cards (estándar y vista previa), Grids especializados
|
|
|
|
### 📝 Formularios
|
|
Switches, Color pickers, Text inputs, Textareas, Selects, Radio buttons, Checkboxes, Range sliders, File uploads
|
|
|
|
### 🔘 Botones
|
|
Botones simples, Button groups (Desktop/Mobile), Botones con dropdowns
|
|
|
|
### 🎯 Componentes Visuales
|
|
Badges, Links externos, Progress bars, Alerts, Spinners, Dividers, Tooltips
|
|
|
|
### 📱 Navegación y Organización
|
|
Tabs, Accordions, Sortable lists
|
|
|
|
### 💻 Desarrollo y Utilidades
|
|
Image previews, Code blocks
|
|
|
|
---
|
|
|
|
## 🚀 Cómo Usar
|
|
|
|
1. Abre el README de componentes: [`../componentes-html-bootstrap/README.md`](../componentes-html-bootstrap/README.md)
|
|
2. Encuentra el componente que necesitas
|
|
3. Abre el archivo HTML correspondiente (ej: `05-COLOR-PICKER.html`)
|
|
4. Copia el HTML del ejemplo que te sirva
|
|
5. Pega en tu proyecto y personaliza IDs/textos
|
|
|
|
---
|
|
|
|
## 🎨 Principios de Uso
|
|
|
|
### Colores
|
|
- **Iconos:** Siempre orange (`#FF8600`)
|
|
- **Títulos de card:** Siempre navy (`#1e3a5f`)
|
|
- **Border-left cards:** Navy para estándar, Orange para previews
|
|
- **Botones primarios:** Orange
|
|
|
|
### Tamaños
|
|
- **Form controls:** Usar `.form-control-sm` (tamaño compacto)
|
|
- **Botones en header:** Usar `.btn-sm`
|
|
- **Labels:** Clase `.small` + `fw-semibold`
|
|
|
|
### Patrones
|
|
- **Header de tab:** Gradiente navy + border-left orange + botón reset derecha
|
|
- **Vista previa:** Card con border-left orange + título "Vista Previa en Tiempo Real"
|
|
- **Iconos en labels:** `<i class="bi bi-[icon] me-1" style="color: #FF8600;"></i>`
|
|
|
|
---
|
|
|
|
## 📝 Notas Importantes
|
|
|
|
1. Los componentes HTML son la **fuente de verdad** - siempre usa el código de ahí
|
|
2. Todos los componentes están probados en WordPress
|
|
3. No mezclar inline styles con clases de Bootstrap (solo usa inline styles para colores de marca)
|
|
4. Siempre mantener accesibilidad (ARIA attributes incluidos)
|
|
|
|
---
|
|
|
|
## Volver al Índice
|
|
|
|
[← Volver al README](README.md)
|