Komponentensystem für Unternehmen · Neue Ressource
Element Plus-Designsystem.
Nutze das echte Transfer-Modell von Element Plus, Filter und deaktivierte Optionen, um eine Workbench zur Modulauswahl zu erstellen. Dabei sollen geprüfte Farben, Schriftgrößen und Abmessungen der Bedienelemente zum Einsatz kommen.
Natives Element Plus 2.14.7 mit Vue 3 und einem englischen ConfigProvider. · Implementierungsreferenz
02
Designreferenz für das Element Plus-Designsystem
Kompiliertes Standard-CSS für Element Plus 2.14.7. Die Variablen sind verifizierte Paketwerte, einschließlich semantischer Aliase. Das Transfer-Layout verwendet originale Regeln für die responsive Komposition, getrennt vom Designsystem-Fundament.
Element Plus-Designsystem: Eine Transferliste kennt zwei Arten der Auswahl
Eine Transferliste kennt zwei Arten der Auswahl
Element Plus Transfer zeigt verfügbare und Zieldateien mit Steuerelementen zum Verschieben markierter Elemente. Die Modul-Arbeitsfläche verwendet die tatsächliche Vue-Komponente aus Version 2.14.7. Ihr v-model enthält die Zielschlüssel, anfangs catalog und tokens. Ein Kontrollkästchen in einer Liste markiert ein Element für die nächste Transferaktion; dadurch gehört das Element noch nicht automatisch zum Ziel.
Die Live-Anzeige des Modells macht diesen Unterschied sichtbar. Wird ein Element in der Quellliste markiert, ist es für Add vorgemerkt. Durch Betätigen von Add ändert sich das Array der Zielschlüssel, die Zusammenfassung der ausgewählten Module wird aktualisiert und ein zuvor angewendetes Ergebnis wird zurückgesetzt. So wird der Modellvertrag der Bibliothek sichtbar, statt dass man ihn aus zwei statischen Listen erraten muss.
Element Plus-Designsystem: Standardrollen und konkrete Komponentendimensionen
Standardrollen und konkrete Komponentendimensionen
Element Plus stellt --el-color-primary und die davon abgeleiteten helleren und dunkleren Varianten sowie Statusrollen, Textfarben und Oberflächenvariablen bereit. Die Tabelle zeigt die tatsächlich kompilierten Werte des installierten Pakets. Der umgebende Schlüsselbereich verwendet primary-light-9 und gewöhnlichen Text, während die Aktionsschaltfläche die native Primärgestaltung nutzt.
Die Standardtypografie umfasst eine Basisgröße von vierzehn Pixeln sowie ergänzende Größen von zwölf, dreizehn, sechzehn, achtzehn und zwanzig Pixeln. Variablen für Komponentengrößen beschreiben die Maße kleiner, normaler und großer Steuerelemente. Sie sind nicht mit einer Abstandsgröße für das Seitenlayout zu verwechseln. Die Abstände von vierundzwanzig Pixeln und der Außenabstand von zweiunddreißig Pixeln in der Arbeitsfläche sind ausdrücklich gewählte Elemente der ursprünglichen Komposition.
Element Plus-Designsystem: Stabile Schlüssel, Bezeichnungen und deaktivierte Optionen
Stabile Schlüssel, Bezeichnungen und deaktivierte Optionen
Jede Option besitzt einen Schlüssel, eine Bezeichnung und ein Deaktivierungs-Flag. Das Auswahl-Array besteht aus diesen Schlüsseln, sodass sich Bezeichnungen ändern lassen, ohne die Identität zu verändern. Die Beispielmodule sind Asset-Katalog, Token-Inspektor, Prüfwarteschlange, Versionsverlauf und projektübergreifende Suche. Der Audit-Export bleibt deaktiviert, um eine sichtbare, aber nicht verfügbare Option zu veranschaulichen.
Die Verfügbarkeit in diesem Beispiel ist statische Demonstrationsdaten. Sie ist weder eine Prüfung von Berechtigungen noch eine Zusage, dass diese Module als installierbare Produkte existieren. In einer tatsächlichen Anwendung müssen die Optionsquelle und die Berechtigungsregeln aus dem Produktmodell stammen. Leiten Sie keine Berechtigung daraus ab, dass sich ein Kontrollkästchen in einer Transferliste anklicken lässt.
Element Plus-Designsystem: Die Suche ändert die Sichtbarkeit, nicht die Zugehörigkeit
Die Suche ändert die Sichtbarkeit, nicht die Zugehörigkeit
filterable fügt den Bedienfeldern unabhängige Suchfelder hinzu. Der Platzhalter der Filterfunktion gibt eine konkrete Aktion vor: „Modul suchen“. Standardmäßig wird nach der Bezeichnung der Option gefiltert. Ein ausgewähltes Element kann bei einer Suche aus der sichtbaren Zielliste verschwinden, ohne aus dem Array der ausgewählten Schlüssel entfernt zu werden. Die Zusammenfassung und die Anzeige zeigen weiterhin die vollständige Zielauswahl.
Benutzerdefinierte Slots für leere linke und rechte Listen unterscheiden ein Bedienfeld ohne passende Optionen vom globalen Fall, in dem nichts ausgewählt ist. Außerdem deaktiviert die Seite lokal die Schaltfläche „Apply“, wenn das Ziel-Array leer ist. Das sind unterschiedliche Zustände: Keine Suchtreffer bedeuten nicht, dass keine Module ausgewählt sind.
Suchen Sie im Bereich der verfügbaren Module nach „Prüfwarteschlange“.
Markieren Sie die passende Option und drücken Sie auf „Add“.
Löschen Sie die Suche und vergewissern Sie sich, dass „review“ in der Modellanzeige und der Zielliste erscheint.
Element Plus-Designsystem: Die Beziehung zwischen den beiden Listen auf Mobilgeräten erhalten
Die Beziehung zwischen den beiden Listen auf Mobilgeräten erhalten
Auf dem Desktop sind die nativen Transfer-Bedienfelder nebeneinander angeordnet; für „Add“ und „Remove“ gibt es einen eigenen Bereich. Bei einer Bildschirmbreite von höchstens siebenhundert Pixeln werden die Bedienfelder untereinander angeordnet und die Aktionsschaltflächen bilden eine horizontale Reihe dazwischen. Die Titel „Verfügbare Module“ und „Workspace-Module“ kennzeichnen weiterhin die Listen, sodass die Verschieberichtung klar bleibt.
Die Arbeitsfläche verkleinert nicht das gesamte Steuerelement, damit es auf ein Smartphone passt. Stattdessen wird die Komposition angepasst, während Bezeichnungen, Kontrollkästchen, Suchfelder und Listeninhalte in ihrer nativen, gut lesbaren Größe bleiben. Die Anzeige der ausgewählten Schlüssel und die Textzusammenfassung rücken darunter in eine einzelne Spalte. So bleiben dieselben Informationen erhalten, statt bei einem kleineren Breakpoint ausgeblendet zu werden.
Element Plus-Designsystem: Entwurf der Zugehörigkeit und angewendeter Snapshot
Entwurf der Zugehörigkeit und angewendeter Snapshot
„Lokal übernehmen“ kopiert das ausgewählte Schlüssel-Array. Eine anschließende Änderung der Übertragungsauswahl löscht diesen übernommenen Status, sodass die Erfolgsmeldung nicht bestehen bleibt, wenn die Person den Entwurf ändert. „Ausgangsauswahl wiederherstellen“ weist ein neues Array mit Katalog/Tokens zu und löscht ebenfalls das Übernahmeergebnis. Die Zustandsübergänge sind in der Vue-Quelle mit wenigen expliziten Zeilen umgesetzt.
Die Meldung besagt lediglich, dass die lokale Vorschauauswahl übernommen wurde. Sie behauptet weder eine Installation noch Änderungen an Berechtigungen oder eine externe Aktualisierung. In einer echten Einstellungsansicht müsste der übernommene Zustand einem bestätigten Speichervorgang entsprechen; ein Komponentenereignis allein ist keine Serverbestätigung.
Element Plus Designsystem: native Steuerelemente und verständliche Anweisungen
Native Steuerelemente und verständliche Anweisungen
Das Beispiel verwendet die nativen Transfer-Kontrollkästchen und Schaltflächen. Die Schaltflächen sind mit „Entfernen“ und „Hinzufügen“ beschriftet, statt nur Richtungssymbole zu zeigen. Das ist besonders hilfreich, wenn die Listen untereinander angeordnet sind. Die Feldtitel erläutern die Rollen von Quelle und Ziel, und der Hilfetext erklärt die Abfolge: auswählen, dann verschieben.
Die deaktivierte Option bleibt im Kontext sichtbar, und die leeren Bereiche in den Feldern machen deutlich, dass keine passenden Optionen vorhanden sind. Nutzerinnen und Nutzer der Tastatur sollten Suchfelder, Kontrollkästchen und Schaltflächen ohne benutzerdefinierte, ausschließlich auf Zeigerbedienung ausgelegte Handler erreichen können. Die Komponente verwaltet ihr eigenes Verhalten; die Anwendung ersetzt diese Struktur nicht durch gestaltete Zeilen, die Auswahlsteuerelemente lediglich nachahmen.
Die Feldtitel legen fest, welche Liste das Ziel ist.
Textbeschriftungen machen die Übertragungsrichtung auch bei untereinander angeordneten Feldern deutlich.
Die Live-Anzeige des Modells macht verborgene ausgewählte Einträge auffindbar.
Element Plus Designsystem: Vue-Komponente kompilieren und CSS laden
Vue-Komponente kompilieren und CSS laden
Installieren Sie in einem Vue-3-Vite-Projekt [email protected] und importieren Sie element-plus/dist/index.css vor dem ursprünglichen Layout CSS. Die vollständige App.vue verwendet script setup und importiert ihre Komponenten direkt. ElConfigProvider erhält das englische Gebietsschema, damit die integrierten Texte der Felder und Leerezustände mit der englischen Referenzseite übereinstimmen.
Die bereitgestellte produktionsnahe Einrichtung importiert App.vue über das Vue-Vite-Plugin. Das Offline-Beispiel wurde erstellt, indem dieselbe Single-File-Komponente kompiliert und lokal gebündelt wurde. Es benötigt weder ein externes CDN noch einen Auto-Import-Dienst oder einen Template-Compiler zur Laufzeit. Wenn ein bestehendes Projekt ein Auto-Import-Plugin verwendet, stimmen Sie dessen generierte Styles auf die gewählte Strategie für vollständige oder komponentenweise Importe ab.
Element Plus Designsystem: Theme-Überschreibungen müssen die Beziehungen zwischen Komponenten erhalten
Theme-Überschreibungen müssen die Beziehungen zwischen Komponenten erhalten
CSS Benutzerdefinierte Eigenschaften eignen sich, um gemeinsame Rollen zu ändern, ohne jeden Komponenten-Selektor neu zu schreiben. Die Arbeitsfläche verwendet die tatsächlichen --el-Variablen für Hintergrund, Text, Rahmen und Ecken. Sie ändert nur die Layout-Selektoren, die erforderlich sind, um die native Transfer-Komponente in diese konkrete Anordnung einzupassen.
Verwenden Sie für ein umfassenderes Marken-Theme den dokumentierten Ansatz mit Sass oder CSS-Variablen und prüfen Sie Hover-, Deaktiviert- und Fokuszustände gemeinsam. Nur den primären Hex-Wert in einem einzelnen Screenshot zu ersetzen, lässt die helleren Oberflächen und dunkleren Interaktionszustände außer Acht. Die quellengestützte Tabelle liefert die Ausgangswerte; in der vollständigen nativen Vorschau lassen sich die Auswirkungen in einer funktionierenden Komponente prüfen.
Eine Single-File-Komponente mit nativen Transfer-, Card-, Alert-, Button- und Tag-Komponenten.
vue
<script setup>
import {ref,computed} from 'vue';
import {ElConfigProvider,ElTransfer,ElCard,ElButton,ElTag,ElAlert} from 'element-plus';
import en from 'element-plus/es/locale/lang/en';
const modules=[{key:'catalog',label:'Asset catalog',disabled:false},{key:'tokens',label:'Token inspector',disabled:false},{key:'review',label:'Review queue',disabled:false},{key:'history',label:'Version history',disabled:false},{key:'audit',label:'Audit export · unavailable',disabled:true},{key:'search',label:'Cross-project search',disabled:false}];
const selected=ref(['catalog','tokens']),applied=ref(null);const names=computed(()=>modules.filter(x=>selected.value.includes(x.key)).map(x=>x.label));
const changed=()=>{applied.value=null};
</script>
<template><ElConfigProvider :locale="en"><main class="module-desk"><header><p class="eyebrow">ELEMENT PLUS / WORKSPACE COMPOSITION</p><h1>Choose the tools this team needs.</h1><p>Move modules between lists, then inspect the exact selected keys.</p></header><ElCard shadow="never"><template #header><div class="card-heading"><h2>Module selection</h2><ElTag type="info">{{selected.length}} selected</ElTag></div></template><ElTransfer v-model="selected" :data="modules" filterable filter-placeholder="Find a module" :titles="['Available modules','Workspace modules']" :button-texts="['Remove','Add']" @change="changed"><template #left-empty><p class="empty">No available module matches.</p></template><template #right-empty><p class="empty">No selected module matches.</p></template></ElTransfer><p class="help">Check a module before using Add or Remove. Audit export stays disabled in this sample.</p></ElCard><div class="summary-grid"><section class="summary"><h2>Workspace modules</h2><ul v-if="names.length"><li v-for="name in names" :key="name">{{name}}</li></ul><p v-else>No modules selected. Add at least one before applying.</p><div class="actions"><ElButton type="primary" :disabled="!selected.length" @click="applied=[...selected]">Apply locally</ElButton><ElButton @click="selected=['catalog','tokens'];changed()">Restore starting set</ElButton></div><ElAlert v-if="applied" title="Selection applied to the local preview" type="success" :closable="false" show-icon description="No installation, entitlement change or external update was performed." /></section><section class="key-panel"><p class="eyebrow">V-MODEL VALUE</p><pre>{{JSON.stringify(selected,null,2)}}</pre><p>The model contains keys, not option objects. Search filters visibility without changing this array.</p></section></div><footer>Native Element Plus Transfer, Card, Tag, Button and Alert. Local module names and availability are original examples.</footer></main></ElConfigProvider></template>
Der Breakpoint und das umgebende Layout sind eigene Festlegungen.
04
Element Plus Designsystem: Einrichtung für AI-Agenten
Ausgangspunkt für die Implementierung
Geprüft mit Vue 3 und Element Plus 2.14.7. App.vue stellt den englischen ConfigProvider und explizite Komponentenimporte bereit. Der gesamte Zustand ist lokal.
javascript
// Create the project first:
// npm create vite@latest element-plus-specimen -- --template vue
// cd element-plus-specimen && npm install
// In a Vite Vue 3 project:
// npm install [email protected]
// Save the complete single-file component above as App.vue.
// main.js
import {createApp} from 'vue';
import 'element-plus/dist/index.css';
import './style.css';
import App from './App.vue';
createApp(App).mount('#app');
// index.html: <div id="app"></div>
// style.css: use the complete responsive composition above.
// Vite's standard Vue template includes @vitejs/plugin-vue for .vue files.
// Keep the template index.html and replace its entry with the code above.
// npm run dev
Ein Prompt für dein Projekt
Agenten-Prompt
Erweitern Sie die bereitgestellte Arbeitsbereichs-Modulauswahl mit Element Plus 2.14.7 mithilfe der nativen ElTransfer-Komponente. Behalten Sie die sechs Schlüsselmodule, den deaktivierten Audit-Eintrag, das Filterverhalten und das gesteuerte Array ausgewählter Schlüssel bei. Beim Übernehmen muss die aktuelle Modulauswahl erfasst werden; spätere Änderungen sollen diesen Schnappschuss sichtbar als veraltet kennzeichnen, während „Wiederherstellen“ die ursprüngliche Auswahl zurücksetzt. Bewahren Sie die responsive Anordnung mit zwei Feldern und die Semantik deaktivierter Einträge, statt Transfer durch voneinander unabhängige Listen zu ersetzen. Laden Sie das native Stylesheet vor der ursprünglichen Anordnung CSS.
05
Element Plus Designsystem: Quellen und Geltungsbereich
Element Plus native Referenz 2.14.7. Modulnamen und Berechtigungen sind eigene Beispiele; die lokale Auswahl löst weder eine Installation noch Änderungen an Berechtigungen aus.
