# Sistema de diseño Quasar

## Vista previa de la interfaz del sistema de diseño Quasar

Ponle un nombre a una sesión, elige un formato, ajusta el grupo y guarda un resumen claramente local.

## Referencia de diseño del sistema de diseño Quasar

Quasar 2.34.0 con Vue 3. Los colores son variables reales de tiempo de ejecución --q-*; las referencias de espaciado y tipografía proceden de los valores Sass predeterminados. El encabezado de la aplicación, la ilustración de la agenda y la sobrescritura de la fuente del sistema son originales. Material Icons se incluye localmente mediante @quasar/extras 2.1.0.

### Roles de marca predeterminados de Quasar

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| --q-primary | #1976D2 | Estado del indicador de pasos, acción principal y deslizador. |
| --q-secondary | #26A69A | Rol secundario. |
| --q-accent | #9C27B0 | Rol de acento. |
| --q-positive | #21BA45 | Rol de comentarios positivos. |
| --q-negative | #C10015 | Rol de validación y error. |
| --q-info | #31CCEC | Rol informativo. |
| --q-warning | #F2C037 | Rol de advertencia. |
### Ayudantes nativos de espaciado

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| $space-base | 16px | Unidad base de espaciado Sass. |
| q-pa-xs / q-ma-xs | 4px | Un cuarto del espaciado base. |
| q-pa-sm / q-ma-sm | 8px | La mitad del espaciado base. |
| q-pa-md / q-ma-md | 16px | Espaciado base. |
| q-pa-lg / q-ma-lg | 24px | Una vez y media el espaciado base. |
| q-pa-xl / q-ma-xl | 48px | El triple del espaciado base. |
| q-mt-md | 16px top margin | Se utiliza encima del interruptor de participación remota. |
| q-ml-sm | 8px left margin | Se utiliza entre las acciones de navegación. |
### Escala nativa de clases tipográficas

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| text-h4 | 2.125rem / 2.5rem, weight 400 | Utilidad predeterminada para encabezados de presentación. |
| text-h5 | 1.5rem / 2rem, weight 400 | Utilidad predeterminada para encabezados de sección. |
| text-h6 | 1.25rem / 2rem, weight 500 | Utilidad predeterminada para encabezados pequeños. |
| text-body1 | 1rem / 1.5rem, weight 400 | Utilidad predeterminada para texto de cuerpo grande. |
| text-body2 | 0.875rem / 1.25rem, weight 400 | Utilidad predeterminada para texto de cuerpo compacto. |
| Application font | system-ui, sans-serif | Sobrescritura original explícita; la familia Roboto predeterminada de Quasar no se descarga aquí. |
### Puntos de ruptura y geometría explícita de la aplicación

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| sm minimum | 600px | Inicio del punto de ruptura nativo de Quasar. |
| md minimum | 1024px | Inicio del punto de ruptura nativo de Quasar. |
| lg minimum | 1440px | Inicio del punto de ruptura nativo de Quasar. |
| xl minimum | 1920px | Inicio del punto de ruptura nativo de Quasar. |
| Application stack breakpoint | 740px | Transición original de dos columnas a diseño apilado. |
| Page title | 34px / 1.15; 29px mobile | Jerarquía tipográfica original. |
| Page gap / padding | 24px / 32px | Composición circundante original. |
| Participants slider | min 2, max 16, step 1 | Props reales de QSlider; no es solo un control visual de rango. |
## Guía completa del sistema de diseño Quasar

Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real.

Orientación completa, un punto de partida para la implementación y enlaces al código fuente.

## Los componentes de sistema de diseño Quasar permiten crear una tarea guiada completa

### Los componentes de Quasar permiten crear una tarea guiada completa

> Quasar proporciona componentes de Vue junto con ayudantes de estilos y un marco de aplicación. Este ejemplo utiliza los componentes directamente en una entrada de Vue 3: un indicador de pasos nativo coordina un formulario, un grupo de botones de opción, un deslizador, un interruptor y una confirmación final. No hace falta una estructura QLayout de pantalla completa solo para mostrar esos controles.

