Ein nativer Oruga-Katalogeditor mit durchsuchbaren, entfernbaren Themen-Tags, festgelegten Vokabulargrenzen, den tatsächlichen Tokens eines optionalen Themes und einer Live-Karte, die die ausgewählten Bezeichnungen widerspiegelt.
Durchsuchen Sie ein kontrolliertes Vokabular, fügen Sie bis zu drei Themen hinzu, entfernen Sie ein Tag und speichern Sie eine lokale Notizbeschreibung.
@oruga-ui/oruga-next 0.14.4 mit @oruga-ui/theme-oruga 0.10.0 und lokalen MDI-Icons. · Implementierungsreferenz
02
Gestaltungsreferenz für das Oruga UI-Designsystem
Oruga Vue 3-Paket 0.14.4 mit @oruga-ui/theme-oruga 0.10.0. Die folgenden Werte gehören zu diesem optionalen Standard-Theme, nicht zu einem unveränderlichen Headless-Kern. MDI-Icons 7.4.47 werden lokal bereitgestellt. Die umgebende Kataloggestaltung und die Ordnergrafik sind eigens erstellt.
Oruga UI-Designsystem: Komponentenverhalten von Oruga vom optionalen Theme trennen
Komponentenverhalten von Oruga vom optionalen Theme trennen
Oruga stellt Vue-Komponenten bereit, ohne ein bestimmtes CSS-Framework vorauszusetzen. Dieses Beispiel kombiniert das Vue 3-Paket mit dem separaten Oruga-Standard-Theme. Die ausgewählten grünen Tags und umrandeten Felder stammen aus diesem Theme; Suche, Auswahl und Entfernen gehören hingegen zum nativen Komponentenverhalten.
Diese Abgrenzung ist bei der Bewertung der Bibliothek hilfreich. Ein Team kann die Komponenten-API beibehalten und die Klassenkonfiguration ersetzen oder ein anderes unterstütztes Theme wählen. In der Referenztabelle werden daher das Theme-Paket und seine Version genannt, statt die grüne Primärfarbe als allgemeingültige Vorgabe für jede Oruga-Anwendung darzustellen.
Oruga UI-Designsystem: Die tatsächlichen Variablen des Standard-Themes verwenden
Die tatsächlichen Variablen des Standard-Themes verwenden
Das installierte optionale Theme definiert --oruga-primary als #445e00 und --oruga-primary-invert als white. Die Gefahrenfarbe ist #b60000, Feldrahmen verwenden #dbdbdb. Die Komponenten-Prop variant wählt die passende semantische Farbgruppe aus. Dadurch ist keine separate CSS-Regel für jedes Feld oder Tag erforderlich.
Dasselbe Theme definiert einen Standard-Eckenradius von vier Pixeln, eine Steuerelementhöhe von 2.25em sowie Innenabstandsformeln, die den ein Pixel breiten Rahmen berücksichtigen. Da diese Werte relativ zur Schriftgröße des Steuerelements sind, wirkt sich eine Änderung der Schriftgröße auf die Geometrie aus. Der halbe em-Abstand des Themes beschreibt eine Beziehung zwischen Komponenten und ist kein Beleg für ein vollständiges Layout-Abstandsraster.
Oruga UI-Designsystem: Das Layout bereitstellen, das Oruga bewusst nicht vorgibt
Das Layout bereitstellen, das Oruga bewusst nicht vorgibt
Der Katalog verwendet eine flexible Editor-Spalte und eine 330px breite Kartenspalte; unterhalb von 760px werden sie untereinander angeordnet. Für den Seitentitel kommt eine serifenlose Systemschrift zum Einsatz, während der Kartentitel in Georgia gesetzt ist, um an einen redaktionellen Eintrag zu erinnern. Beides sind eigenständige Gestaltungsentscheidungen; externe Schriftdateien sind dafür nicht erforderlich.
Oruga schreibt weder ein Raster noch ein Utility-Framework vor. Das vollständige Stylesheet macht daher Panel-Innenabstände, Einzüge auf schmalen Bildschirmen und Umbruchregeln sichtbar. Der Tag-Zähler hält Zähler und Nenner zusammen. Der Kartentitel kann umbrechen, wenn Notiznamen lang sind, statt die eingebettete Seite seitlich zu verschieben.
Oruga UI-Designsystem: Ausgewählte Werte von der Suchanfrage trennen
Ausgewählte Werte von der Suchanfrage trennen
OTaginput bindet das Array der ausgewählten Themen über v-model. Der interne Autocomplete-Suchtext filtert die möglichen Bezeichnungen, ohne dieses Array zu ersetzen. Das Vokabular umfasst sechs eigens erstellte Themen mit konkreten Definitionen. Die Live-Karte zeigt Definitionen nur für ausgewählte Themen an.
Der standardmäßige Suchvergleich ignoriert Groß- und Kleinschreibung. Beim lokalen Test wurde Color eingegeben; anschließend wurde gewartet, bis die Filterung abgeschlossen war, bevor die Option ausgewählt wurde. Eine sofortige Prüfung während der Entprellung der Eingabe würde fälschlich den Eindruck erwecken, die Filterung sei fehlgeschlagen. Nach der Auswahl wird die Suchanfrage geleert, während bereits ausgewählte Tags erhalten bleiben.
Nach Color suchen und die passende Option auswählen.
Forms hinzufügen, sodass zusammen mit Navigation drei Themen ausgewählt sind.
Ein Tag entfernen, die Änderung auf der Karte bestätigen und vor dem Speichern einen Ersatz auswählen.
Oruga UI-Designsystem: Vokabular, Duplikate und Anzahl unabhängig voneinander steuern
Vokabular, Duplikate und Anzahl unabhängig voneinander steuern
allow-new=false verhindert, dass beliebige eingegebene Formulierungen zu Bezeichnungen werden. allow-duplicates=false verhindert, dass dieselbe vorhandene Bezeichnung mehrfach hinzugefügt wird. maxitems=3 begrenzt die Gesamtzahl der ausgewählten Einträge und zeigt den Zähler an. Jede Einstellung schützt einen anderen Aspekt eines kontrollierten Vokabulars.
Die Anwendung prüft weiterhin, ob mindestens ein Thema ausgewählt ist, wenn Speichern versucht wird. Die Begrenzung der maximalen Auswahl bedeutet nicht, dass eine Mindestauswahl erforderlich ist. Außerdem prüft sie, ob der gekürzte Titel mindestens fünf aussagekräftige Zeichen enthält, während das maxlength-Attribut des nativen Eingabefelds die Länge auf höchstens achtzig Zeichen begrenzt.
Oruga UI-Designsystem: OField für Beschriftungen und spezifische Validierungsmeldungen verwenden
OField für Beschriftungen und spezifische Validierungsmeldungen verwenden
OField stellt die sichtbaren Beschriftungen „Notiztitel“ und „Themen“ sowie die zugehörigen Meldungen bereit. Nach einem ungültigen Speicherversuch erhält das betreffende Feld eine Gefahrenvariante und eine konkrete Korrekturmeldung. Der Hinweis zu den Themen erläutert den zulässigen Bereich und die Vokabularbeschränkung, bevor ein Fehler auftritt.
Das Dropdown des nativen Tag-Eingabefelds folgt dem Combobox-/Listbox-Muster. In dieser Version gehört die Combobox-Rolle zu einem Wrapper, in dem das bearbeitbare Textfeld verschachtelt ist. Die Qualitätssicherung füllt daher das tatsächliche Eingabefeld „Themen durchsuchen“ aus, statt anzunehmen, dass das Element mit der Combobox-Rolle selbst ein Eingabefeld ist.
Oruga UI-Designsystem: Auch ein Standard-Icon-Paket benötigt seine Schriftdatei
Auch ein Standard-Icon-Paket benötigt seine Schriftdatei
Das Steuerelement zum Entfernen eines Tags verwendet das standardmäßige MDI-Icon-Paket von Oruga. Durch das Laden des Komponententhemes wird diese Schrift nicht automatisch geladen; daher gehört @mdi/font zur vollständigen Einrichtung. Die eigenständige Vorschau verwendet ein lokales WOFF2-Asset und die erforderlichen Icon-Regeln, sodass keine externe Schriftabhängigkeit entsteht.
Das Entfernen erfolgt weiterhin über eine echte Schaltfläche mit der barrierefreien Beschriftung „Thema entfernen“. Die dekorative Ordnerillustration hat nichts mit diesen Steuerelement-Icons zu tun und ist für assistive Technologien ausgeblendet. So wird verhindert, dass ein Schmuckelement für ein interaktives Steuerelement gehalten wird.
Oruga UI-Designsystem: Einen gespeicherten Status verwerfen, wenn sich seine Eingaben ändern
Gespeicherten Snapshot ungültig machen, wenn sich Eingaben ändern
Die Aktion „Speichern“ hält einen Satz fest, der den gekürzten Titel und die Anzahl der ausgewählten Themen nennt. Ein Watcher beobachtet sowohl den Titel als auch das Themen-Array tiefgreifend; durch das Entfernen eines Eintrags wird die Bestätigung daher ebenso gelöscht wie durch eine Titeländerung. „Speichern“ ist nur deaktiviert, solange der aktuelle Stand gespeichert ist.
„Notiz löschen“ setzt den Titel, alle ausgewählten Themen, die Validierungsversuche und den Speicherstatus zurück. Auf der Karte steht anschließend „Unbenannte Forschungsnotiz“ und „Keine Themen ausgewählt“. Der gesamte Ablauf vom leeren Zustand über die Bearbeitung bis zum Speichern ist sichtbar, ohne dass sich hinter der Schaltfläche ein Backend, ein Upload oder eine Veröffentlichungsaktion verbirgt.
Das Modell mit dem ausgewählten Array beibehalten, wenn sich die Suchanfrage ändert.
Gespeicherte Rückmeldung bei verschachtelten Änderungen am Array löschen.
Das Ergebnis als lokalen Status beschreiben, nicht als Veröffentlichung.
Oruga UI-Designsystem: Komponenten gemäß der aktuellen Oruga-Registrierung explizit importieren
Komponenten mit der aktuellen Oruga-Registrierung explizit importieren
Die verifizierte Einrichtung mit Version 0.14.4 erstellt eine Oruga-Instanz und bindet sie in der Vue-App ein. App.vue importiert OField, OInput, OTaginput, OTag und OButton explizit. Dies entspricht dem aktuellen Registrierungsmodell. Wer sich auf ältere Beispiele verlässt, die eine globale Registrierung aller Komponenten voraussetzen, riskiert eine unvollständige Anwendung.
Die Theme-README erklärt, dass dieses Standardtheme die vorhandenen Klassennamen von Oruga verwendet und dessen Stylesheet benötigt, jedoch kein zusätzliches Theme-Konfigurationsobjekt. Der Einstiegspunkt importiert dieses Stylesheet, das MDI-Asset und das ursprüngliche Layout in der richtigen Reihenfolge. Die vollständigen Quellcodebeispiele oben und die Vite-Root-Datei weiter unten enthalten alle erforderlichen Bestandteile.
OTaginput, OField, OInput, OTag und OButton verbinden ein eingeschränktes Vokabular mit einer dynamischen Katalogkarte.
vue
<script setup>
import {ref,computed,watch} from 'vue';
import {OField,OInput,OTaginput,OButton,OTag} from '@oruga-ui/oruga-next';
const title=ref('Finding a calmer navigation'),topics=ref(['Navigation']),attempted=ref(false),saved=ref('');
const definitions={'Navigation':'Menus, wayfinding and the path through a product.','Typography':'Type hierarchy, reading rhythm and legibility.','Color':'Semantic roles, contrast and theme behavior.','Forms':'Input labels, validation and correction.','Motion':'Transitions, reduced motion and continuity.','Accessibility':'Keyboard flow, semantics and assistive technology.'};
const options=Object.keys(definitions),valid=computed(()=>title.value.trim().length>=5&&topics.value.length>=1&&topics.value.length<=3);
watch([title,topics],()=>saved.value='',{deep:true});
function save(){attempted.value=true;if(valid.value)saved.value=`Saved locally: “${title.value.trim()}” with ${topics.value.length} ${topics.value.length===1?'topic':'topics'}.`}
function reset(){title.value='';topics.value=[];attempted.value=false;saved.value=''}
</script>
<template><main class="catalog-shell"><header><p class="eyebrow">RESEARCH CATALOG · LABEL A NOTE</p><h1>Give the next reader a useful starting point.</h1><p>Name a research note and choose up to three topics from a controlled vocabulary.</p></header><div class="catalog-layout"><section class="editor"><h2>Note details</h2><OField label="Note title" :variant="attempted&&title.trim().length<5?'danger':undefined" :message="attempted&&title.trim().length<5?'Use at least five meaningful characters.':undefined"><OInput v-model="title" maxlength="80" expanded placeholder="What did you learn?"/></OField><OField label="Topics" :variant="attempted&&!topics.length?'danger':undefined" :message="attempted&&!topics.length?'Choose at least one topic.':'Choose 1–3 existing topics; duplicate and new labels are not added.'"><OTaginput v-model="topics" :options="options" :allow-new="false" :allow-duplicates="false" :maxitems="3" open-on-focus :keep-open="false" expanded variant="primary" placeholder="Search topics" aria-close-label="Remove topic"><template #empty>No matching topic. Try Color, Forms or Motion.</template></OTaginput></OField><div class="actions"><OButton variant="primary" @click="save" :disabled="!!saved">Save local note</OButton><OButton @click="reset">Clear note</OButton></div><p role="status" class="result">{{saved||'The preview keeps only local page state.'}}</p><h3>Vocabulary guide</h3><dl class="vocabulary"><div v-for="(meaning,name) in definitions" :key="name"><dt>{{name}}</dt><dd>{{meaning}}</dd></div></dl></section><aside class="note-card"><div class="folder-art" aria-hidden="true"><i></i><b></b><span></span></div><p class="eyebrow">CATALOG CARD PREVIEW</p><h2>{{title.trim()||'Untitled research note'}}</h2><div class="topic-tags"><OTag v-for="topic in topics" :key="topic" variant="primary">{{topic}}</OTag><span v-if="!topics.length" class="empty-topics">No topics selected</span></div><p class="card-label">This note will appear under</p><ul><li v-for="topic in topics" :key="topic"><strong>{{topic}}</strong><span>{{definitions[topic]}}</span></li></ul><p class="card-foot">Original sample note · no upload or publishing</p></aside></div></main></template>
Oruga stellt kein verbindliches Rastersystem bereit; dieses Layout ist explizit in der Anwendung definiert CSS.
Der Zählertext bleibt bei schmalen Ansichten einzeilig.
04
Oruga UI-Designsystem: Einrichtung des AI-Agenten
Ausgangspunkt für die Implementierung
Verifizierte Versionen: Oruga 0.14.4, optionales Standardtheme 0.10.0 und MDI 7.4.47. Die Komponenten werden explizit importiert; für das Standardtheme ist keine zusätzliche JavaScript-Theme-Konfiguration erforderlich.
javascript
// npm create vite@latest oruga-catalog -- --template vue
// cd oruga-catalog && npm install
// npm install @oruga-ui/[email protected] @oruga-ui/[email protected] @mdi/[email protected]
// Save the complete examples as src/App.vue and src/style.css.
// src/main.js:
import {createApp} from 'vue';
import {createOruga} from '@oruga-ui/oruga-next';
import '@oruga-ui/theme-oruga/style.css';
import '@mdi/font/css/materialdesignicons.css';
import './style.css';
import App from './App.vue';
createApp(App).use(createOruga()).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
Beginne mit dem Forschungnotiz-Katalog auf Oruga 0.14.4 und seinem Theme 0.10.0. Behalte die gesteuerte Auswahl von OTaginput aus dem Sechs-Themen-Vokabular, die Suche ohne Beachtung der Groß- und Kleinschreibung, deaktivierte neue und doppelte Tags sowie die Höchstzahl von drei Tags bei. Verknüpfe die dynamischen Themendefinitionen und die Titelvalidierung weiterhin mit dem gespeicherten Stand und lösche die Speicherbestätigung nach Änderungen. Beziehe createOruga, das Theme CSS und die Einrichtung des lokalen MDI-Assets mit ein. Setze den Entwurf auf einen leeren Zustand zurück; erfinde weder Produktvergleichsdaten noch eine Aktualisierung eines externen Katalogs.
05
Oruga UI-Designsystem: Quellen und Umfang
Oruga 0.14.4 mit optionalem Standardtheme 0.10.0. Eigenes Vokabular und eigene Katalogillustration. Beim Speichern werden nur lokale Seitenzustände geändert; es gibt keinen Upload, keine Veröffentlichung und keine Speicherung über das Neuladen hinaus.
