# Oruga UI Designsystem

## Vorschau der Oruga UI-Designsystemoberfläche

Durchsuchen Sie ein kontrolliertes Vokabular, fügen Sie bis zu drei Themen hinzu, entfernen Sie ein Tag und speichern Sie eine lokale Notizbeschreibung.

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

### Semantische Farben des optionalen Oruga-Themes

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| --oruga-primary | #445e00 | Ausgewählte Tags und primäre Aktion. |
| --oruga-primary-invert | #fff | Text auf primären Tags. |
| --oruga-success | #006724 | Erfolgsvariante. |
| --oruga-info | #005c98 | Informationsvariante. |
| --oruga-warning | #f4c300 | Warnvariante. |
| --oruga-danger | #b60000 | Fehlervariante für Felder. |
| --oruga-control-border-color | #dbdbdb | Standardbegrenzung für Felder. |
### Typografie, Abstände und Geometrie des optionalen Themes

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| --oruga-font-size | 1rem | Standardtextgröße. |
| --oruga-line-height | 1.5 | Standard-Zeilenhöhenverhältnis. |
| --oruga-border-radius | 4px | Standard-Eckenradius für Steuerelemente. |
| --oruga-control-spacer | .5em | Gemeinsamer Abstand für Steuerelemente. |
| --oruga-control-height | 2.25em | Höhe des Steuerelements relativ zur Schriftgröße. |
| --oruga-control-padding-vertical | calc(.375em - 1px) | Vertikaler Innenabstand unter Berücksichtigung des Rahmens. |
| --oruga-control-padding-horizontal | calc(.8em - 1px) | Horizontaler Innenabstand unter Berücksichtigung des Rahmens. |
| --oruga-control-disabled-opacity | .5 | Visueller Zustand bei Deaktivierung. |
| --oruga-animation-speed-fast | .15s | Kurze Übergangsdauer. |
| --oruga-animation-speed | .3s | Standard-Übergangsdauer. |
### Explizite Skalierungen der ursprünglichen Anwendung

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| Font stack | system-ui, sans-serif | Text der äußeren Anwendung; das optionale Theme verwendet ebenfalls einen plattformübergreifenden Schriftstapel. |
| Page title | 34px / 1.15; 29px narrow | Ursprüngliche Hierarchie. |
| Catalog card title | Georgia, serif; 29px / 1.25 | Ursprünglicher redaktioneller Kontrast, kein Oruga-Standard. |
| Supporting type | 10 / 11 / 12 / 13 / 14 / 15px | Explizite ursprüngliche Bildunterschriften, Definitionen und Fließtexte. |
| Spacing | 4 / 5 / 7 / 12 / 13 / 14 / 16 / 20 / 22 / 24 / 28 / 32px | Tatsächliche Layoutwerte; die Headless-Bibliothek stellt keine Raster-Skalierung bereit. |
| Layout | Flexible editor + 330px catalog card; stack at 760px | Ursprüngliches Raster. |
| Topic constraints | 1–3 unique existing labels | allow-new=false, allow-duplicates=false, maxitems=3. |
| Title constraint | 5–80 characters; minimum evaluated after trim | Anwendungsvalidierung plus native Längenbegrenzung. |
## Oruga UI Designsystem – vollständiger Leitfaden

Ein praktischer Leitfaden zur Auswahl, Anwendung und Überprüfung dieses Systems für ein echtes Interface.

Umfassende Anleitung, Einstieg in die Implementierung und Links zu den Quellen.

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

Unterstützende Spezifikation lesen

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

Unterstützende Spezifikation lesen

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

Unterstützende Spezifikation lesen

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

1. Nach Color suchen und die passende Option auswählen.

2. Forms hinzufügen, sodass zusammen mit Navigation drei Themen ausgewählt sind.

3. Ein Tag entfernen, die Änderung auf der Karte bestätigen und vor dem Speichern einen Ersatz auswählen.

Unterstützende Spezifikation lesen

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

Unterstützende Spezifikation lesen

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

Unterstützende Spezifikation lesen

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

Unterstützende Spezifikation lesen

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