El resumen de sesión tiene un propósito concreto: elegir un formato de trabajo y configurar el grupo mientras se consulta la agenda correspondiente. La biblioteca de componentes proporciona los controles y los estados de navegación; las tres agendas originales y sus totales de cuarenta y cinco minutos son contenido de la aplicación. Esto no implica que haya un servicio de programación.

Consulta la especificación complementaria

## Las variables de marca y las clases de paleta con nombre coexisten en el sistema de diseño Quasar

### Las variables de marca y las clases de paleta con nombre coexisten

El valor de tiempo de ejecución de --q-primary es #1976D2 en la hoja de estilos predeterminada verificada. QStepper, QBtn y QSlider reciben color="primary", por lo que sus estilos principales siguen ese rol. Secondary, accent, positive, negative, info y warning siguen siendo roles con nombre independientes, en vez de colores improvisados para cada control.

El aviso de confirmación utiliza utilidades de paleta verdes con nombre para crear una superficie clara y texto oscuro. Su frase explícita también comunica el éxito, además del color. La ilustración de anillos azules es un elemento decorativo original y está oculta para las tecnologías de asistencia; no representa ningún estado adicional del formulario.

Consulta la especificación complementaria

## Lee literalmente los sufijos de espaciado de Quasar en el sistema de diseño Quasar

### Lee literalmente los sufijos de espaciado de Quasar

Las clases de espaciado de Quasar combinan tipo, dirección y tamaño. q-mt-md significa margen superior con el valor mediano; q-ml-sm añade un margen izquierdo pequeño. El valor base predeterminado es de dieciséis píxeles: xs es cuatro, sm ocho, md dieciséis, lg veinticuatro y xl cuarenta y ocho. El salto a xl equivale a tres unidades base, no a un paso de treinta y dos píxeles supuesto.

La página utiliza estos ayudantes nativos dentro de los controles y elementos originales de CSS para la composición general. Entre las utilidades tipográficas predeterminadas están text-body2, de 0.875rem, y text-h5, de 1.5rem. El título original de la página mide treinta y cuatro píxeles, y la página cambia explícitamente la fuente a system-ui, conservando Material Icons para los glifos nativos de los componentes.

Consulta la especificación complementaria

## Un indicador de pasos no valida el formulario por sí solo en el sistema de diseño Quasar

### Un indicador de pasos no valida el formulario por sí solo

QStepper mantiene el número del paso actual y contiene tres secciones QStep con nombre. Un paso se marca como completado solo después de que la navegación avanza más allá de él. El ejemplo utiliza orientación vertical en ambos diseños para mantener una secuencia clara sin comprimir tres encabezados horizontales en la pantalla de un teléfono.

La primera acción Continuar corresponde a QForm. Su controlador espera a que termine la validación antes de asignar el paso dos. La navegación desde el encabezado no está habilitada, así que hacer clic en un encabezado futuro no permite saltarse ese control. Las acciones Atrás conservan deliberadamente los valores del título, el formato y el grupo, porque esos modelos están en el SFC padre y no dentro de un campo que se desmonta.

Consulta la especificación complementaria

## Sistema de diseño Quasar: QForm usa reglas internas, no todas las restricciones nativas

### QForm usa reglas internas, no todas las restricciones nativas

QInput para el título tiene una matriz de reglas interna que elimina los espacios en blanco al principio y al final, y exige cinco caracteres significativos. Esa regla participa en QForm.validate. Los atributos nativos required o email, por sí solos, no sustituyen la regla al llamar a validate mediante código; por eso, el ejemplo funcional expresa directamente la restricción real.

Un intento no válido muestra el error del campo y mantiene al usuario en el primer paso. Al corregir la entrada, el mismo botón Continuar permite avanzar. El límite de sesenta caracteres y el contador visible ayudan a que el título se ajuste al encargo, mientras que la regla en línea explica por qué no se puede continuar con un título corto o vacío.

1. Envía el primer paso con el título vacío para ver el mensaje de validación.

2. Escribe un título significativo y elige un formato de sesión.

3. Continúa y vuelve con Atrás para confirmar que los valores introducidos se conservan al navegar.

