Interfaz de usuario multiplataforma y móvil · Nuevo recurso
Sistema de diseño Quasar.
Un flujo guiado nativo de Quasar con valores reales de marca y espaciado, validación de QForm, un creador de informes en tres pasos, opciones de formato con botones de radio y una agenda dinámica de cuarenta y cinco minutos.
Quasar 2.34.0 con Vue 3 y Material Icons incluidos localmente desde @quasar/extras 2.1.0. · Referencia de implementación
02
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.
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.
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.
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.
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.
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.
Envía el primer paso con el título vacío para ver el mensaje de validación.
Escribe un título significativo y elige un formato de sesión.
Continúa y vuelve con Atrás para confirmar que los valores introducidos se conservan al navegar.
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.
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.
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.
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.
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.
04
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.
javascript
// 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 [email protected] @quasar/[email protected]
// 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
Instrucción para el agente
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.
05
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.