Unterstützende Spezifikation lesen

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

Unterstützende Spezifikation lesen

## Oruga UI-Designsystem: Komponentenbeispiele

### Vollständige SFC für den Themenkatalog

OTaginput, OField, OInput, OTag und OButton verbinden ein eingeschränktes Vokabular mit einer dynamischen Katalogkarte.

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

Code-Referenz

- Das Modell mit dem ausgewählten Array unterscheidet sich vom inneren Suchtext.

- Die Auswahl ist auf vorhandene, nicht doppelte Bezeichnungen beschränkt.

- Ein tiefgreifender Watcher löscht die Speicherbestätigung, wenn ein Thema entfernt wird.

### Vollständiges ursprüngliches Kataloglayout

Responsives Raster für Editor und Karte, kontrollierter Zeilenumbruch und eine eigens gestaltete CSS-Ordnerillustration.

```
html,body,#app{height:auto;min-height:0;margin:0}*{box-sizing:border-box}body{font-family:system-ui,sans-serif;background:#f4f4ed;color:#34392b}.catalog-shell{max-width:1100px;margin:auto;padding:32px}.eyebrow{font-size:10px;letter-spacing:.14em;font-weight:700;color:#6e775f}h1{font-size:34px;line-height:1.15;max-width:700px;margin:12px 0}header>p:last-child{font-size:15px;line-height:1.6;color:#727965;max-width:630px}.catalog-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:24px;margin-top:28px}.editor,.note-card{background:white;border:1px solid #dfe3d4;border-radius:14px;padding:24px;min-width:0}.editor>h2{font-size:20px;margin:0 0 24px}.editor .o-field{margin-bottom:22px}.editor .o-field__message{font-size:12px;line-height:1.6}.actions{display:flex;gap:12px;flex-wrap:wrap}.result{font-size:12px;line-height:1.6;color:#596d2e;margin:16px 0 28px}.editor h3{font-size:14px}.vocabulary{margin:0}.vocabulary>div{padding:12px 0;border-bottom:1px solid #eaede3}.vocabulary dt{font-size:13px;font-weight:650}.vocabulary dd{font-size:12px;line-height:1.6;margin:4px 0 0;color:#707763}.note-card{align-self:start;background:#fcfcf5}.note-card h2{font-family:Georgia,serif;font-size:29px;line-height:1.25;font-weight:400;overflow-wrap:anywhere}.folder-art{height:145px;background:#e3e8cf;border-radius:8px;position:relative;overflow:hidden;margin-bottom:24px}.folder-art i{position:absolute;left:15%;top:40px;width:70%;height:100px;border-radius:7px;background:#7e8e52;transform:rotate(-8deg)}.folder-art b{position:absolute;left:21%;top:24px;width:60%;height:115px;background:#fffef5;transform:rotate(5deg);border-radius:4px}.folder-art span{position:absolute;left:16%;top:71px;width:70%;height:80px;background:#a6b57a;border-radius:7px}.topic-tags{display:flex;gap:7px;flex-wrap:wrap}.card-label{font-size:11px;color:#737b65;margin-top:24px}.note-card ul{list-style:none;padding:0}.note-card li{border-top:1px solid #e0e4d6;padding:13px 0}.note-card li strong{font-size:13px;display:block}.note-card li span{font-size:12px;color:#6c765b;line-height:1.6;display:block;margin-top:5px}.card-foot{font-size:10px;line-height:1.6;color:#7c846e;margin-top:20px}.empty-topics{font-size:12px;color:#7c846e}.o-taginput{max-width:100%}.o-taginput__container{min-width:0}.o-taginput .o-input{min-width:0}@media(max-width:760px){.catalog-layout{grid-template-columns:minmax(0,1fr)}.catalog-shell{padding:20px}h1{font-size:29px}}@media(max-width:360px){.catalog-shell{padding:14px}.editor,.note-card{padding:16px}.actions>*{width:100%}}
.o-taginput__counter{white-space:nowrap;flex-shrink:0}
```

Code-Referenz