Consulta la especificación complementaria

## Sistema de diseño Quasar: radio, control deslizante y conmutador representan decisiones distintas

### Radio, deslizador e interruptor representan decisiones diferentes

QOptionGroup representa la elección de una opción entre Crítica de diseño, Sesión de bocetado y Síntesis de investigación. Al cambiarla, se selecciona la matriz de agenda correspondiente. La duración de las agendas es contenido de ejemplo fijo; por eso, al cambiar el formato se actualizan las actividades, pero se mantiene el total de cuarenta y cinco minutos.

QSlider controla un número entero de participantes entre dos y dieciséis. QToggle indica si se incluyen participantes remotos. La indicación contigua cambia de una mesa compartida a una pizarra compartida con facilitación remota. Estos controles modifican el encargo visible, en lugar de ser componentes de demostración desconectados.

Consulta la especificación complementaria

## Sistema de diseño Quasar: el paso final conserva un resultado local hasta que se reinicia

### El paso final conserva un resultado local hasta que se reinicia

El paso de revisión vuelve a mostrar el título sin espacios al principio ni al final, el formato, el número de participantes y la modalidad de participación. Al guardar, se activa una marca local de guardado, se deshabilitan Guardar y Atrás, y aparece un aviso que indica el tamaño del grupo. Empezar otra vez borra todos los modelos y vuelve al primer paso, de modo que el ejemplo muestra un flujo completo y observable.

No se envía ninguna solicitud a un calendario ni a un servicio de mensajería API. El aviso indica explícitamente que no se envió ninguna invitación, y el texto de revisión aclara que guardar no crea un evento. Para que un planificador de producción pudiera afirmarlo, necesitaría una fecha, una zona horaria, destinatarios y una respuesta real del backend.

Consulta la especificación complementaria

## Sistema de diseño Quasar: usa la semántica de los componentes nativos y pruebas reales de foco

### Usa la semántica de los componentes nativos y pruebas reales de foco

Los controles nativos proporcionan los roles de radio, control deslizante e interruptor. El control deslizante tiene la etiqueta Participantes, y el campo del título cuenta con una etiqueta visible y un mensaje de validación asociado al campo. El indicador de pasos señala el paso actual y etiqueta su contenido con el título del paso. El ejemplo excluye las ilustraciones decorativas de la secuencia de lectura accesible.

La prueba local modificó el control deslizante con el teclado, activó o desactivó la participación remota, avanzó tras la validación y guardó un encargo híbrido para nueve personas. También comprobó la disposición estrecha. Una imagen estática de un indicador de pasos no demostraría esas relaciones ni probaría que el control de validación está conectado.

- Mantén la coherencia entre el paso activo y el título de su contenido.

- Valida mediante reglas antes de cambiar el modelo de paso.

- Usa un aviso de estado que describa el resultado local exacto.

Consulta la especificación complementaria

## Sistema de diseño Quasar: incluye Quasar CSS y el conjunto de iconos que requiere

### Incluye Quasar CSS y el conjunto de iconos que necesita

El archivo de entrada importa Quasar, registra su complemento, carga quasar/dist/quasar.css e importa la hoja de estilos de Material Icons desde @quasar/extras. El SFC importa los componentes que utiliza. El paquete local integra los archivos de fuentes de iconos para que las marcas de verificación y los indicadores de edición se muestren sin solicitar una fuente remota.

La hoja de estilos original sigue Quasar CSS y ajusta la altura del documento al contenido para facilitar la integración. No aplica estilos globales a todos los componentes nativos ni inventa una escala de espaciado alternativa. Una aplicación completa con la CLI de Quasar o el complemento de Vite puede usar la integración de compilación estándar; este ejemplo completo muestra los mismos componentes en una pequeña entrada de Vue.

Consulta la especificación complementaria

## Quasar Ejemplos de componentes del sistema de diseño

### Flujo completo con indicador de pasos nativo

QStepper/QStep, QForm/QInput, QOptionGroup, QSlider, QToggle y una agenda derivada.

