# Système de design Quasar

## Aperçu de l’interface du système de design Quasar

Nommez une session, choisissez un format, ajustez le groupe et enregistrez un brief clairement local.

## 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.

### Rôles de marque par défaut de Quasar

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| --q-primary | #1976D2 | État du stepper, action principale et curseur. |
| --q-secondary | #26A69A | Rôle secondaire. |
| --q-accent | #9C27B0 | Rôle d’accentuation. |
| --q-positive | #21BA45 | Rôle de retour positif. |
| --q-negative | #C10015 | Rôle de validation/erreur. |
| --q-info | #31CCEC | Rôle d’information. |
| --q-warning | #F2C037 | Rôle d’avertissement. |
### Utilitaires d’espacement natifs

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| $space-base | 16px | Unité d’espacement de base de Sass. |
| q-pa-xs / q-ma-xs | 4px | Un quart de l’espacement de base. |
| q-pa-sm / q-ma-sm | 8px | La moitié de l’espacement de base. |
| q-pa-md / q-ma-md | 16px | Espacement de base. |
| q-pa-lg / q-ma-lg | 24px | Une fois et demie l’espacement de base. |
| q-pa-xl / q-ma-xl | 48px | Trois fois l’espacement de base. |
| q-mt-md | 16px top margin | Utilisé au-dessus de la bascule de participation à distance. |
| q-ml-sm | 8px left margin | Utilisé entre les actions de navigation. |
### Échelle typographique native des classes

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| text-h4 | 2.125rem / 2.5rem, weight 400 | Utilitaire de titre d’affichage par défaut. |
| text-h5 | 1.5rem / 2rem, weight 400 | Utilitaire de titre de section par défaut. |
| text-h6 | 1.25rem / 2rem, weight 500 | Utilitaire de petit titre par défaut. |
| text-body1 | 1rem / 1.5rem, weight 400 | Utilitaire de grand texte courant par défaut. |
| text-body2 | 0.875rem / 1.25rem, weight 400 | Utilitaire de texte courant compact par défaut. |
| Application font | system-ui, sans-serif | Remplacement explicite propre à l’application ; la police Roboto par défaut de Quasar n’est pas téléchargée ici. |
### Points de rupture et géométrie explicite de l’application

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| sm minimum | 600px | Début d’un point de rupture natif de Quasar. |
| md minimum | 1024px | Début d’un point de rupture natif de Quasar. |
| lg minimum | 1440px | Début d’un point de rupture natif de Quasar. |
| xl minimum | 1920px | Début d’un point de rupture natif de Quasar. |
| Application stack breakpoint | 740px | Passage d’origine de deux colonnes à une disposition empilée. |
| Page title | 34px / 1.15; 29px mobile | Hiérarchie typographique d’origine. |
| Page gap / padding | 24px / 32px | Composition environnante d’origine. |
| Participants slider | min 2, max 16, step 1 | Véritables propriétés de QSlider ; il ne s’agit pas d’un simple curseur visuel. |
## Guide complet du système de design Quasar

Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle.

Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources.

## 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.

Consultez la spécification associée

## 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.

Consultez la spécification associée

## 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.

Consultez la spécification associée

## 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é.

Consultez la spécification associée

## 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.

1. Envoyez la première étape avec un titre vide pour afficher le message de validation.

2. Saisissez un titre pertinent et choisissez un format de session.

3. Cliquez sur Continuer, puis revenez en arrière avec Retour pour vérifier que les valeurs saisies sont conservées.

Consultez la spécification associée

## 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.

Consultez la spécification associée

## 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.

Consultez la spécification associée

## 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.

Consultez la spécification associée

## 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.

Consultez la spécification associée

## Quasar Exemples de composants du système de design

### Parcours complet avec stepper natif

QStepper/QStep, QForm/QInput, QOptionGroup, QSlider, QToggle et un ordre du jour dérivé.

```
<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>
```

Référence du code

- La première transition attend QForm.validate().

- La règle du titre vérifie que le texte, après suppression des espaces superflus, comporte suffisamment de caractères pertinents.

- L’étape de révision ne crée pas d’événement dans le calendrier.

### Composition originale de l’ordre du jour

Mise en page adaptative et illustration décorative de l’heure autour des composants natifs 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}}
```

Référence du code

- La page utilise la hauteur de son contenu pour l’intégration.

- La surcharge de la police de l’application est explicite.

## 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.

```
// 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
```

### Un prompt pour votre projet

```
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.
```

## 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.

- Indicateur d’étapes État des étapes, navigation et accessibilité.

- Form Validation des règles internes et comportement à l’envoi.

- Input Libellés, compteur et règles.

- Groupe d’options Choix mutuellement exclusifs du format.

- Slider Contrôle au clavier numérique et à la souris.

- Couleurs Rôles de marque à l’exécution.

- Espacement Syntaxe native des utilitaires d’espacement.

- Typographie Utilitaires typographiques par défaut.

- Intégration Référence d’intégration Vue/Vite.

## Ressources connexes du système de design Quasar

### React Native Elements

Créez un compositeur de plan de concentration complet avec React Native Elements 5.0.0 : véritables rôles du thème, champs et sélections contrôlés, validation, confirmation locale et version web testée.

### React Suite

Un calendrier de révision natif React Suite avec les variables CSS v6 vérifiées, des marqueurs sur les cellules de date, un ordre du jour pour la journée sélectionnée, la validation modale et des règles de planification locale explicites.

### Skeleton

Comparez les thèmes Cerberus, Mint et Rose réels de Skeleton 5.0.1 dans un espace de lecture complet, avec inspection des tokens en temps réel, associations de surfaces sombres et état local réversible.


- [Référence de mise en œuvre](https://quasar.dev/vue-components/stepper/)
- [Source](https://quasar.dev/style/color-palette/)
- [Source](https://quasar.dev/style/spacing/)
- [Source](https://quasar.dev/style/typography/)
- [Source](https://quasar.dev/style/breakpoints/)
- [Consultez la spécification associée](https://quasar.dev/start/vite-plugin/)
- [Consultez la spécification associée](https://quasar.dev/style/color-palette/)
- [Consultez la spécification associée](https://quasar.dev/style/spacing/)
- [Consultez la spécification associée](https://quasar.dev/vue-components/stepper/)
- [Consultez la spécification associée](https://quasar.dev/vue-components/form/)
- [Consultez la spécification associée](https://quasar.dev/vue-components/option-group/)
- [Consultez la spécification associée](https://quasar.dev/vue-components/banner/)
- [Référence du code](https://quasar.dev/vue-components/stepper/)
- [Référence du code](https://quasar.dev/style/spacing/)
- [Indicateur d’étapes État des étapes, navigation et accessibilité.](https://quasar.dev/vue-components/stepper/)
- [Form Validation des règles internes et comportement à l’envoi.](https://quasar.dev/vue-components/form/)
- [Input Libellés, compteur et règles.](https://quasar.dev/vue-components/input/)
- [Groupe d’options Choix mutuellement exclusifs du format.](https://quasar.dev/vue-components/option-group/)
- [Slider Contrôle au clavier numérique et à la souris.](https://quasar.dev/vue-components/slider/)
- [Couleurs Rôles de marque à l’exécution.](https://quasar.dev/style/color-palette/)
- [Espacement Syntaxe native des utilitaires d’espacement.](https://quasar.dev/style/spacing/)
- [Typographie Utilitaires typographiques par défaut.](https://quasar.dev/style/typography/)
- [Intégration Référence d’intégration Vue/Vite.](https://quasar.dev/start/vite-plugin/)