- Oruga stellt kein verbindliches Rastersystem bereit; dieses Layout ist explizit in der Anwendung definiert CSS.

- Der Zählertext bleibt bei schmalen Ansichten einzeilig.

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

```
// npm create vite@latest oruga-catalog -- --template vue
// cd oruga-catalog && npm install
// npm install @oruga-ui/oruga-next@0.14.4 @oruga-ui/theme-oruga@0.10.0 @mdi/font@7.4.47
// 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

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

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

- Einführung Aktuelles Plugin und explizite Komponentenregistrierung.

- Theme-Auswahl Optionale Gestaltungsgrenze.

- Konfiguration Globale und lokale Klassenanpassung.

- Tag-Eingabe Vokabularbeschränkungen, Modell, Begrenzungen und Entfernen.

- Autovervollständigung Filterung, verschachteltes Combobox-Verhalten und natives Popover.

- Field Sichtbare Beschriftungen und Validierungsmeldungen.

- Icon Konfiguration des Icon-Pakets.

- Quelle des Standard-Themes Offizielle Theme-Einrichtung und Quelle der Design-Token.

## Oruga UI-Designsystem: Verwandte Ressourcen

### Pico CSS

Pico CSS-Stile: semantisches HTML mit responsiver, rem-basierter Typografieskala und Theme-Variablen. Die Standard-, klassenlose und bedingte Distribution haben unterschiedliche Integrationsbereiche; dieser Leitfaden verwendet den Standard-Build für ein Formular mit Leseeinstellungen und nativem Disclosure- und Dialogverhalten.

### Preline UI

Ein nativer Preline-Sitzungsplaner mit verknüpften Tabs, einem eingeschränkten Input-Number-Plugin, installierten Theme-Aliasen, echten Tailwind-Skalen und einer lokalen Materialkostenschätzung, die sich mit der ausgewählten Sitzung aktualisiert.

### Prime UI

Eine auf eine feste Version abgestimmte PrimeVue-Implementierung des Prime UI-Ökosystems: ein Dokumentbaum im Aura-Theme mit echten Preset-Referenzen, gesteuerter Auf- und Zuklappfunktion, Filterung, Auswahl und lokalem Anheften.


- [Implementierungsreferenz](https://oruga-ui.com/components/taginput)
- [Quelle](https://oruga-ui.com/documentation/themes)
- [Quelle](https://oruga-ui.com/components/taginput)
- [Unterstützende Spezifikation lesen](https://oruga-ui.com/documentation/)
- [Unterstützende Spezifikation lesen](https://oruga-ui.com/documentation/themes)
- [Unterstützende Spezifikation lesen](https://oruga-ui.com/components/taginput)
- [Unterstützende Spezifikation lesen](https://oruga-ui.com/components/field)
- [Unterstützende Spezifikation lesen](https://oruga-ui.com/components/icon)
- [Unterstützende Spezifikation lesen](https://oruga-ui.com/components/button)
- [Code-Referenz](https://oruga-ui.com/components/taginput)
- [Code-Referenz](https://oruga-ui.com/documentation/configuration)
- [Einführung Aktuelles Plugin und explizite Komponentenregistrierung.](https://oruga-ui.com/documentation/)
- [Theme-Auswahl Optionale Gestaltungsgrenze.](https://oruga-ui.com/documentation/themes)
- [Konfiguration Globale und lokale Klassenanpassung.](https://oruga-ui.com/documentation/configuration)
- [Tag-Eingabe Vokabularbeschränkungen, Modell, Begrenzungen und Entfernen.](https://oruga-ui.com/components/taginput)
- [Autovervollständigung Filterung, verschachteltes Combobox-Verhalten und natives Popover.](https://oruga-ui.com/components/autocomplete)
- [Field Sichtbare Beschriftungen und Validierungsmeldungen.](https://oruga-ui.com/components/field)
- [Icon Konfiguration des Icon-Pakets.](https://oruga-ui.com/components/icon)
- [Quelle des Standard-Themes Offizielle Theme-Einrichtung und Quelle der Design-Token.](https://github.com/oruga-ui/theme-oruga)