```
<script setup>
import {ref,computed} from 'vue';import {QStepper,QStep,QStepperNavigation,QForm,QInput,QOptionGroup,QSlider,QToggle,QBtn,QCard,QCardSection,QBadge,QBanner} from 'quasar';
const step=ref(1),title=ref(''),format=ref('critique'),people=ref(8),remote=ref(false),saved=ref(false),form=ref();const formats=[{label:'Design critique',value:'critique'},{label:'Sketching session',value:'sketch'},{label:'Research synthesis',value:'research'}];const names={critique:'Design critique',sketch:'Sketching session',research:'Research synthesis'};const agenda=computed(()=>format.value==='critique'?[['10 min','Set the question'],['25 min','Review the work'],['10 min','Choose next actions']]:format.value==='sketch'?[['5 min','Frame the prompt'],['25 min','Sketch independently'],['15 min','Compare directions']]:[['10 min','Sort observations'],['20 min','Name the patterns'],['15 min','Record open questions']]);async function next(){if(await form.value.validate())step.value=2;}function reset(){step.value=1;title.value='';format.value='critique';people.value=8;remote.value=false;saved.value=false;}
</script>
<template><main class="session-builder"><header><div><p class="eyebrow">QUASAR · GUIDED WORKFLOW</p><h1>Make time for better work.</h1><p class="intro">Build a small session brief with a native stepper, validated fields and a live agenda.</p></div><QBadge color="primary" label="45 MINUTES"/></header><div class="builder-grid"><QStepper v-model="step" vertical color="primary" animated flat bordered class="session-stepper"><QStep :name="1" prefix="1" title="Name the session" caption="Purpose and format" :done="step>1"><QForm ref="form" @submit="next"><QInput v-model="title" outlined label="Session title" maxlength="60" counter lazy-rules :rules="[v=>v.trim().length>=5||'Use at least five non-space characters.']"/><p class="field-label">Session format</p><QOptionGroup v-model="format" :options="formats" color="primary"/><QStepperNavigation><QBtn color="primary" label="Continue" type="submit" no-caps/></QStepperNavigation></QForm></QStep><QStep :name="2" prefix="2" title="Shape the group" caption="People and participation" :done="step>2"><p class="field-label">Participants: <strong>{{people}}</strong></p><QSlider v-model="people" :min="2" :max="16" :step="1" label color="primary" aria-label="Participants"/><QToggle v-model="remote" label="Include remote participants" color="primary" class="q-mt-md"/><p class="hint">{{remote?'Reserve a shared board and a facilitator for the remote group.':'Use one shared table and keep the work visible to everyone.'}}</p><QStepperNavigation><QBtn color="primary" label="Review brief" no-caps @click="step=3"/><QBtn flat label="Back" no-caps class="q-ml-sm" @click="step=1"/></QStepperNavigation></QStep><QStep :name="3" prefix="3" title="Review the brief" caption="Save a local snapshot"><p class="review-title">{{title.trim()}}</p><p>{{names[format]}} · {{people}} people · {{remote?'Hybrid':'In person'}}</p><p class="hint">The agenda totals 45 minutes. Saving does not create a calendar event or invite anyone.</p><QStepperNavigation><QBtn color="primary" :label="saved?'Saved locally':'Save local brief'" :disable="saved" no-caps @click="saved=true"/><QBtn flat label="Back" no-caps class="q-ml-sm" :disable="saved" @click="step=2"/></QStepperNavigation><QBanner v-if="saved" rounded class="bg-green-1 text-green-10 q-mt-lg" role="status">Local brief saved for {{people}} people. No invitation was sent.<template #action><QBtn flat label="Start another" no-caps @click="reset"/></template></QBanner></QStep></QStepper><QCard flat bordered class="agenda-card"><QCardSection><p class="eyebrow">LIVE AGENDA</p><h2>{{title.trim()||'Your next working session'}}</h2><p class="agenda-format">{{names[format]}}</p><div class="time-art" aria-hidden="true"><i></i><i></i><i></i><span>45′</span></div><ol class="agenda-list"><li v-for="row in agenda" :key="row[1]"><span>{{row[0]}}</span><strong>{{row[1]}}</strong></li></ol><div class="session-meta"><span>{{people}} participants</span><span>{{remote?'Hybrid setup':'One shared table'}}</span></div><p class="local-note">Original sample agenda. Quasar supplies the form and navigation components.</p></QCardSection></QCard></div></main></template>
```

