# Element Plus-Designsystem ## Vorschau der Element Plus-Designsystemoberfläche Module zwischen zwei nativen Transfer-Listen filtern und verschieben, ausgewählte Schlüssel prüfen und eine lokale Auswahl anwenden. ## 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. ### Primär- und Statusfarben | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --el-color-primary | #409eff | Primärer Standardakzent. | | --el-color-primary-light-3 | #79bbff | Primärfarbton für hellere Interaktionen. | | --el-color-primary-light-5 | #a0cfff | Mittlerer Farbton. | | --el-color-primary-light-7 | #c6e2ff | Heller Farbton. | | --el-color-primary-light-9 | #ecf5ff | Zurückhaltende Oberfläche für Auswahl und Schlüsselbereich. | | --el-color-primary-dark-2 | #337ecc | Dunklerer Primärzustand. | | --el-color-success | #67c23a | Erfolgsrolle. | | --el-color-warning | #e6a23c | Warnrolle. | | --el-color-danger | #f56c6c | Fehler-/Gefahrenrolle. | | --el-color-info | #909399 | Neutrale Informationsrolle. | ### Semantische Textfarben und Oberflächen | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --el-text-color-primary | #303133 | Haupttext für die Lektüre. | | --el-text-color-regular | #606266 | Üblicher Komponententext. | | --el-text-color-secondary | #909399 | Hilfetexte und Metadaten. | | --el-text-color-placeholder | #a8abb2 | Rolle für Platzhalter. | | --el-bg-color | #fff | Standardoberfläche. | | --el-bg-color-page | #f2f3f5 | Seitenhintergrund. | | --el-bg-color-overlay | #fff | Overlay-Oberfläche. | | --el-border-color | #dcdfe6 | Standardbegrenzung. | | --el-border-color-light | #e4e7ed | Dezente Begrenzung für Karten und Zusammenfassungen. | ### Typografie, Steuerelemente und Formen | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --el-font-family | "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif | Bevorzugte Standardschriftfamilie. | | --el-font-size-extra-large | 20px | Titelgröße von 20px. | | --el-font-size-large | 18px | Größe von 18px. | | --el-font-size-medium | 16px | Größe von 16px. | | --el-font-size-base | 14px | Basisgröße von 14px. | | --el-font-size-small | 13px | Größe von 13px. | | --el-font-size-extra-small | 12px | Größe von 12px. | | --el-border-radius-base | 4px | Standard-Eckenradius für Komponenten. | | --el-border-radius-small | 2px | Kleiner Eckenradius. | | --el-component-size-large | 40px | Höhe großer Steuerelemente. | | --el-component-size | 32px | Standardhöhe von Steuerelementen. | | --el-component-size-small | 24px | Höhe kleiner Steuerelemente. | ### Originales Layout der Modul-Arbeitsfläche | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | Desktop panel arrangement | two panels with 180px reserved between | Originale Anpassung der nativen Transfer-Komponente. | | Narrow layout | ≤700px: stacked panels | Originaler Breakpoint, kein Element Plus-Token. | | Page spacing | 32px desktop; 20px 16px mobile | Ursprünglicher Außenabstand. | | Summary spacing | 24px padding / 24px gap | Originale Komposition aus ausgewählten Schlüsseln und Modulzusammenfassung. | ## Vollständiger Leitfaden zum Element Plus-Designsystem 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. ## 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. Unterstützende Spezifikation lesen ## 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. Unterstützende Spezifikation lesen ## 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. Unterstützende Spezifikation lesen ## 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. 1. Suchen Sie im Bereich der verfügbaren Module nach „Prüfwarteschlange“. 2. Markieren Sie die passende Option und drücken Sie auf „Add“. 3. Löschen Sie die Suche und vergewissern Sie sich, dass „review“ in der Modellanzeige und der Zielliste erscheint. Unterstützende Spezifikation lesen ## 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. Unterstützende Spezifikation lesen ## 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. Unterstützende Spezifikation lesen ## 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. Unterstützende Spezifikation lesen ## Element Plus Designsystem: Vue-Komponente kompilieren und CSS laden ### Vue-Komponente kompilieren und CSS laden Installieren Sie in einem Vue-3-Vite-Projekt element-plus@2.14.7 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. Unterstützende Spezifikation lesen ## 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. Unterstützende Spezifikation lesen ## Element Plus Designsystem: Komponentenbeispiele ### Vollständige Vue-Komponente zur Modulauswahl Eine Single-File-Komponente mit nativen Transfer-, Card-, Alert-, Button- und Tag-Komponenten. ``` ``` Code-Referenz - v-model speichert ausgewählte Schlüssel, nicht vollständige Optionsobjekte. - Eine deaktivierte Option bleibt sichtbar, kann aber nicht übertragen werden. - Eine Änderung der Übertragungsauswahl löscht den veralteten übernommenen Status. ### Responsive Transfer-Anordnung Die Styles erhalten native Felder und Steuerelemente bei, ordnen sie auf schmalen Bildschirmen jedoch untereinander an. ``` body{margin:0;background:var(--el-bg-color-page);font-family:var(--el-font-family);color:var(--el-text-color-primary);font-size:var(--el-font-size-base);line-height:1.6}.module-desk{max-width:1080px;margin:auto;padding:32px}header{max-width:700px;margin-bottom:28px}h1{font-size:34px;line-height:1.2;letter-spacing:-.03em;margin:10px 0 16px}h2{font-size:20px;line-height:1.3;margin:0}.eyebrow{font-size:11px;letter-spacing:.12em;font-weight:700;color:var(--el-text-color-secondary)}.card-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.el-transfer{--el-transfer-panel-body-height:210px;display:flex;align-items:center;justify-content:center}.el-transfer-panel{width:calc((100% - 180px)/2)}.el-transfer__buttons{padding:0 20px;display:flex;flex-direction:column;gap:10px}.el-transfer__buttons .el-button{margin:0}.help,.empty{font-size:13px;color:var(--el-text-color-secondary)}.empty{padding:16px}.summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}.summary,.key-panel{background:var(--el-bg-color);border:1px solid var(--el-border-color-light);border-radius:var(--el-border-radius-base);padding:24px}.actions{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}.actions .el-button{margin:0}.key-panel{background:var(--el-color-primary-light-9)}pre{font:14px/1.7 monospace;white-space:pre-wrap}.key-panel p{font-size:13px}.summary li{margin:6px 0}footer{font-size:12px;color:var(--el-text-color-secondary);margin-top:20px}@media(max-width:700px){.module-desk{padding:20px 16px}h1{font-size:28px}.el-transfer{flex-direction:column;gap:16px}.el-transfer-panel{width:100%}.el-transfer__buttons{flex-direction:row;padding:0}.summary-grid{grid-template-columns:1fr}.el-card__body{padding:16px}} ``` Code-Referenz - Der Breakpoint und das umgebende Layout sind eigene Festlegungen. ## 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. ``` // 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 element-plus@2.14.7 // 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:
// 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 ``` 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. ``` ## 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. - Transfer Modellschlüssel, Filterung, deaktivierte Daten und leere Bereiche. - Theming CSS Variablen und Sass-Anpassung. - Schnellstart Einrichtung der Vue-Komponente und des Stylesheets. - Config Provider Gebietsschema konfigurieren. - Farbe Standard-Farbrollen. - Rahmen Grundlagen für Rahmen und Formen. ## Element Plus Designsystem: Weiterführende Ressourcen ### Flowbite Eine native Flowbite-4-Zusammensetzung aus Akkordeon und Drawer mit geprüften semantischen Theme-Aliasen, einer dauerhaft eingeblendeten Packliste und einem barrierefreien lokalen Workflow für Materialnotizen. ### Fomantic UI Ein natives Fomantic UI-Leseregal mit verifizierten kompilierten Theme-Werten, jQuery-Dropdown- und Bewertungsmodulen, ausdrücklicher Tastaturunterstützung und einer dauerhaft gespeicherten lokalen Merkliste. ### Foundation Ein funktionierender Foundation-Proof-Desk mit XY Grid, benutzerdefinierten Abidin-Validatoren, Reveal-Bestätigung, tatsächlichen Sass-Einstellungen und vollständigem lokalen Integrationscode. - [Implementierungsreferenz](https://element-plus.org/en-US/component/transfer.html) - [Quelle](https://element-plus.org/en-US/guide/theming.html) - [Quelle](https://element-plus.org/en-US/component/transfer.html) - [Unterstützende Spezifikation lesen](https://element-plus.org/en-US/component/transfer.html) - [Unterstützende Spezifikation lesen](https://element-plus.org/en-US/guide/theming.html) - [Unterstützende Spezifikation lesen](https://element-plus.org/en-US/guide/quickstart.html) - [Code-Referenz](https://element-plus.org/en-US/component/transfer.html) - [Code-Referenz](https://element-plus.org/en-US/guide/theming.html) - [Transfer Modellschlüssel, Filterung, deaktivierte Daten und leere Bereiche.](https://element-plus.org/en-US/component/transfer.html) - [Theming CSS Variablen und Sass-Anpassung.](https://element-plus.org/en-US/guide/theming.html) - [Schnellstart Einrichtung der Vue-Komponente und des Stylesheets.](https://element-plus.org/en-US/guide/quickstart.html) - [Config Provider Gebietsschema konfigurieren.](https://element-plus.org/en-US/component/config-provider.html) - [Farbe Standard-Farbrollen.](https://element-plus.org/en-US/component/color.html) - [Rahmen Grundlagen für Rahmen und Formen.](https://element-plus.org/en-US/component/border.html)