Komponentensystem für Unternehmen · Neue Ressource
Prime UI-Designsystem.
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.
PrimeVue 4.5.5 mit Vue 3 und @primeuix/themes 1.2.5 Aura. Dies ist eine konkrete Vue-Implementierung, kein frameworkübergreifendes Paket. · Implementierungsreferenz
02
Prime UI-Designsystem-Designreferenz
Diese Ressource Prime UI implementiert PrimeVue 4.5.5 mit @primeuix/themes 1.2.5 Aura, statt zu behaupten, es gäbe ein austauschbares API für PrimeVue, PrimeReact und PrimeNG. Die Werte wurden anhand des installierten Presets überprüft. Die Seite legt eine Root-Größe von 16px fest; rem-Geometrie wird anhand dieser expliziten Vorgabe interpretiert.
Das Designsystem Prime UI ist ein Ökosystem, kein einzelner Import
Prime UI ist ein Ökosystem, kein einzelner Import
Das UI-Ökosystem von PrimeTek umfasst Implementierungen für verschiedene Frameworks. Diese Seite entscheidet sich für eine konkrete Variante: PrimeVue 4.5.5 mit Vue 3 und dem Aura-Preset aus @primeuix/themes 1.2.5. Die vollständige Einstiegsdatei, die Importe und das Komponentenbeispiel gehören zu diesem Vue-Setup. Ein React- oder Angular-Projekt benötigt das jeweils passende Paket und API, statt diese Vue-Tags unverändert zu übernehmen.
Die Versionsfixierung ist hier entscheidend. Das installierte Paket in Version 4.5.5 steht unter der MIT-Lizenz, und das geprüfte lokale Beispiel läuft ohne Lizenzschlüssel. Bei einem Test der neueren Laufzeitversion 5.0.2 wurde ein PrimeUI-Lizenzfehler angezeigt. Daher enthält dieses Beispiel bewusst keinen uneingeschränkten Befehl für die neueste Version und erweckt nicht den Eindruck, die Nutzungsbedingungen seien über alle Releases hinweg identisch.
Primitive, semantische und Komponenten-Tokens bilden eine Kette im Designsystem Prime UI
Primitive, semantische und Komponenten-Design-Tokens bilden eine Kette
Aura trennt rohe Farbprimitive von semantischen Rollen und Komponentenwerten. Die standardmäßige Primärfarbskala verweist auf Emerald-Primitive. Im hellen Modus verweist primary.color auf primary.500, hoverColor auf primary.600 und activeColor auf primary.700. Hervorhebungsrollen verwenden hellere Primärflächen und dunklere Vordergrundfarben für die Auswahl.
Der Tree ordnet seinen Hintergrund und Text für die Auswahl dann den Hervorhebungsrollen zu, statt eine zweite, unabhängige Grüntönung fest zu codieren. Die Spezifikation behält Referenzen in geschweiften Klammern bei, denn eine Referenz macht sichtbar, wie sich Änderungen im Theme fortpflanzen. Würde jeder Alias durch einen isolierten Hex-Wert ersetzt, ginge diese nützliche Abhängigkeit verloren.
Werte aus dem passenden Preset im Designsystem Prime UI auslesen
Werte aus dem passenden Preset auslesen
Im fixierten Aura-Preset betragen das Root-Padding und der Einzug des Tree jeweils ein rem, das Knoten-Padding 0.25rem 0.5rem und die Größe des Umschalt-Buttons 1.75rem. Das Beispiel legt html auf sechzehn Pixel fest, sodass diese Maße eindeutig sind. Andere Preset-Versionen oder Root-Größen können zu einer anderen Dichte führen, selbst wenn das Komponenten-Markup ähnlich aussieht.
Die primitiven Border-Radius-Werte reichen von null über zwei, vier, sechs und acht bis zwölf Pixel. Das gemeinsame Feld-Padding beträgt horizontal 0.75rem und vertikal 0.5rem. Die Überschrift mit 34 Pixeln, die Systemschrift und der Spaltenabstand von 24 Pixeln sind ursprüngliche Layoutentscheidungen außerhalb des nativen Komponenten-Themes.
Knotenschlüssel sorgen für stabile Erweiterung und Auswahl im Designsystem Prime UI
Knotenschlüssel sorgen für stabile Erweiterung und Auswahl
Der Tree bildet einen Vorgang, drei Ordner und sechs Dokumentblätter ab. Jeder Knoten hat einen stabilen Schlüssel und eine Beschriftung. Für Ordnerknoten gilt selectable:false. So strukturieren sie die Hierarchie, ohne vorzugeben, lesbare Dokumente zu sein. Das Modell expandedKeys steuert, welche Ordner geöffnet sind; die Befehle „Erweitern“ und „Einklappen“ ersetzen diese Zuordnung gezielt.
Für die Einzelauswahl kommen selectionKeys und ein node-select-Handler zum Einsatz. Nur wenn ein Schlüssel in der Dokumentzuordnung gefunden wird, wird der Detailbereich aktualisiert. Eine sichtbare Beschriftung lässt sich ändern, ohne die Identität des Knotens anzupassen. Auch beim Einklappen eines Ordners bleiben das aktuell ausgewählte Dokument und sein angehefteter Status erhalten.
Die native Filterung erhält den Kontext eines Treffers im Designsystem Prime UI
Die native Filterung bewahrt den Kontext eines Treffers
Der Tree aktiviert seinen integrierten Filter mit filterMode lenient und dem sichtbaren Platzhalter „Dokument suchen“. Die Suche nach maps grenzt die angezeigte Hierarchie auf das passende Dokument und dessen übergeordnete Ordner ein. So bleibt nachvollziehbar, wo das Ergebnis hingehört, statt eine zusammenhanglose Liste mit Vorschlägen zu erhalten.
Wird der Filter geleert, erscheint die Hierarchie wieder. Die Filterung verändert weder die Quelldaten der Knoten noch entfernt sie angeheftete Dokumente. Der Detailbereich zeigt weiterhin das zuletzt ausdrücklich ausgewählte Blatt an, sodass sich der Inhalt nicht bei jedem Tastendruck unerwartet ändert. Bei einer größeren Sammlung könnte ein verzögertes Laden von Daten erforderlich sein. Dieses vollständige Beispiel verwendet jedoch sechs lokale Einträge und beansprucht keine serverseitige Suche.
Suche nach „maps“ und prüfe, ob der zugehörige Vorgangs- und Ordnerkontext erhalten bleibt.
Wähle „Drei regionale Karten“ aus, um den Dokumentbereich zu aktualisieren.
Leere den Filter und prüfe, ob das ausgewählte Dokument in der Hierarchie weiterhin verfügbar ist.
Ein ausgewähltes Dokument benötigt im Designsystem Prime UI eigene, nützliche Inhalte
Ein ausgewähltes Dokument braucht eigenständige, nützliche Inhalte
Jedes Dokument hat einen Typ, eine verantwortliche Person, einen Status, eine Einleitung, eine Prüfliste und einen spezifischen Hinweis. Bei einem Essay geht es um die Prüfung von Reihenfolge und Bildunterschrift, bei einer Kartenreferenz um eine einheitliche Ausrichtung und einen unabhängigen Maßstab und bei einer Proof-Checkliste um Lesbarkeit und Beschnitt. Die Inhalte ändern sich mit der Auswahl, statt unter sechs Titeln denselben Absatz wiederzuverwenden.
Die Status-Tags dienen lediglich als beschreibende Beispieldaten. Sie lösen keinen externen Veröffentlichungsablauf aus. Die Konturgrafik ist eine eigens erstellte dekorative Grafik und wird, wo relevant, als solche gekennzeichnet. Sie ist keine geografische Karte und sollte nicht als solche verstanden werden.
Der angeheftete Status ist unabhängig vom Tree-Modell im Designsystem Prime UI
Der angeheftete Status ist unabhängig vom Baummodell
Mit „Dieses Dokument anheften“ wird der Schlüssel des aktuellen Dokuments zu einem lokalen Array hinzugefügt. Sobald er darin enthalten ist, ändert sich die Schaltfläche zu „Angeheftet“ und wird deaktiviert, damit kein doppelter Eintrag entsteht. Beim Entfernen einer angehefteten Zeile wird nur dieser Schlüssel entfernt; die Auswahl im Tree bleibt unverändert. Die Anzahl der angehefteten Dokumente wird aus dem Array abgeleitet.
Diese Trennung ist wichtig, weil Auswahl, Aufklappen und gespeicherte Verweise unterschiedliche Aufgaben erfüllen. Nutzer können alle Ordner einklappen und dabei einen ausgewählten Aufsatz geöffnet lassen oder zu einem anderen Teil der Ausgabe filtern, ohne einen angehefteten Verweis zu verlieren. Keine dieser Aktionen bedeutet, dass ein entferntes Dokument bearbeitet wurde.
Prime UI Designsystem Das native Tastaturmodell des Tree beibehalten
Das native Tastaturmodell des Tree beibehalten
Der native Tree bildet die Hierarchie über die Rollen tree und treeitem, Attribute für Auswahl und Aufklappen sowie die Beziehungen zwischen verschachtelten Ebenen ab. Das Tastaturmodell verwendet Pfeiltasten, um zwischen sichtbaren Knoten zu navigieren und Zweige auf- oder einzuklappen; mit Eingabe oder Leertaste wird der fokussierte Knoten ausgewählt. Die Seite versieht die Sammlung mit einem aussagekräftigen aria-label.
Der Detailbereich und die Liste angehefteter Elemente verwenden gewöhnliche Überschriften, Listen und beschriftete Schaltflächen. Auf Mobilgeräten steht der Navigator in der Lesereihenfolge vor dem Dokument. Am ursprünglichen Breakpoint von 760px wechselt das Layout zur gestapelten Anordnung, ohne den Tree abzuschneiden oder Dokumentanweisungen auszublenden. Eine Statuszeile zeigt die aktuelle Auswahl an.
Verwende stabile Schlüssel, wenn sich die Reihenfolge der sichtbaren Tree-Knoten ändert.
Ordner bleiben nicht auswählbar, wenn ihnen keine Detailinhalte zugeordnet sind.
Beschrifte Entfernen-Schaltflächen mit dem jeweiligen Dokumentnamen, statt überall dieselbe mehrdeutige Bezeichnung zu verwenden.
Prime UI Designsystem Das Theme einmalig am Vue-Root registrieren
Das Theme einmalig am Vue-Stamm registrieren
Die Einstiegsdatei importiert PrimeVue aus primevue/config, Aura aus @primeuix/themes/aura und die vollständige App.vue. Sie registriert das Plugin mit theme.preset auf Aura. In diesem statischen Beispiel für den hellen Modus ist darkModeSelector auf false gesetzt. Ein Theme-Umschalter für die Produktionsumgebung sollte über die unterstützten Optionen der passenden Release-Version eingerichtet werden, statt Dokumentation aus einer neueren Hauptversion zu vermischen.
Die gestylten Komponenten von PrimeVue erzeugen die erforderlichen Komponentenstile anhand des Presets. Die bereitgestellte style.css definiert ausschließlich das ursprüngliche Seitenlayout und die Illustration. Ein Import von primevue/resources/theme.css aus älteren Versionen wird nicht verwendet. Im verifizierten Setup wurde ein Tree-Blattelement ausgewählt, angeheftet, die Hierarchie gefiltert und die Seite bei 390px ohne Hinweis auf eine ungültige Lizenz dargestellt.
Stabile Knotenschlüssel, gesteuerte Maps für aufgeklappte und ausgewählte Knoten, Filter- und node-select-Verarbeitung.
vue
<script setup>
import {ref,computed} from 'vue';import Tree from 'primevue/tree';import Button from 'primevue/button';import Tag from 'primevue/tag';
const nodes=[{key:'issue',label:'Issue 04 · Fieldwork',selectable:false,children:[{key:'essays',label:'Essays',selectable:false,children:[{key:'ridge',label:'The ridge path'},{key:'river',label:'A river after rain'}]},{key:'visuals',label:'Visual material',selectable:false,children:[{key:'maps',label:'Three regional maps'},{key:'captions',label:'Caption reference sheet'}]},{key:'production',label:'Production',selectable:false,children:[{key:'proof',label:'Print proof checklist'},{key:'credits',label:'Credits and permissions'}]}]}];
const documents={ridge:{type:'Essay',owner:'Alex Morgan',status:'Editing',title:'The ridge path',intro:'A field essay about following the contour rather than the shortest route.',items:['Opening: the first view above the tree line','Middle: how a contour changes the pace of walking','Close: the landmarks remembered on the return'],note:'Review the transition between the weather observation and the first-person account.'},river:{type:'Essay',owner:'Jules Chen',status:'Review',title:'A river after rain',intro:'An observational essay that follows sediment, sound and changing water levels.',items:['Keep the time sequence explicit','Pair each field image with an observation','Check the final geographic names'],note:'Compare the image captions with the text before locking the layout.'},maps:{type:'Visual reference',owner:'Sam Rivera',status:'Review',title:'Three regional maps',intro:'A consistent reference treatment for ridge, river and open plain.',items:['Same north orientation','Shared legend and label size','Scale shown independently on each map'],note:'The miniature map below is original decorative geometry, not a geographic claim.'},captions:{type:'Reference',owner:'Maya Patel',status:'Editing',title:'Caption reference sheet',intro:'One place to keep subject, location, credit and contextual description.',items:['Subject and date','Location at an appropriate level of precision','Author or source credit'],note:'Do not use the visible caption as a substitute for a useful image alt description.'},proof:{type:'Checklist',owner:'Alex Morgan',status:'Ready',title:'Print proof checklist',intro:'Review the physical proof at actual scale before choosing the final stock.',items:['Body text and small labels remain legible','Images preserve the intended tonal range','Trim and page sequence match the layout'],note:'This is a sample editorial workflow, not a print vendor specification.'},credits:{type:'Reference',owner:'Maya Patel',status:'Review',title:'Credits and permissions',intro:'Keep attribution close to each asset record so it survives layout changes.',items:['Creator name and source','Allowed uses recorded separately','Credit wording copied accurately'],note:'This sample does not provide legal permission for any external image.'}};
const expanded=ref({issue:true,essays:true,visuals:true,production:true}),selection=ref({'ridge':true}),current=ref('ridge'),saved=ref([]);const doc=computed(()=>documents[current.value]);function select(node){if(documents[node.key])current.value=node.key;}function pin(){if(!saved.value.includes(current.value))saved.value.push(current.value);}function expandAll(){expanded.value={issue:true,essays:true,visuals:true,production:true};}
</script>
<template><main class="editorial-library"><header><div><p class="eyebrow">PRIME UI · PRIMEVUE IMPLEMENTATION</p><h1>Find the thread of an issue.</h1><p class="intro">A native tree navigator for an editorial collection, using the Aura theme.</p></div><Tag value="Local specimen" severity="secondary" /></header><div class="library-layout"><aside class="library-nav"><div class="nav-heading"><h2>Issue contents</h2><div><Button label="Expand" text size="small" @click="expandAll"/><Button label="Collapse" text size="small" @click="expanded={}"/></div></div><Tree :value="nodes" v-model:expandedKeys="expanded" v-model:selectionKeys="selection" selectionMode="single" :filter="true" filterMode="lenient" filterPlaceholder="Find a document" aria-label="Editorial document tree" @node-select="select" /><section class="pinned"><h2>Pinned documents <span>{{saved.length}}</span></h2><ul v-if="saved.length"><li v-for="key in saved" :key="key"><span>{{documents[key].title}}</span><Button label="Remove" text size="small" :aria-label="`Remove ${documents[key].title}`" @click="saved=saved.filter(x=>x!==key)"/></li></ul><p v-else>No documents pinned yet.</p></section></aside><article class="document"><div class="document-top"><span>{{doc.type}}</span><Tag :value="doc.status" :severity="doc.status==='Ready'?'success':doc.status==='Review'?'info':'warn'"/></div><h2>{{doc.title}}</h2><p class="owner">{{doc.owner}} · ISSUE 04</p><div class="map-art" aria-hidden="true"><i></i><i></i><i></i><span>FIELD NOTES / 04</span></div><p class="intro">{{doc.intro}}</p><h3>What to inspect</h3><ol><li v-for="item in doc.items" :key="item">{{item}}</li></ol><aside class="document-note">{{doc.note}}</aside><Button :label="saved.includes(current)?'Pinned':'Pin this document'" :disabled="saved.includes(current)" @click="pin"/><p class="local-note">Sample records only. Pinning changes this page’s local state.</p></article></div><p class="selection-status" role="status">Selected document: {{doc.title}}</p></main></template>
Die Konturillustration ist eine eigens erstellte dekorative Grafik, keine echte Karte.
Die Root-Größe ist explizit auf 16px festgelegt, damit rem-Abmessungen reproduzierbar sind.
04
Prime UI Designsystem Einrichtung für AI-Agenten
Ausgangspunkt für die Implementierung
Verifiziert mit PrimeVue 4.5.5 und @primeuix/themes 1.2.5. Das installierte PrimeVue-4-Paket steht unter der MIT-Lizenz. Gehe nicht davon aus, dass für eine andere Hauptversion dasselbe Setup oder dieselben Lizenzanforderungen gelten.
javascript
// Create the project first:
// npm create vite@latest prime-ui-specimen -- --template vue
// cd prime-ui-specimen && npm install
// In a Vite Vue 3 project:
// npm install [email protected] @primeuix/[email protected]
// Save the complete SFC as App.vue and layout as style.css.
import {createApp} from 'vue';
import PrimeVue from 'primevue/config';
import Aura from '@primeuix/themes/aura';
import App from './App.vue';
import './style.css';
createApp(App).use(PrimeVue, {
theme: {preset: Aura, options: {darkModeSelector: false}}
}).mount('#app');
// index.html contains <div id="app"></div>.
// This example is pinned to 4.5.5, not the newer 5.x runtime.
// Keep the template index.html and replace its entry with the code above.
// npm run dev
Ein Prompt für dein Projekt
Agenten-Prompt
Erstelle die Anwendung auf Grundlage der bereitgestellten redaktionellen Dokumentbibliothek mit PrimeVue 4.5.5 und dem dazu passenden Aura-Preset aus @primeuix/themes 1.2.5. Erhalte das native Aufklappen, Filtern und Auswählen im Tree mit stabilen Knotenschlüsseln. Halte die Details des ausgewählten Dokuments von der Liste angehefteter Dokumente getrennt. Heftе echte Dokumente an und entferne sie aus der Liste, ohne Kategorien in Dokumente umzuwandeln oder angeheftete Dokumente zu duplizieren. Übernimm das vollständige Provider-Setup und das ursprüngliche responsive CSS. Dies ist das verifizierte Beispiel für Version 4. Ersetze es nicht stillschweigend durch eine neuere Hauptversion der Laufzeitumgebung und mache daraus keinen Beschaffungsworkflow.
05
Prime UI Designsystem: Quellen und Geltungsbereich
Prime UI-Ökosystem, konkret umgesetzt mit PrimeVue 4.5.5 und Aura 1.2.5. Diese Seite beansprucht weder identische APIs noch dieselben Lizenzanforderungen für verschiedene Framework-Pakete oder neuere Hauptversionen. Alle Datensätze und angehefteten Elemente sind lokal.