Referencia de código

- La primera transición espera a que termine QForm.validate().

- La regla del título comprueba la longitud significativa tras eliminar los espacios en blanco al principio y al final.

- El paso de revisión no crea un evento de calendario.

### Composición de la agenda original

Diseño adaptable e ilustración decorativa de duración alrededor de componentes nativos de Quasar.

```
html,body{height:auto;min-height:0}body{background:#f3f5f8;font-family:system-ui,sans-serif}.session-builder{max-width:1120px;padding:32px;margin:auto}header{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:32px}.eyebrow{font-size:11px;font-weight:650;letter-spacing:.13em;color:#5c6c80}h1{font-size:34px;line-height:1.15;font-weight:650;margin:14px 0;letter-spacing:-.02em}.intro{font-size:15px;line-height:1.7;max-width:610px;color:#5c6c80}.builder-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:start}.field-label{font-size:14px;font-weight:600;margin:20px 0 8px}.hint,.local-note{font-size:12px;line-height:1.7;color:#647187}.review-title{font-size:20px;font-weight:650;line-height:1.4}.agenda-card .q-card__section{padding:24px}.agenda-card h2{font-size:25px;line-height:1.25;font-weight:600;margin:16px 0 8px;letter-spacing:0}.agenda-format{font-size:14px;color:#647187}.time-art{height:140px;background:#e6eef8;border-radius:6px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;margin:24px 0}.time-art i{position:absolute;width:130px;height:130px;border:18px solid #8db8e8;border-radius:50%;left:10%;top:45%}.time-art i:nth-child(2){border-color:#c1d7ef;width:170px;height:170px;left:35%;top:-30%}.time-art i:nth-child(3){border-color:#d8e5f5;width:150px;height:150px;left:65%;top:40%}.time-art span{font-size:45px;font-weight:700;position:relative;color:#175a9e}.agenda-list{list-style:none;padding:0;margin:0}.agenda-list li{display:grid;grid-template-columns:65px 1fr;gap:16px;border-bottom:1px solid #dfe5ec;padding:16px 0;font-size:14px}.agenda-list span{color:#657991;font-size:12px}.agenda-list strong{font-weight:600}.session-meta{display:flex;justify-content:space-between;gap:12px;margin:24px 0;font-size:12px;color:#5c6c80}.local-note{margin-bottom:0}@media(max-width:740px){.session-builder{padding:24px 14px}header{flex-direction:column;gap:4px}h1{font-size:29px}.builder-grid{grid-template-columns:1fr}.session-stepper .q-stepper__step-inner{padding-right:18px}.agenda-card .q-card__section{padding:22px}}
```

Referencia de código

- La página usa la altura del contenido para facilitar la integración.

- La modificación de la fuente de la aplicación está especificada explícitamente.

## Sistema de diseño Quasar Configuración del agente de IA

### Punto de partida para la implementación

Verificado con Quasar 2.34.0 y @quasar/extras 2.1.0 con Vue 3. La fuente de iconos es un recurso local necesario para los indicadores de paso predeterminados.

```
// Create the project first:
// npm create vite@latest quasar-specimen -- --template vue
// cd quasar-specimen && npm install
// In a Vite Vue 3 project:
// npm install quasar@2.34.0 @quasar/extras@2.1.0
// Save the complete SFC as App.vue and layout as style.css.
import {createApp} from 'vue';
import {Quasar} from 'quasar';
import 'quasar/dist/quasar.css';
import '@quasar/extras/material-icons/material-icons.css';
import './style.css';
import App from './App.vue';
createApp(App).use(Quasar, {plugins: {}}).mount('#app');
// index.html contains <div id="app"></div>.
// Components are explicitly imported in App.vue; no auto-import plugin is required here.
// Keep the template index.html and replace its entry with the code above.
// npm run dev
```

### Una instrucción para tu proyecto

