Interface multiplateforme et mobile · Nouvelle ressource
Système de design Quasar.
Un parcours guidé natif Quasar avec les véritables valeurs de marque et d’espacement, la validation QForm, un créateur de brief en trois étapes, des choix de format par boutons radio et un ordre du jour dynamique de quarante-cinq minutes.
Quasar 2.34.0 avec Vue 3 et Material Icons intégré localement depuis @quasar/extras 2.1.0. · Référence de mise en œuvre
02
Référence de conception du système de design Quasar
Quasar 2.34.0 avec Vue 3. Les couleurs sont les variables d’exécution --q-* réelles ; les références d’espacement et de typographie proviennent des valeurs par défaut de Sass. Le titre de l’application, les illustrations de l’ordre du jour et la substitution de la police système sont d’origine. Material Icons est fourni localement par @quasar/extras 2.1.0.
Les composants du système de design Quasar permettent de créer un parcours guidé complet
Les composants Quasar permettent de créer un parcours guidé complet
Quasar fournit des composants Vue, ainsi que des utilitaires de style et un framework d’application. Cet exemple utilise directement les composants dans une entrée Vue 3 : un stepper natif coordonne un formulaire, un groupe de boutons radio, un curseur, une bascule et une confirmation finale. Il n’est pas nécessaire d’utiliser un conteneur QLayout plein écran pour illustrer ces commandes.
Le brief de session a un objectif précis : choisir un format de travail et configurer le groupe tout en visualisant l’ordre du jour correspondant. La bibliothèque de composants fournit les commandes et les états de navigation ; les trois ordres du jour d’origine et leurs durées de quarante-cinq minutes relèvent du contenu de l’application. Aucun service de planification n’est sous-entendu.
Les variables de marque et les classes de palette nommées coexistent dans le système de design Quasar
Les variables de marque et les classes de palette nommées coexistent
La valeur d’exécution de --q-primary est #1976D2 dans la feuille de style par défaut vérifiée. QStepper, QBtn et QSlider reçoivent color="primary" ; leur style principal suit donc ce rôle. Les rôles secondary, accent, positive, negative, info et warning restent distincts, plutôt que d’utiliser des couleurs choisies au cas par cas pour chaque commande.
La bannière de confirmation utilise des utilitaires de palette verte nommés pour obtenir un fond clair et un texte foncé. Son texte explicite communique la réussite, au-delà de la couleur. L’illustration en anneaux bleus est un élément décoratif original, masqué aux technologies d’assistance ; elle ne représente aucun état supplémentaire du formulaire.
Système de design Quasar : interpréter littéralement les suffixes d’espacement de Quasar
Interpréter littéralement les suffixes d’espacement de Quasar
Les classes d’espacement de Quasar combinent le type, la direction et la taille. q-mt-md correspond à une marge supérieure de taille moyenne ; q-ml-sm ajoute une petite marge à gauche. La valeur de base par défaut est de seize pixels : xs vaut quatre, sm huit, md seize, lg vingt-quatre et xl quarante-huit. Le passage à xl représente trois unités de base, et non une valeur de trente-deux pixels supposée.
La page utilise ces utilitaires natifs dans les contrôles et le CSS original pour la composition générale. Les utilitaires typographiques par défaut comprennent text-body2 à 0.875rem et text-h5 à 1.5rem. Le titre original de la page mesure trente-quatre pixels, et la page définit explicitement la police sur system-ui tout en conservant Material Icons pour les glyphes des composants natifs.
Système de design Quasar : un stepper ne valide pas le formulaire à lui seul
Un stepper ne valide pas le formulaire à lui seul
QStepper conserve le numéro de l’étape en cours et contient trois sections QStep nommées. Une étape est marquée comme terminée uniquement une fois passée à l’étape suivante. Dans les deux mises en page, l’exemple utilise une orientation verticale pour préserver une séquence claire sans comprimer trois en-têtes horizontaux sur un téléphone.
La première action Continuer appartient à QForm. Son gestionnaire attend la fin de validate avant de passer à l’étape deux. La navigation par les en-têtes est désactivée : cliquer sur un en-tête futur ne permet donc pas de contourner cette vérification. Les actions Retour préservent volontairement les valeurs du titre, du format et du groupe, car ces modèles se trouvent dans le SFC parent, et non dans un champ démonté.
Système de design Quasar : QForm utilise ses propres règles, pas toutes les contraintes natives
QForm utilise ses propres règles, pas toutes les contraintes natives
Le QInput du titre possède un tableau de règles interne qui supprime les espaces en début et en fin de texte et exige cinq caractères significatifs. Cette règle est prise en compte par QForm.validate. À elles seules, les propriétés natives required ou email ne remplacent pas cette règle lors d’un appel programmatique à validate ; c’est pourquoi l’exemple fonctionnel exprime directement la contrainte réelle.
Une tentative invalide affiche l’erreur du champ et maintient l’utilisateur à la première étape. Une fois la saisie corrigée, le même bouton Continuer permet d’avancer. La limite de soixante caractères et le compteur visible aident à respecter les exigences du titre, tandis que la règle intégrée explique pourquoi un titre trop court ou vide ne permet pas de poursuivre.
Envoyez la première étape avec un titre vide pour afficher le message de validation.
Saisissez un titre pertinent et choisissez un format de session.
Cliquez sur Continuer, puis revenez en arrière avec Retour pour vérifier que les valeurs saisies sont conservées.
Système de design Quasar : radio, curseur et bascule correspondent à des choix différents
Radio, curseur et bascule correspondent à des décisions différentes
QOptionGroup représente un choix parmi Design critique, Session de croquis et Synthèse de recherche. Le changement de choix sélectionne le tableau d’ordre du jour correspondant. Le nombre d’activités de chaque ordre du jour est fixé à titre d’exemple : changer de format actualise les activités nommées tout en conservant la durée totale de quarante-cinq minutes.
QSlider contrôle un nombre entier de participants compris entre deux et seize. QToggle indique si des participants à distance sont inclus. L’indication adjacente passe d’une table commune à un tableau partagé avec animation à distance. Ces contrôles modifient le brief affiché au lieu de fonctionner comme des widgets de démonstration indépendants.
Système de design Quasar : l’étape finale conserve un résultat local jusqu’à la réinitialisation
L’étape finale conserve un résultat local jusqu’à la réinitialisation
L’étape de révision reprend le titre après suppression des espaces superflus, le format, le nombre de participants et le mode de participation. L’enregistrement modifie un indicateur local, désactive les boutons Enregistrer et Retour, puis affiche une bannière indiquant la taille du groupe. Le bouton Commencer une autre session efface tous les modèles et revient à la première étape, ce qui permet de parcourir toute la séquence.
Aucune requête n’est envoyée à un calendrier ni à un service de messagerie API. La bannière indique explicitement qu’aucune invitation n’a été envoyée, et le texte de révision précise que l’enregistrement ne crée pas d’événement. Un outil de planification destiné à la production aurait besoin d’une date, d’un fuseau horaire, de destinataires et d’une réponse réelle du backend avant de pouvoir l’affirmer.
Système de design Quasar : utiliser la sémantique des composants natifs et effectuer de vrais tests de focus
Utiliser la sémantique des composants natifs et effectuer de vrais tests de focus
Les contrôles natifs fournissent les rôles radio, curseur et interrupteur. Le curseur porte l’étiquette Participants, et le champ du titre possède une étiquette visible ainsi qu’un message de validation associé au champ. Le stepper identifie l’étape en cours et étiquette son contenu à l’aide du titre de l’étape. Les éléments décoratifs sont exclus du parcours de lecture accessible.
Le test local a modifié le curseur au clavier, activé la participation à distance, franchi la validation et enregistré un brief hybride de neuf personnes. Il a également vérifié la mise en page étroite. Une image statique d’un stepper ne suffirait pas à établir ces relations ni à démontrer que la validation est bien intégrée.
Assurez la cohérence entre l’étape active et le titre de son contenu.
Validez à l’aide des règles avant de modifier le modèle d’étape.
Utilisez une bannière d’état qui décrit précisément le résultat local.
Système de design Quasar : inclure Quasar CSS et le jeu d’icônes requis
Incluez Quasar CSS et le jeu d’icônes dont il dépend
Le fichier d’entrée importe Quasar, enregistre son plugin, charge quasar/dist/quasar.css et importe la feuille de style Material Icons depuis @quasar/extras. Le SFC importe les composants utilisés. Le bundle local intègre les fichiers de police des icônes afin que les coches et les indicateurs de modification s’affichent sans requête de police distante.
La feuille de style originale suit Quasar CSS et ajuste la hauteur du document à son contenu pour permettre l’intégration. Elle ne modifie pas globalement le style de tous les composants natifs et n’invente pas une nouvelle échelle d’espacement. Une application complète utilisant la CLI Quasar ou son plugin Vite peut suivre l’intégration de build standard ; cet exemple complet illustre les mêmes composants dans une petite entrée Vue.
La page utilise la hauteur de son contenu pour l’intégration.
La surcharge de la police de l’application est explicite.
04
Configuration de l’agent IA du système de design Quasar
Point de départ de l’implémentation
Compatibilité vérifiée avec Quasar 2.34.0 et @quasar/extras 2.1.0 avec Vue 3. La police d’icônes doit être fournie en tant que ressource locale pour les indicateurs d’étape par défaut.
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
Un prompt pour votre projet
Prompt pour l’agent IA
Utilisez Quasar 2.34.0 et le brief fourni pour la session guidée. Conservez QStepper, QForm et la validation de QInput, les boutons radio de format de session, le curseur du nombre de participants et l’option d’affichage de l’ordre du jour. Attendez la validation du formulaire avant de passer à l’étape suivante, conservez les valeurs saisies lors du retour en arrière et générez le récapitulatif à partir de ces mêmes valeurs. L’enregistrement sauvegarde un brief local ; toute modification ultérieure invalide son statut d’enregistrement. Incluez la feuille de style Quasar et la configuration locale de Material Icons. Veillez à ce que la mise en page étroite reste utilisable, sans inventer de service d’envoi ni de réservation.
05
Sources et périmètre du système de design Quasar
Quasar 2.34.0 avec les composants natifs et Material Icons en local. Les ordres du jour originaux et les illustrations sont des exemples de contenu. L’enregistrement ne crée pas d’événement dans le calendrier et n’envoie aucune invitation.
