# Naive UI-Designsystem ## Naive UI-Designsystem: Schnittstellenvorschau Durchsuchen Sie Datensätze, blenden Sie den Prüfkontext ein, wählen Sie Zeilen über mehrere Seiten hinweg aus und markieren Sie eine lokale Sammelaktion als geprüft. ## Naive UI-Designsystem: Designreferenz Allgemeines Objekt des hellen Themes von Naive UI 2.45.3, geprüft im installierten Paket. Diese camelCase-Eigenschaften sind Theme-Überschreibungen und kein öffentliches Benennungsschema für --token-CSS-Variablen. Die benutzerdefinierten allgemeinen Überschreibungen der Vorschau sind separat aufgeführt. ### Standardfarben (allgemein) | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | primaryColor | #18a058 | Standard-Grün als Primärfarbe. | | primaryColorHover | #36ad6a | Hover-Variante. | | primaryColorPressed | #0c7a43 | Gedrückte Variante. | | primaryColorSuppl | #36ad6a | Ergänzende Primärfarbe. | | infoColor | #2080f0 | Informationsrolle. | | successColor | #18a058 | Erfolgsrolle. | | warningColor | #f0a020 | Warnrolle. | | errorColor | #d03050 | Fehlerrolle. | | textColor1 | rgb(31, 34, 37) | Kräftiger Text. | | textColor2 | rgb(51, 54, 57) | Normaler Text. | | textColor3 | rgb(118, 124, 130) | Sekundärer Text. | | borderColor | rgb(224, 224, 230) | Standardbegrenzung. | | dividerColor | rgb(239, 239, 245) | Dezente Trennlinien. | | tableHeaderColor | rgb(250, 250, 252) | Hintergrund der Tabellenkopfzeile. | ### Typografie und Geometrie der Steuerelemente | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | fontFamily | v-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" | Bevorzugter Schriftstapel für die Benutzeroberfläche; v-sans wird nicht automatisch heruntergeladen. | | fontSize | 14px | Standard-Schriftgröße von 14px. | | fontSizeMini | 12px | Schriftgröße für Mini-Text. | | fontSizeSmall | 14px | Textgröße für kleine Steuerelemente. | | fontSizeMedium | 14px | Textgröße für mittelgroße Steuerelemente. | | fontSizeLarge | 15px | Textgröße für große Steuerelemente. | | fontSizeHuge | 16px | Textgröße für sehr große Steuerelemente. | | lineHeight | 1.6 | Standard-Zeilenabstand. | | heightTiny | 22px | Höhe für sehr kleine Steuerelemente. | | heightSmall | 28px | Höhe kleiner Steuerelemente. | | heightMedium | 34px | Höhe für mittelgroße Steuerelemente. | | heightLarge | 40px | Höhe großer Steuerelemente. | | heightHuge | 46px | Höhe für sehr große Steuerelemente. | | borderRadius | 3px | Standard-Eckenradius von 3px. | | borderRadiusSmall | 2px | Standard-Eckenradius von 2px für kleine Elemente. | ### Tatsächliche Theme-Überschreibungen der Vorschau | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | common.primaryColor | #176b57 | Eigens gewähltes dunkleres Grün für die primäre Aktion. | | common.primaryColorHover | #238a71 | Eigens festgelegter, abgestimmter Hover-Wert. | | common.primaryColorPressed | #115340 | Eigens festgelegter, abgestimmter Wert für gedrückte Elemente. | | common.borderRadius | 6px | Eigens festgelegte Überschreibung des Eckenradius; Standardwert ist 3px. | | Layout spacing | 32px outer / 24px section gaps / 16px toolbar gap | Eigens gewählter Seitenabstand, keine behauptete globale Naive-Abstandsskala. | ## Naive 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. ## Naive UI-Designsystem: ein JavaScript-Theme-Objekt, keine Sass-Pipeline ### Ein JavaScript-Theme-Objekt, keine Sass-Pipeline > Naive UI ist eine Vue-3-Komponentenbibliothek, deren Theme-Anpassung über ein JavaScript-Objekt erfolgt. Die Review-Warteschlange übergibt themeOverrides an NConfigProvider. Im allgemeinen Abschnitt werden primaryColor, primaryColorHover, primaryColorPressed und borderRadius überschrieben. Die übrigen Komponenten-Standardwerte bleiben über den Provider verfügbar. Die Referenztabelle zeigt tatsächliche Werte aus dem installierten allgemeinen Light-Theme der Version 2.45.3. Aus diesen camelCase-Schlüsseln werden keine erfundenen CSS-Variablennamen abgeleitet. Die Standard-Primärfarbe ist #18a058 und der Standard-Eckenradius beträgt drei Pixel. Das dunklere Grün und der Eckenradius von sechs Pixeln in diesem Beispiel sind ausdrücklich eigene Überschreibungen. Unterstützende Spezifikation lesen ## Naive UI-Designsystem: Typografie und Steuerungshöhen für dichte Oberflächen ### Typografie und Steuerungshöhen für dichte Oberflächen Das gemeinsame Theme verwendet eine Schriftgröße von vierzehn Pixeln bei einem Zeilenabstand von 1,6. Die Schriftgrößen für kleine und mittlere Texte betragen beide vierzehn Pixel, die Höhen der Steuerelemente unterscheiden sich jedoch. heightSmall beträgt achtundzwanzig Pixel und heightMedium vierunddreißig Pixel; die Größenbezeichnungen beschreiben daher die Geometrie der Komponenten und nicht nur eine Abstufung der Schriftgrößen. Der bevorzugte Schriftstapel beginnt mit v-sans. Zum Rendern dieses Beispiels muss die Bibliothek diese Schriftart jedoch nicht herunterladen. Die umgebende Seite verwendet system-ui, eine Überschrift mit 34px und unterstützende Abschnittsüberschriften mit 18px. Diese Seitenstile sind eigens gestaltet. Bei der Verwendung der Bibliothek sollte man die Steuerungsgrößen des Themes von der größeren redaktionellen Hierarchie einer Landingpage unterscheiden. Unterstützende Spezifikation lesen ## Naive UI-Designsystem: Spaltendefinitionen bestimmen das Verhalten ### Spaltendefinitionen bestimmen das Verhalten NDataTable erhält ein columns-Array und ein records-Array. Das Beispiel beginnt mit einer Auswahlspalte, gefolgt von einer Aufklappspalte und anschließend benannten Datenspalten. Die Spalte Reference zeigt einen hervorgehobenen Namen und eine kleinere, stabile ID. Entries verwendet einen numerischen Vergleich, während für die Namensspalte die Standardsortierung gilt. In Review wird abhängig vom Status des Eintrags ein natives NTag gerendert. Diese Konfiguration legt das tatsächliche Verhalten fest und ist kein Screenshot mit dekorativen Tabellenüberschriften. Beim Sortieren der Spalte Entries werden die numerischen Werte verglichen, nicht formatierte Zeichenfolgen. Der aufgeklappte Inhalt zeigt die konkrete Prüffrage für jeden Eintrag. Die Datentabelle steuert die Zeilenanzeige, während die Anwendung die Bedeutung dieser Einträge festlegt. Unterstützende Spezifikation lesen ## Naive UI-Designsystem: Die Auswahl muss beim Umsortieren erhalten bleiben ### Ausgewählte Elemente müssen auch nach dem Umsortieren erhalten bleiben Die row-key-Funktion gibt die stabile ID jedes Eintrags zurück. checked-row-keys und update:checked-row-keys halten die Auswahl im Vue-Zustand kontrolliert. Beim Sortieren oder Umblättern kann sich die Position eines Eintrags ändern, ohne dass sich seine Identität für die Sammelaktion ändert. Mit Array-Indizes wäre diese Zuordnung bei einer Änderung der Zeilenreihenfolge anfällig. Für Einträge mit dem Status Archived ist die Auswahlspalte deaktiviert. Sie bleiben als historischer Kontext sichtbar, können aber nicht in die Prüfgruppe aufgenommen werden. Beim Ausführen der Aktion prüft die Anwendung den Status ebenfalls, damit die Datenänderung mit der sichtbaren Einschränkung übereinstimmt. In einem echten System müsste der Server die Berechtigung weiterhin durchsetzen; ein deaktiviertes Kontrollkästchen ist keine Berechtigungsgrenze. 1. Wählen Sie auf der ersten Seite einen prüfbaren Eintrag aus. 2. Wechseln Sie zur nächsten Seite und prüfen Sie, ob die Auswahlanzahl erhalten bleibt. 3. Führen Sie die Sammelaktion aus und vergewissern Sie sich, dass sich der Status des ausgewählten Eintrags ändert, ohne einen archivierten Eintrag zu beeinflussen. Unterstützende Spezifikation lesen ## Naive UI-Designsystem: Filterung und Seitennavigation haben getrennte Zustände ### Filterung und Paginierung haben getrennte Zustände Die Suche gleicht Referenznamen und Verantwortliche ab. Bei einer Änderung des Suchwerts wird die aktuelle Seite auf eins zurückgesetzt, damit ein gefiltertes Ergebnis nicht auf einer inzwischen leeren späteren Seite verbleibt. Die Seitennavigation verwendet eine Seitengröße von vier und einen onChange-Handler. Bei den sechs Einträgen lassen sich Seitenwechsel im lokalen Beispiel nachvollziehen. Die Auswahl ist bewusst vom gefilterten Array getrennt und kann sich über mehrere Seiten erstrecken. Die Anzahl in der Werkzeugleiste macht diesen Umfang deutlich. Bei einer produktiven Sammelaktion sollten ausgeblendete Auswahlen nach einer klaren Regel beibehalten oder aufgehoben werden. Dieses Beispiel behält sie bei. Ein Filter verändert niemals die zugrunde liegenden Prüfeinträge. Unterstützende Spezifikation lesen ## Naive UI-Designsystem: Zeilen vor einer Sammelentscheidung aufklappen ### Zeilen vor einer Sammelentscheidung aufklappen Jede aufklappbare Zeile enthält eine konkrete Aufgabe, etwa die Tastaturnavigation in der Navigation zu prüfen oder verschiedene Bedeutungen für leere Zustände zu vergleichen. Dadurch liefert der aufgeklappte Bereich nützliche Anhaltspunkte für die Prüfung, statt nur eine weitere allgemeine Beschreibung zu wiederholen. Die Aufklappspalte verwendet renderExpand, um gewöhnlichen Inhalt unter dem jeweiligen Eintrag anzuzeigen. Die Tabelle behält auf schmalen Bildschirmen ihre Spaltenstruktur und erhält scroll-x=640. Dadurch kann der Tabellenbereich horizontal gescrollt werden, während die Seite im Ansichtsfenster bleibt. Auf Mobilgeräten wird die Werkzeugleiste untereinander angeordnet. Die Daten werden jedoch nicht stillschweigend entfernt, nur damit der Screenshot aufgeräumter wirkt. Unterstützende Spezifikation lesen ## Naive UI-Designsystem: Die Sammelprüfung ist eine lokale Datentransformation ### Die Sammelprüfung ist eine lokale Datentransformation Die Schaltfläche „Ausgewählte als geprüft markieren“ ist deaktiviert, wenn das kontrollierte Schlüssel-Array leer ist. Bei Aktivierung durchläuft die Funktion die Einträge und ändert nur ausgewählte, nicht archivierte Einträge in Reviewed. Anschließend wird die Auswahl aufgehoben und eine native Erfolgsmeldung beschreibt genau diese lokale Aktion. Der geprüfte Zähler in der Kartenüberschrift wird aus den Einträgen abgeleitet und nicht unabhängig davon erhöht. Es wird weder ein Repository noch ein Prüfdienst oder externes Dokument geändert. Eine echte asynchrone Implementierung müsste Ladezustände, Ablehnungen und Teilerfolge behandeln. Sie sollte die Auswahl erst aufheben, wenn bekannt ist, welche Aktualisierungen erfolgreich waren. Dieses Beispiel führt die Aktion synchron und ausdrücklich lokal aus, sodass die Erfolgsmeldung dem Code entspricht. - Die Sammelaktionsschaltfläche zeigt an, ob Schlüssel ausgewählt sind. - Die Anzahl der geprüften Einträge wird aus denselben Einträgen abgeleitet, die in der Tabelle angezeigt werden. - Der Ergebnishinweis besagt, dass kein Repository geändert wurde. Unterstützende Spezifikation lesen ## Naive UI-Designsystem: Eine Vue-Komponente ohne erforderlichen CSS-Import ### Eine Vue-Komponente ohne erforderlichen CSS-Import Installieren Sie naive-ui@2.45.3 in einem Vue-3-Projekt und importieren Sie die in App.vue verwendeten Komponenten. Naive UI stellt das Styling der Komponenten zur Laufzeit bereit. Anders als bei vielen Bibliotheken, bei denen CSS im Vordergrund steht, ist für diese Komponenten kein globaler Import des Paket-Stylesheets erforderlich. Die bereitgestellte style.css enthält ausschließlich das Layout der eigens gestalteten Arbeitsoberfläche. NConfigProvider erhält englische Komponenten- und Gebietsschemaeinstellungen für Datumsangaben sowie die gemeinsame Theme-Überschreibung. Die vollständige SFC lässt sich mit dem standardmäßigen Vite-Vue-Plugin kompilieren. Das eigenständige Beispiel bündelt die kompilierte Komponente und stellt native Komponenten und Anwendungsverhalten ohne Netzwerkanfragen bereit. Unterstützende Spezifikation lesen ## Naive UI Designsystem: Theme- und Datengrenzen bleiben nachvollziehbar ### Theme und Daten bleiben klar getrennt und nachvollziehbar Die Werkbank ist eine kleine Referenzbibliothek und kein allgemeines Verwaltungs-Dashboard mit erfundenen Kennzahlen. Jede Zeile enthält Beispieldaten, jeder Status hat eine eindeutige Bedeutung und der erweiterte Text nennt einen konkreten Grund für die Prüfung. Die Theme-Tabelle und die vollständige SFC machen Styling und Verhalten reproduzierbar. Wenn Sie Naive UI in ein größeres System übernehmen, koordinieren Sie globale gemeinsame Überschreibungen mit Überschreibungen auf Komponentenebene. Standard-, Hover- und gedrückte Farbe sollten gemeinsam überprüft werden. Vermeiden Sie es, generierte interne Elemente als erste Anpassungsstrategie zu stylen, wenn der Provider eine unterstützte Theme-Schnittstelle bietet. Unterstützende Spezifikation lesen ## Naive UI Beispiele für Designsystem-Komponenten ### Vollständige Vue-Prüfwarteschlange Konfiguration der DataTable-Spalten, stabile Zeilenschlüssel, Auswahl, Erweiterung und kontrollierte Paginierung. ``` ``` Code-Referenz - Die Auswahl basiert auf stabilen Referenz-IDs. - Archivierte Zeilen sind durch die Auswahlprädikatsfunktion deaktiviert. - Die gemeinsame Theme-Überschreibung wird über NConfigProvider bereitgestellt. ### Ursprüngliches Werkbank-Layout Seitentypografie und responsiver Abstand rund um die native Datentabelle. ``` *{box-sizing:border-box}body{margin:0;background:#f5f7f6;color:#1f2225;font-family:system-ui,sans-serif;font-size:14px;line-height:1.6}.review-desk{max-width:1120px;margin:auto;padding:32px}header{max-width:720px;margin-bottom:28px}h1{font-size:34px;line-height:1.2;letter-spacing:-.03em;margin:10px 0 16px}.eyebrow{font-size:11px;letter-spacing:.12em;font-weight:700;color:#426258}.toolbar{display:flex;align-items:center;gap:16px}.toolbar .n-input{max-width:360px}.selection-note,.row-id{font-size:12px;color:#767c82}.row-id{margin-top:4px}.row-note{padding:12px 16px;max-width:65ch;color:#335547}.notice{margin-top:20px}.notes{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}.notes section{border-top:2px solid #c8d7cf;padding:18px 0}.notes h2{font-size:18px;margin:0 0 10px}.notes p{margin:0}footer{font-size:12px;color:#767c82;margin-top:20px}@media(max-width:700px){.review-desk{padding:20px 16px}h1{font-size:28px}.toolbar{align-items:stretch;flex-direction:column}.toolbar .n-input{max-width:none}.notes{grid-template-columns:1fr}.n-card>.n-card__content{padding:16px!important}} ``` Code-Referenz - Naive UI fügt Komponentenstile ein; dieses Stylesheet enthält ausschließlich das Anwendungs-Layout. ## Naive UI Einrichtung des Designsystem-Agenten ### Ausgangspunkt für die Implementierung Verifiziert mit Vue 3 und Naive UI 2.45.3. Verwendet die standardmäßige SFC-Kompilierung. Alle Referenzdatensätze sind lokal. ``` // Create the project first: // npm create vite@latest naive-ui-specimen -- --template vue // cd naive-ui-specimen && npm install // In a Vite Vue 3 project: // npm install naive-ui@2.45.3 // Save the complete component above as App.vue and layout as style.css. import {createApp} from 'vue'; import App from './App.vue'; import './style.css'; createApp(App).mount('#app'); // index.html contains
. // NConfigProvider, locales, themeOverrides and component imports are in App.vue. // No Naive UI global CSS import is required for these components. // Keep the template index.html and replace its entry with the code above. // npm run dev ``` ### Ein Prompt für dein Projekt ``` Verwenden Sie die Referenzprüfwarteschlange von Naive UI 2.45.3 mit NConfigProvider und nativen NDataTable-Spalten, Erweiterung, Sortierung, Paginierung und Auswahl. Bewahren Sie beim Filtern oder Wechseln der Seiten stabile Referenzschlüssel und stellen Sie sicher, dass die Sammelaktion auf die ausgewählten Datensätze angewendet wird, nicht nur auf die sichtbaren Zeilen. Richten Sie leere Zustände und deaktivierte Aktionen an der tatsächlichen Sammlung aus. Behalten Sie die bereitgestellten themeOverrides als Anwendungsüberschreibungen bei, getrennt von den Paketstandardwerten, und übernehmen Sie das vollständige ursprüngliche Layout. Die Warteschlange dient der lokalen Referenzprüfung und ist kein Dienst zum Importieren von Datensätzen. ``` ## Naive UI Quellen und Geltungsbereich des Designsystems Naive UI 2.45.3. Theme-Standardwerte und ursprüngliche Überschreibungen sind separat gekennzeichnet. Prüfdatensätze und Sammeländerungen bleiben lokal. - Offizielles Repository Vue 3, Laufzeitstile und Theme-Anpassung. - DataTable-Beispiele Muster für native Datentabellen und Beispiele für API. - Gemeinsames helles Theme Tatsächliche Standardpalette und abgeleitete Rollen. - Gemeinsame Geometrie Schriftgrößen, Steuerelementhöhen und Radien. - Konfigurationsanbieter Theme-Konfiguration des Providers. ## Naive UI Weiterführende Ressourcen zum Designsystem ### Nuxt UI Erstelle mit echten Vue-Komponenten einen vollständigen Brief-Composer für Nuxt UI 4.11.3 – mit semantischen Theme-Referenzen, Eingabevalidierung und explizitem Verhalten für lokale Entwürfe. ### Oruga UI 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. ### 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. - [Implementierungsreferenz](https://github.com/tusen-ai/naive-ui/tree/main/src/data-table/demos/enUS) - [Quelle](https://github.com/tusen-ai/naive-ui/blob/main/src/_styles/common/light.ts) - [Quelle](https://github.com/tusen-ai/naive-ui/tree/main/src/config-provider) - [Unterstützende Spezifikation lesen](https://github.com/tusen-ai/naive-ui/blob/main/src/_styles/common/light.ts) - [Unterstützende Spezifikation lesen](https://github.com/tusen-ai/naive-ui/tree/main/src/data-table/demos/enUS) - [Unterstützende Spezifikation lesen](https://github.com/tusen-ai/naive-ui) - [Unterstützende Spezifikation lesen](https://github.com/tusen-ai/naive-ui/tree/main/src/config-provider) - [Code-Referenz](https://github.com/tusen-ai/naive-ui/tree/main/src/data-table/demos/enUS) - [Code-Referenz](https://github.com/tusen-ai/naive-ui) - [Offizielles Repository Vue 3, Laufzeitstile und Theme-Anpassung.](https://github.com/tusen-ai/naive-ui) - [DataTable-Beispiele Muster für native Datentabellen und Beispiele für API.](https://github.com/tusen-ai/naive-ui/tree/main/src/data-table/demos/enUS) - [Gemeinsames helles Theme Tatsächliche Standardpalette und abgeleitete Rollen.](https://github.com/tusen-ai/naive-ui/blob/main/src/_styles/common/light.ts) - [Gemeinsame Geometrie Schriftgrößen, Steuerelementhöhen und Radien.](https://github.com/tusen-ai/naive-ui/blob/main/src/_styles/common/_common.ts) - [Konfigurationsanbieter Theme-Konfiguration des Providers.](https://github.com/tusen-ai/naive-ui/tree/main/src/config-provider)