Komponentensystem für Unternehmen · Neue Ressource
Vuestic UI-Designsystem.
Ein natives Vuestic-Prüfblatt mit anhand der Quellen verifizierten hellen und dunklen Presets, barrierefreien Bewertungsbeschriftungen, Textfeldvalidierung, abgeleitetem Durchschnitt und einem gespeicherten Zustand, der die abgeschlossene Bewertung beibehält.
Vuestic UI 1.10.3 mit Vue 3; Material Icons lokal über @quasar/extras 2.1.0 eingebunden. · Implementierungsreferenz
02
Vuestic UI-Designsystem: Designreferenz
Vuestic UI 1.10.3. Preset-Werte werden vom installierten Farbdienst abgerufen, die Komponentenvariablen aus dessen CSS. Das Arbeitsblatt behält das standardmäßige helle Preset bei, setzt jedoch --va-font-family bewusst auf system-ui. Die dekorativen Formen und die umgebende Skalierung sind individuell gestaltet.
Vuestic UI-Designsystem: Eine konfigurierbare Vue-Bibliothek mit benannten Farb-Presets
Eine konfigurierbare Vue-Bibliothek mit benannten Farb-Presets
Vuestic registriert seine gemeinsam genutzten Dienste über createVuestic. Das Beispiel verwendet native Komponenten, die aus vuestic-ui importiert werden, und das standardmäßige helle Farb-Preset. Bewertung, Schaltflächen, Fortschrittsanzeige und Erfolgsbenachrichtigung lösen semantische Farbnamen über denselben Dienst auf.
Das Arbeitsblatt zeigt eine konkrete Anwendung dieser Komponenten: Es trennt drei Prüffragen voneinander, erfasst eine stützende Beobachtung, berechnet einen Durchschnitt und sperrt ein lokal gespeichertes Ergebnis. Die farbigen Kriterienmarkierungen und die zweispaltige Gestaltung sind individuelles Anwendungsdesign und keine zusätzlichen Vuestic-Komponenten.
Vuestic UI-Designsystem: Service-Presets von CSS-Geometrievariablen unterscheiden
Service-Presets von CSS-Geometrievariablen unterscheiden
Das verifizierte helle Preset definiert primary #154EC1, success #3D9209 und textPrimary #262824. Das dunkle Preset verwendet andere Werte für primäre Farben, Text und Oberflächen, anstatt die helle Seite lediglich umzukehren. Die Referenztabelle führt beide Presets auf; die Vorschau bleibt bewusst im hellen Modus.
Die Geometrie der Komponenten wird über CSS-Variablen wie --va-button-border-radius und --va-form-element-border-radius konfiguriert, die im installierten Stylesheet beide auf 0.25rem gesetzt sind. Ein Farb-Preset und eine Überschreibung von CSS-Variablen lösen unterschiedliche Aufgaben: Verwenden Sie den Dienst für semantische Rollen und die dokumentierte Variable für unterstützte Komponentengeometrie.
Vuestic UI-Designsystem: Erforderliche Symbole laden und Schriftüberschreibung festlegen
Erforderliche Symbole laden und Schriftüberschreibung festlegen
Vuestic setzt für --va-font-family standardmäßig Source Sans Pro. Das Beispiel überschreibt diese Variable mit system-ui, statt stillschweigend von einer Schriftart abhängig zu sein, die nie geladen wurde. Native Komponentenbeschriftungen und Anwendungstexte verwenden somit dieselbe, ausdrücklich angegebene und verfügbare Schriftfamilie.
Die standardmäßigen Bewertungssymbole verwenden Material-Icons-Namen wie star und star_outline. Ihr lokales Schrift-Stylesheet wird aus @quasar/extras importiert und zusammen mit den Schriftdateien gebündelt. Fehlt dieses Asset, können statt der erwarteten Sternformen die Wörter der Symbolnamen erscheinen. Die Symbolschrift bleibt getrennt von der Überschreibung der Anwendungsschriftfamilie.
Vuestic UI-Designsystem: Null als unbeantworteten Zustand statt als schlechte Bewertung verwenden
Null als Status „nicht beantwortet“ statt als schlechte Bewertung verwenden
Jede VaRating ist an den Zahlenwert eines Kriteriums gebunden. Der Maximalwert beträgt fünf und clearable ist aktiviert. Wenn Sie die aktuelle Bewertung erneut auswählen, kann das Kriterium dadurch auf null zurückgesetzt werden. Bei null zeigt die Benutzeroberfläche „Nicht bewertet“ an, statt den Wert als abgegebenes Urteil von null von fünf darzustellen.
Der Durchschnitt wird durch die Anzahl der positiven Bewertungen geteilt. So werden unbeantwortete Kriterien nicht negativ gewertet, während das Arbeitsblatt noch ausgefüllt wird. Zum Speichern müssen dennoch alle drei Kriterien beantwortet sein, sodass der endgültige Durchschnitt stets die vollständige Bewertung abbildet. Jede Änderung einer Bewertung aktualisiert sofort die Abschlussanzeige, den Fortschrittsbalken und die Zusammenfassung.
Speichern Sie das leere Arbeitsblatt und prüfen Sie die Rückmeldungen zu fehlenden Bewertungen und Notizen.
Bewerten Sie Klarheit mit 4, Hierarchie mit 3 und Feedback mit 2; der Durchschnitt beträgt dann 3,0.
Notieren Sie eine konkrete Beobachtung und speichern Sie. Wählen Sie anschließend „Erneut starten“, um das gesamte Arbeitsblatt zurückzusetzen.
Vuestic UI-Designsystem: Eine hilfreiche Beobachtung braucht aussagekräftigen Text und ausreichend Platz
Eine hilfreiche Beobachtung braucht aussagekräftigen Text und ausreichend Platz
VaTextarea hat eine sichtbare Beschriftung, eine Begrenzung auf vierhundert Zeichen und eine Zeichenzählung. Nach einem Speicherversuch prüft die Anwendung, ob der bereinigte Wert mindestens zwanzig Zeichen umfasst. Eine Zeichenfolge aus Leerzeichen erfüllt die Anforderung daher nicht, auch wenn sie nominell die erforderliche Zeichenlänge hat.
Für VaTextarea ist die automatische Größenanpassung mit mindestens vier und höchstens zwölf Zeilen aktiviert. Das ist eine funktionale Einstellung und nicht nur eine beispielhafte Prop-Angabe: Ohne automatische Größenanpassung ergab die Einstellung der Mindestzeilenzahl nicht den gewünschten, mitwachsenden Notizbereich. Die korrigierte Version hält Beobachtungen auf schmalen Bildschirmen sichtbar und ermöglicht bei außergewöhnlich langen Notizen weiterhin normales Scrollen.
Vuestic UI-Designsystem: Fortschritt anhand der Vollständigkeit und nicht anhand des Bewertungsdurchschnitts berechnen
Fortschritt anhand abgeschlossener Aufgaben statt anhand des Bewertungsdurchschnitts berechnen
Der Fortschrittsbalken zeigt an, wie viele Kriterien eine positive Bewertung haben: Anzahl der bewerteten Kriterien geteilt durch drei und multipliziert mit einhundert. Die große Zahl daneben gibt den Bewertungsdurchschnitt an. Diese Werte beruhen auf unterschiedlichen Bezugsgrößen und dürfen nicht verwechselt werden: Drei niedrige Bewertungen können trotzdem eine Vollständigkeit von einhundert Prozent ergeben.
Der Satz zur Vollständigkeit nennt Zähler und Nenner ausdrücklich. Der Durchschnitt ist als „Durchschnitt der bewerteten Kriterien“ beschriftet, und die Zusammenfassung wiederholt die Bewertung jedes Kriteriums. So können Leserinnen und Leser die Berechnung nachvollziehen, statt einen nicht näher erläuterten Fortschrittsbalken als Gesamturteil zur Qualität zu verstehen.
Vuestic UI-Designsystem: Eine abgeschlossene lokale Bewertung bis zum ausdrücklichen Zurücksetzen sperren
Eine abgeschlossene lokale Bewertung bis zu einem ausdrücklichen Zurücksetzen sperren
Beim Speichern wird zuerst attempted gesetzt. Anschließend werden alle Bewertungen und die Beobachtung geprüft, bevor der gespeicherte Zustand aktiviert wird. Das Flag saved setzt die Bewertungen und das Textfeld auf schreibgeschützt und deaktiviert die Schaltfläche „Speichern“. Die Erfolgsmeldung weist darauf hin, dass die Bewertung lokal gespeichert und nichts gesendet wurde.
„Erneut starten“ setzt in einem Handler alle Bewertungen, die Notiz, die Sichtbarkeit der Validierung und den gespeicherten Zustand zurück. Das ist bewusst ausdrücklich vorgesehen, denn andernfalls wäre die Bestätigung veraltet, sobald ein Wert nach dem Speichern geändert wird. Das Beispiel setzt weder ein Backend noch ein Konto oder einen Empfänger der Bewertung voraus.
Vuestic UI-Designsystem: Jedes Bewertungselement mit Kriterium und Wert benennen
Jedes Bewertungselement mit Kriterium und Wert benennen
Die nativen Elemente von VaRating stellen in der Barrierefreiheitsstruktur Schaltflächen bereit. aria-item-label enthält den Namen des Kriteriums sowie die Platzhalter für Wert und Höchstwert und erzeugt so Beschriftungen wie „Bewertung für Klarheit: 4 von 5“. Dadurch sind bei drei Bewertungen auf derselben Seite nicht alle fünfzehn Stern-Schaltflächen ununterscheidbar.
Das Textfeld hat eine eigene sichtbare Beschriftung, der Fortschrittsbalken eine Beschriftung zur Vollständigkeit und die gespeicherte Bewertung wird in einem Statusbereich gemeldet. Dekorative Kriteriensymbole sind für assistive Technologien ausgeblendet. Bei den lokalen Prüfungen wurden tatsächlich beschriftete Bewertungsschaltflächen angeklickt, die Validierung durchgespielt und das endgültige Layout bei 280px geprüft – nicht nur das Vorhandensein von ARIA-Attributen.
Geben Sie jeder wiederholten Bewertung eine kriterienspezifische Elementbeschriftung.
Machen Sie unbeantwortete und schreibgeschützte Zustände visuell unterscheidbar.
Prüfen Sie die numerische Zusammenfassung, nachdem Sie mit den tatsächlichen nativen Steuerelementen interagiert haben.
Vuestic UI-Designsystem: Plugin, Komponente CSS und lokales Symbol-Asset einbinden
Plugin, Komponenten-CSS und lokales Icon-Asset einbinden
Der Einstiegspunkt registriert createVuestic und importiert vuestic-ui/css vor dem ursprünglichen Layout-Stylesheet. App.vue importiert alle verwendeten Komponenten. Das Beispiel ist daher nicht von einer undokumentierten Auto-Import-Konfiguration abhängig. Die gemeinsame Schriftüberschreibung wird nach dem Bibliotheks-Stylesheet CSS angewendet.
Der Paketbefehl verwendet @quasar/extras ausschließlich als Quelle für die lokale Material-Icons-Schrift; weder Quasar wird registriert noch werden dessen Komponenten in das Arbeitsblatt eingebunden. Die vollständige SFC und das Stylesheet oben können in die nachfolgende Vite-Vue-Einrichtung übernommen werden. Die generierte eigenständige Vorschau bindet die erforderlichen Assets ein und lädt keine Schriftart von einem entfernten Server.
VaRating, VaTextarea, VaButton, VaChip, VaProgressBar und VaAlert greifen auf dasselbe Bewertungsmodell zu.
vue
<script setup>
import {ref,computed} from 'vue';
import {VaRating,VaTextarea,VaButton,VaAlert,VaChip,VaProgressBar} from 'vuestic-ui';
const criteria=ref([{name:'Clarity',hint:'Can you tell what the next action will do?',value:0},{name:'Hierarchy',hint:'Does the most important information stand out?',value:0},{name:'Feedback',hint:'Does the page explain what changed?',value:0}]);
const note=ref(''),attempted=ref(false),saved=ref(false);
const rated=computed(()=>criteria.value.filter(x=>x.value>0).length),average=computed(()=>rated.value?(criteria.value.reduce((a,x)=>a+x.value,0)/rated.value).toFixed(1):'—');
const noteError=computed(()=>attempted.value&¬e.value.trim().length<20);
function save(){attempted.value=true;if(rated.value===3&¬e.value.trim().length>=20)saved.value=true}
function reset(){criteria.value.forEach(x=>x.value=0);note.value='';saved.value=false;attempted.value=false}
</script>
<template><main class="review-shell"><header><p class="eyebrow">DESIGN CRITIQUE · PERSONAL WORKSHEET</p><h1>Turn an impression into useful feedback.</h1><p>Review an interface using three specific questions. Keep one concrete observation alongside the scores.</p></header><div class="review-layout"><section class="review-form"><div class="form-head"><h2>Your assessment</h2><VaChip outline size="small">{{rated}} of 3 rated</VaChip></div><div v-for="(criterion,index) in criteria" :key="criterion.name" class="criterion"><div class="criterion-mark" :class="'mark-'+index" aria-hidden="true"><i></i><b></b></div><div class="criterion-body"><h3>{{criterion.name}}</h3><p>{{criterion.hint}}</p><VaRating v-model="criterion.value" :max="5" clearable color="primary" :readonly="saved" :aria-label="criterion.name+' rating: '+criterion.value+' of 5'" :aria-item-label="criterion.name+' score {value} of {max}'"/><span class="score">{{criterion.value?criterion.value+' / 5':'Not rated'}}</span></div></div><p v-if="attempted&&rated<3" class="error" role="alert">Rate all three criteria before saving.</p><VaTextarea v-model="note" label="One concrete observation" placeholder="For example: the Save button gives no confirmation after the form closes." autosize :min-rows="4" :max-rows="12" :max-length="400" counter :error="noteError" :error-messages="noteError?['Write at least 20 meaningful characters.']:[]" :readonly="saved"/><div class="actions"><VaButton @click="save" :disabled="saved">Save assessment</VaButton><VaButton preset="secondary" @click="reset">Start again</VaButton></div></section><aside><div class="summary"><p class="eyebrow">ASSESSMENT SNAPSHOT</p><div class="average">{{average}}<span>/ 5</span></div><p class="average-label">Average of rated criteria</p><VaProgressBar :model-value="rated/3*100" color="primary" aria-label="Criteria completion"/><p class="completion">{{rated}} of 3 criteria completed</p><p class="guidance">A score starts a conversation. Your example explains what should change and why.</p><dl><div v-for="criterion in criteria" :key="criterion.name"><dt>{{criterion.name}}</dt><dd>{{criterion.value||'—'}}</dd></div></dl></div><VaAlert v-if="saved" color="success" outline class="saved" role="status"><strong>Assessment saved locally.</strong><p>All three criteria and your observation are captured in this preview. Nothing was sent.</p></VaAlert><p v-else class="local-note">This worksheet stores only local page state. It does not submit a review to another person.</p></aside></div></main></template>
Material Icons verwenden weiterhin ihre eigene Schriftfamilie.
Es wird keine Mindesthöhe für das Dokument festgelegt.
04
Vuestic UI Design-System-Einrichtung für KI-Agenten
Ausgangspunkt für die Implementierung
Verifiziert mit Vuestic UI 1.10.3 und lokalen Material Icons aus @quasar/extras 2.1.0. Beide vollständigen Quellcodebeispiele sind enthalten; ein externer Fontdienst ist nicht erforderlich.
javascript
// npm create vite@latest vuestic-review -- --template vue
// cd vuestic-review && npm install
// npm install [email protected] @quasar/[email protected]
// Save the complete examples as src/App.vue and src/style.css.
// src/main.js:
import {createApp} from 'vue';
import {createVuestic} from 'vuestic-ui';
import 'vuestic-ui/css';
import '@quasar/extras/material-icons/material-icons.css';
import './style.css';
import App from './App.vue';
createApp(App).use(createVuestic()).mount('#app');
// index.html: <div id="app"></div><script type="module" src="/src/main.js"></script>
// npm run dev
Ein Prompt für dein Projekt
Agenten-Prompt
Verwenden Sie Vuestic UI 1.10.3, um das Bewertungs-Worksheet mit drei nativen VaRating-Kriterien, VaTextarea, Fortschrittsanzeige, Status sowie Speichern- und Zurücksetzen-Steuerelementen nachzubilden. Berechnen Sie den Durchschnitt anhand der bewerteten Kriterien. Zum Speichern müssen alle drei Bewertungen vorliegen und die Notiz nach dem Entfernen überflüssiger Leerzeichen mindestens zwanzig Zeichen lang sein. Behalten Sie das automatisch in der Höhe angepasste Textfeld bei, damit die gesamte Bewertung sichtbar bleibt, und sorgen Sie für einheitliches Verhalten im gespeicherten schreibgeschützten Zustand und beim Zurücksetzen. Binden Sie createVuestic, natives CSS und die lokale Icon-Schriftart ein. Dies ist ein lokaler Bewertungseintrag, kein Dienst zur Verwaltung von Prüfungsserien.
05
Vuestic UI Design-System: Quellen und Umfang
Vuestic UI 1.10.3 mit der standardmäßigen hellen Farbpalette und einer expliziten Überschreibung auf Systemschriftarten. Originale Bewertungsfragen und Grafiken. Der gespeicherte Zustand ist lokal; es gibt keine externe Übermittlung von Bewertungen und keine Speicherung über das Neuladen hinaus.
