Plattformübergreifende und mobile Benutzeroberflächen · Neue Ressource
Quasar-Designsystem.
Ein nativer, mit Quasar geführter Workflow mit echten Marken- und Abstandsangaben, QForm-Validierung, einem dreistufigen Briefing-Ersteller, Auswahlmöglichkeiten für das Format per Optionsfeld und einer Live-Agenda für 45 Minuten.
Quasar 2.34.0 mit Vue 3 und lokal eingebundenen Material Icons aus @quasar/extras 2.1.0. · Implementierungsreferenz
02
Designreferenz des Quasar-Designsystems
Quasar 2.34.0 mit Vue 3. Farben sind die tatsächlichen Laufzeitvariablen --q-*; Referenzen für Abstände und Typografie stammen aus den Sass-Standardwerten. Die Anwendungsüberschrift, die Agenda-Illustration und die Überschreibung der Systemschrift sind eigene Entwicklungen. Material Icons werden lokal über @quasar/extras 2.1.0 bereitgestellt.
Mit Komponenten von Quasar Designsystem lässt sich eine vollständige, geführte Aufgabe erstellen
Mit Komponenten von Quasar lässt sich eine vollständige, geführte Aufgabe erstellen
Quasar bietet Vue-Komponenten sowie Stilhilfen und ein Anwendungsframework. Dieses Beispiel verwendet die Komponenten direkt in einem Vue-3-Einstiegspunkt: Ein nativer Stepper steuert ein Formular, eine Radio-Gruppe, einen Schieberegler, einen Umschalter und eine abschließende Bestätigung. Für die Demonstration dieser Steuerelemente ist kein QLayout-Shell im Vollbildmodus erforderlich.
Die Kurzbeschreibung der Sitzung hat einen konkreten Zweck: Sie ermöglicht die Auswahl eines Arbeitsformats und einer Gruppenkonfiguration und zeigt dazu eine passende Agenda. Die Komponentenbibliothek stellt Steuerelemente und Navigationszustände bereit; die drei eigens erstellten Agenden und ihre Gesamtdauer von jeweils fünfundvierzig Minuten sind Anwendungsinhalte. Ein Terminplanungsdienst ist damit nicht verbunden.
Im Quasar-Designsystem gibt es sowohl Markenvariablen als auch benannte Palettenklassen
Markenvariablen und benannte Palettenklassen gibt es nebeneinander
Der Laufzeitwert von --q-primary lautet im verifizierten Standard-Stylesheet #1976D2. QStepper, QBtn und QSlider erhalten color="primary“, sodass ihre primäre Gestaltung dieser Rolle folgt. Secondary, accent, positive, negative, info und warning bleiben eigenständige benannte Rollen, statt für jedes Steuerelement ad hoc Farben auszuwählen.
Das gespeicherte Banner verwendet benannte grüne Palettenhilfsklassen für eine helle Oberfläche und dunklen Text. Der ausdrücklich formulierte Satz vermittelt den Erfolg ebenso wie die Farbe. Die blaue Ringillustration ist eine eigene dekorative Grafik und wird vor assistiven Technologien verborgen; sie vermittelt keinen zusätzlichen Formularstatus.
Die Abstandssuffixe von Quasar Designsystem wörtlich verstehen
Die Abstandssuffixe von Quasar wörtlich verstehen
Abstandsklassen von Quasar kombinieren Typ, Richtung und Größe. q-mt-md bedeutet einen oberen Außenabstand in mittlerer Größe; q-ml-sm fügt einen kleinen linken Außenabstand hinzu. Der Standardbasiswert beträgt sechzehn Pixel; xs entspricht vier, sm acht, md sechzehn, lg vierundzwanzig und xl achtundvierzig Pixeln. Der Sprung zu xl beträgt drei Basiseinheiten und nicht einen geschätzten Schritt von zweiunddreißig Pixeln.
Die Seite verwendet diese nativen Hilfsklassen innerhalb der Steuerelemente und eigene CSS-Klassen für die übergreifende Gestaltung. Zu den standardmäßigen Typografiehilfen zählen text-body2 mit 0.875rem und text-h5 mit 1.5rem. Der eigene Seitentitel ist vierunddreißig Pixel groß. Die Schriftart wird auf der Seite ausdrücklich auf system-ui umgestellt, während Material Icons für die nativen Glyphen der Komponenten erhalten bleiben.
Im Quasar-Designsystem validiert ein Stepper das Formular nicht von selbst
Ein Stepper validiert das Formular nicht von selbst
QStepper enthält die aktuelle Schrittnummer und drei benannte QStep-Abschnitte. Ein Schritt wird erst dann als abgeschlossen markiert, wenn die Navigation ihn verlassen hat. In beiden Layouts ist das Beispiel vertikal ausgerichtet. So bleibt die Reihenfolge klar, ohne drei horizontale Überschriften auf einem Smartphone zusammenzudrängen.
Die erste Weiter-Aktion gehört zu QForm. Ihr Handler wartet mit await auf validate, bevor er zu Schritt zwei wechselt. Die Navigation über die Überschriften ist deaktiviert, sodass ein Klick auf eine zukünftige Überschrift diese Prüfung nicht umgehen kann. Bei der Rückkehr bleiben Titel, Format und Gruppenwerte bewusst erhalten, da diese Modelle in der übergeordneten SFC und nicht in einem ausgehängten Feld liegen.
Quasar Designsystem: QForm verwendet interne Regeln, nicht jede native Einschränkung
QForm verwendet interne Regeln, nicht jede native Einschränkung
Für QInput ist ein internes rules-Array definiert, das Leerzeichen am Anfang und Ende entfernt und mindestens fünf aussagekräftige Zeichen verlangt. Diese Regel wird von QForm.validate berücksichtigt. Ein natives required- oder email-Attribut allein ersetzt die Regel beim programmgesteuerten Aufruf von validate nicht. Deshalb formuliert das funktionierende Beispiel die tatsächliche Einschränkung direkt.
Bei einem ungültigen Versuch wird der Feldfehler angezeigt und der Nutzer bleibt im ersten Schritt. Nach der Korrektur kann dieselbe Weiter-Schaltfläche zum nächsten Schritt führen. Die Begrenzung auf sechzig Zeichen und der sichtbare Zähler helfen dabei, den Titel an die Vorgaben anzupassen. Die Inline-Regel erklärt, warum ein kurzer oder leerer Titel nicht fortfahren kann.
Sende den ersten Schritt mit leerem Titel ab, um die Validierungsmeldung anzuzeigen.
Gib einen aussagekräftigen Titel ein und wähle ein Sitzungsformat aus.
Fahre fort und gehe mit Zurück wieder zurück, um zu prüfen, ob die Eingaben bei der Navigation erhalten bleiben.
Quasar Designsystem: Radio, Slider und Toggle stehen für unterschiedliche Entscheidungen
Radio-Button, Schieberegler und Umschalter stehen für unterschiedliche Entscheidungen
QOptionGroup ermöglicht die Auswahl einer von drei Optionen: Designkritik, Skizzensitzung und Forschungssynthese. Bei einer Änderung wird das entsprechende Agenda-Array ausgewählt. Die Länge der Agenda ist fest vorgegebener Beispielinhalt. Ein Wechsel des Formats aktualisiert daher die benannten Aktivitäten und erhält zugleich die Gesamtdauer von fünfundvierzig Minuten.
QSlider steuert eine ganzzahlige Teilnehmerzahl von zwei bis sechzehn. QToggle hält fest, ob Teilnehmende aus der Ferne einbezogen werden. Der danebenstehende Hinweis wechselt zwischen einem gemeinsamen Tisch und einer gemeinsamen Tafel mit Moderation aus der Ferne. Diese Steuerelemente verändern die angezeigte Sitzungsbeschreibung, statt nur voneinander unabhängige Demo-Widgets zu sein.
Quasar Designsystem: Der letzte Schritt speichert ein lokales Ergebnis bis zum Zurücksetzen
Der letzte Schritt speichert ein lokales Ergebnis bis zum Zurücksetzen
Im Prüfschritt werden der bereinigte Titel, das Format, die Teilnehmerzahl und die Teilnahmemethode erneut angezeigt. Beim Speichern wird eine lokale Speicherkennzeichnung gesetzt, die Schaltflächen Speichern und Zurück werden deaktiviert und ein Banner mit der Gruppengröße wird eingeblendet. Mit „Neu beginnen“ werden alle Modelle zurückgesetzt und der erste Schritt aufgerufen. So lässt sich der vollständige Ablauf nachvollziehen.
Es wird keine Anfrage an einen Kalender oder einen Messaging-Dienst API gesendet. Das Banner weist ausdrücklich darauf hin, dass keine Einladung versendet wurde, und der Prüfungstext erklärt, dass beim Speichern kein Ereignis erstellt wird. Ein Produktivsystem zur Terminplanung benötigte ein Datum, eine Zeitzone, Empfänger und eine echte Backend-Antwort, bevor es eine solche Aussage treffen könnte.
Quasar Designsystem: Native Komponenten-Semantik und echte Fokus-Tests verwenden
Native Komponenten-Semantik und echte Fokus-Tests verwenden
Die nativen Steuerelemente stellen die Rollen Radio, Slider und Switch bereit. Der Slider trägt die Beschriftung „Teilnehmende“, und das Titelfeld hat eine sichtbare Beschriftung sowie eine Validierungsmeldung auf Feldebene. Der Stepper kennzeichnet den aktuellen Schritt und beschriftet dessen Inhalt mit dem Schritttitel. Dekorative Grafiken werden im Beispiel nicht in die barrierefreie Lesereihenfolge aufgenommen.
Im lokalen Test wurde der Slider per Tastatur verändert, die Teilnahme aus der Ferne aktiviert, die Validierung durchlaufen und eine hybride Sitzungsbeschreibung für neun Personen gespeichert. Außerdem wurde das schmale Layout geprüft. Ein statisches Bild eines Steppers würde diese Beziehungen weder herstellen noch belegen, dass die Validierungsprüfung eingebunden ist.
Sorge dafür, dass der aktive Schritt und der Titel seines Inhalts übereinstimmen.
Führe vor dem Ändern des Schrittmodells die Validierung über die Regeln aus.
Verwende ein Statusbanner, das das genaue lokale Ergebnis beschreibt.
Quasar Designsystem: Quasar CSS und den erwarteten Icon-Satz einbinden
Binden Sie Quasar CSS und das dafür vorgesehene Icon-Set ein
Die Einstiegsdatei importiert Quasar, registriert dessen Plugin, lädt quasar/dist/quasar.css und importiert das Stylesheet für Material Icons aus @quasar/extras. Die SFC importiert die verwendeten Komponenten. Das lokale Bundle bindet die Schriftdateien für die Icons ein, damit Häkchen und Bearbeitungssymbole ohne externe Schriftanfrage angezeigt werden.
Das ursprüngliche Stylesheet folgt Quasar CSS und setzt die Dokumenthöhe für die Einbettung auf die Inhaltshöhe. Es gestaltet nicht pauschal jede native Komponente um und führt keine Ersatz-Abstandsskala ein. Eine vollständige Anwendung mit Quasar CLI oder Vite-Plugin kann die standardmäßige Build-Integration verwenden. Dieses vollständige Beispiel zeigt dieselben Komponenten in einem kleinen Vue-Einstiegspunkt.
Die Seite verwendet für die Einbettung die Inhaltshöhe.
Die Überschreibung der Anwendungsschrift ist ausdrücklich festgelegt.
04
Quasar Designsystem-Agent einrichten
Ausgangspunkt für die Implementierung
Quasar 2.34.0 und @quasar/extras 2.1.0 wurden mit Vue 3 überprüft. Die Icon-Schrift ist ein erforderliches lokales Asset für die standardmäßigen Schrittanzeigen.
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
Ein Prompt für dein Projekt
Agenten-Prompt
Verwende Quasar 2.34.0 und die bereitgestellte Vorlage für eine angeleitete Sitzung. Behalte QStepper, QForm und die QInput-Validierung, die Radio-Steuerelemente für das Sitzungsformat, den Teilnehmer-Slider und den Agenda-Toggle bei. Warte vor dem nächsten Schritt die Formularvalidierung ab, behalte eingegebene Werte beim Zurückgehen bei und leite die Zusammenfassung im Prüfschritt aus denselben Werten ab. Beim Speichern wird eine Sitzungsbeschreibung lokal gespeichert; nachfolgende Änderungen heben ihren gespeicherten Status auf. Binde das Stylesheet von Quasar und die lokale Einrichtung von Material Icons ein. Sorge dafür, dass das schmale Layout nutzbar bleibt, ohne einen Versand- oder Buchungsdienst zu erfinden.
05
Quasar Designsystem: Quellen und Geltungsbereich
Quasar 2.34.0 mit nativen Komponenten und lokalen Material Icons. Die ursprünglichen Agenden und Grafiken sind Beispielinhalte. Beim Speichern wird weder ein Kalendereintrag erstellt noch eine Einladung versendet.