```
Usa Quasar 2.34.0 y el resumen guiado de sesión proporcionado. Conserva QStepper, QForm y la validación de QInput, los controles de radio para el formato de sesión, el control deslizante de participantes y el conmutador de agenda. Espera a que termine la validación del formulario antes de avanzar, conserva los valores introducidos al volver atrás y deriva el resumen de revisión de esos mismos valores. Guardar registra un encargo local; los cambios posteriores invalidan su estado de guardado. Incluye la hoja de estilos de Quasar y la configuración local de Material Icons, y mantén utilizable el diseño estrecho sin inventar un servicio de envío ni de reservas.
```

## Quasar Fuentes y alcance del sistema de diseño

Quasar 2.34.0 con componentes nativos y Material Icons local. Las agendas originales y las ilustraciones son contenido de ejemplo. Guardar no crea un evento de calendario ni envía invitaciones.

- Indicador de pasos Estado de los pasos, navegación y accesibilidad.

- Form Validación con reglas internas y comportamiento de envío.

- Entrada Etiquetas, contador y reglas.

- Grupo de opciones Opciones de formato mutuamente excluyentes.

- Slider Control con teclado numérico y puntero.

- Colores Roles de marca en tiempo de ejecución.

- Espaciado Sintaxis nativa del asistente de espaciado.

- Tipografía Utilidades de tipografía predeterminadas.

- Integración Referencia de integración con Vue/Vite.

## Quasar Recursos relacionados con el sistema de diseño

### React Native Elements

Crea un compositor completo de planes de concentración con React Native Elements 5.0.0: roles de tema reales, entradas y selecciones controladas, validación, confirmación local y una compilación web probada.

### React Suite

Un calendario de revisión nativo de React Suite con variables verificadas de CSS v6, marcadores en las celdas de fecha, una agenda para el día seleccionado, validación modal y reglas explícitas para la programación local.

### Skeleton

Compara los temas Cerberus, Mint y Rose reales de Skeleton 5.0.1 mediante un espacio de lectura completo, con inspección de tokens en tiempo real, combinaciones de superficies oscuras y estado local reversible.


- [Referencia de implementación](https://quasar.dev/vue-components/stepper/)
- [Fuente](https://quasar.dev/style/color-palette/)
- [Fuente](https://quasar.dev/style/spacing/)
- [Fuente](https://quasar.dev/style/typography/)
- [Fuente](https://quasar.dev/style/breakpoints/)
- [Consulta la especificación complementaria](https://quasar.dev/start/vite-plugin/)
- [Consulta la especificación complementaria](https://quasar.dev/style/color-palette/)
- [Consulta la especificación complementaria](https://quasar.dev/style/spacing/)
- [Consulta la especificación complementaria](https://quasar.dev/vue-components/stepper/)
- [Consulta la especificación complementaria](https://quasar.dev/vue-components/form/)
- [Consulta la especificación complementaria](https://quasar.dev/vue-components/option-group/)
- [Consulta la especificación complementaria](https://quasar.dev/vue-components/banner/)
- [Referencia de código](https://quasar.dev/vue-components/stepper/)
- [Referencia de código](https://quasar.dev/style/spacing/)
- [Indicador de pasos Estado de los pasos, navegación y accesibilidad.](https://quasar.dev/vue-components/stepper/)
- [Form Validación con reglas internas y comportamiento de envío.](https://quasar.dev/vue-components/form/)
- [Entrada Etiquetas, contador y reglas.](https://quasar.dev/vue-components/input/)
- [Grupo de opciones Opciones de formato mutuamente excluyentes.](https://quasar.dev/vue-components/option-group/)
- [Slider Control con teclado numérico y puntero.](https://quasar.dev/vue-components/slider/)
- [Colores Roles de marca en tiempo de ejecución.](https://quasar.dev/style/color-palette/)
- [Espaciado Sintaxis nativa del asistente de espaciado.](https://quasar.dev/style/spacing/)
- [Tipografía Utilidades de tipografía predeterminadas.](https://quasar.dev/style/typography/)
- [Integración Referencia de integración con Vue/Vite.](https://quasar.dev/start/vite-plugin/)