Sistema de componentes · Quickly V2
Construye interfaces claras y consistentes
Una colección de patrones accesibles que comparte la misma escala, los mismos tokens y la misma lógica de composición del core. Elige una anatomía, añade utilidades y adapta el resultado a cada contexto.
Anatomía predecible
Las clases .q-* nombran cada pieza y mantienen una estructura reconocible.
Accesibilidad desde HTML
Los controles parten de elementos nativos, foco visible y relaciones ARIA explícitas.
Interacción proporcional
El módulo JavaScript sólo interviene cuando el comportamiento no puede resolverse con HTML.
Del patrón al resultado
Una misma lógica para los 16 componentes
La anatomía aporta significado, las utilidades resuelven la presentación y el comportamiento sólo se añade cuando la interfaz necesita coordinar estados.
.q-card.q-card__body
Define la responsabilidad y las partes estables.
grid g-16 p-24text-center
Ajustan layout, espacio, color y responsive.
data-qy-*quicklycss_v2_components.js
Sincroniza estados que HTML no resuelve por sí solo.
Legible, accesible y adaptable sin cambiar de lenguaje.
Presentación directa para Card, Badge, Progress, Loading y Table.
Interacción del navegador para Dropdown y Accordion.
Estados coordinados para Tabs, Modal, Offcanvas y Carousel.
Elige por intención
Mapa de componentes
Empieza por la tarea que debe resolver la interfaz. Cada familia reúne componentes con una responsabilidad concreta.
Superficies, mensajes, etiquetas y navegación principal.
Card · Alert · Badge · Navbar → 02 · 5 componentesMostrar y alternarOpciones, paneles, capas y mensajes temporales.
Dropdown · Tabs · Accordion · Modal · Toast → 03 · 3 componentesCapturar y organizarEntrada de datos, lectura tabular y navegación paginada.
Form · Table · Pagination → 04 · 4 componentesOrientar el procesoContenido lateral, progreso, espera y secuencias navegables.
Offcanvas · Progress · Loading · Carousel →Familia 01 · Presentar y comunicar
Fundamentos visuales
Cuatro piezas para agrupar contenido, comunicar estados y establecer navegación. Funcionan desde HTML y CSS.
Familia 02 · Mostrar y alternar
Interacción y capas
Patrones para revelar opciones, alternar paneles y mostrar contenido temporal sin perder el contexto ni el control del foco.
Dropdown
.q-dropdownAbrir opciones
Tabs
.q-tabsAccordion
.q-accordion¿Necesita JavaScript?
details y summary nativos.¿Es responsive?
Todos los cambios fueron guardados.
Familia 03 · Capturar y organizar
Formularios y datos
Controles legibles, tablas adaptables y paginación consistente para recorrer información estructurada.
Form
.q-field · .q-inputTable
.q-table| Proyecto | Estado |
|---|---|
| Documentación V2 | Activo |
| Componentes | Nuevo |
Pagination
.q-paginationFamilia 04 · Orientar el proceso
Navegación y estado
Patrones para abrir contenido complementario, comunicar avance, representar espera y recorrer una secuencia.