# Elastic UI-Designsystem ## Interface-Vorschau des Elastic UI-Designsystems Filtern Sie den Ereignisstrom nach Nachricht oder Schweregrad, speichern Sie einzelne Ereignisse, leeren Sie ein leeres Ergebnis und wechseln Sie zwischen heller und dunkler Darstellung. ## Designreferenz für das Elastic UI-Designsystem Elastic UI 123.0.0 mit Borealis-Theme 8.1.0 und React 18.3.1. Die Tabellen verwenden Namen aus dem veröffentlichten Theme-JSON. Dies sind Exportschlüssel, keine wörtlichen useEuiTheme-Objektpfade. In der tatsächlichen Vorschau wird das native React-Theme API verwendet. ### Semantische Farben von Borealis | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | euiColorPrimary | light: #0B64DD; dark: #61A2FF | Veröffentlichte Namen aus dem Theme-Export. Verwenden Sie in React die entsprechende semantische Rolle über useEuiTheme, anstatt diese Werte fest zu codieren. | | euiColorSuccess | light: #008A5E; dark: #24C292 | Veröffentlichte Namen aus dem Theme-Export. Verwenden Sie in React die entsprechende semantische Rolle über useEuiTheme, anstatt diese Werte fest zu codieren. | | euiColorWarning | light: #FACB3D; dark: #FACB3D | Veröffentlichte Namen aus dem Theme-Export. Verwenden Sie in React die entsprechende semantische Rolle über useEuiTheme, anstatt diese Werte fest zu codieren. | | euiColorDanger | light: #C61E25; dark: #F6726A | Veröffentlichte Namen aus dem Theme-Export. Verwenden Sie in React die entsprechende semantische Rolle über useEuiTheme, anstatt diese Werte fest zu codieren. | | euiColorEmptyShade | light: #FFFFFF; dark: #111C2C | Veröffentlichte Namen aus dem Theme-Export. Verwenden Sie in React die entsprechende semantische Rolle über useEuiTheme, anstatt diese Werte fest zu codieren. | | euiColorFullShade | light: #07101F; dark: #FFFFFF | Veröffentlichte Namen aus dem Theme-Export. Verwenden Sie in React die entsprechende semantische Rolle über useEuiTheme, anstatt diese Werte fest zu codieren. | | euiPageBackgroundColor | light: #ECF1F9; dark: #07101F | Veröffentlichte Namen aus dem Theme-Export. Verwenden Sie in React die entsprechende semantische Rolle über useEuiTheme, anstatt diese Werte fest zu codieren. | | euiTextColor | light: #384861; dark: #B4C1D5 | Veröffentlichte Namen aus dem Theme-Export. Verwenden Sie in React die entsprechende semantische Rolle über useEuiTheme, anstatt diese Werte fest zu codieren. | | euiTextSubduedColor | light: #516381; dark: #98A8C3 | Veröffentlichte Namen aus dem Theme-Export. Verwenden Sie in React die entsprechende semantische Rolle über useEuiTheme, anstatt diese Werte fest zu codieren. | ### Abstandsskala | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | euiSizeXS | 4px | Verwenden Sie für den Layout-Rhythmus passende EuiSpacer-/FlexGroup-Größen. Die Basiseinheit beträgt in diesem Theme-Export 16px. | | euiSizeS | 8px | Verwenden Sie für den Layout-Rhythmus passende EuiSpacer-/FlexGroup-Größen. Die Basiseinheit beträgt in diesem Theme-Export 16px. | | euiSizeM | 12px | Verwenden Sie für den Layout-Rhythmus passende EuiSpacer-/FlexGroup-Größen. Die Basiseinheit beträgt in diesem Theme-Export 16px. | | euiSize | 16px | Verwenden Sie für den Layout-Rhythmus passende EuiSpacer-/FlexGroup-Größen. Die Basiseinheit beträgt in diesem Theme-Export 16px. | | euiSizeL | 24px | Verwenden Sie für den Layout-Rhythmus passende EuiSpacer-/FlexGroup-Größen. Die Basiseinheit beträgt in diesem Theme-Export 16px. | | euiSizeXL | 32px | Verwenden Sie für den Layout-Rhythmus passende EuiSpacer-/FlexGroup-Größen. Die Basiseinheit beträgt in diesem Theme-Export 16px. | | euiSizeXXL | 40px | Verwenden Sie für den Layout-Rhythmus passende EuiSpacer-/FlexGroup-Größen. Die Basiseinheit beträgt in diesem Theme-Export 16px. | ### Typografie | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | euiFontSizeXS | 12px | Veröffentlichte Typografiereferenz. Verwenden Sie EuiText-/EuiTitle-Varianten für die Komponentenhierarchie. | | euiFontSizeS | 14px | Veröffentlichte Typografiereferenz. Verwenden Sie EuiText-/EuiTitle-Varianten für die Komponentenhierarchie. | | euiFontSize | 14px | Veröffentlichte Typografiereferenz. Verwenden Sie EuiText-/EuiTitle-Varianten für die Komponentenhierarchie. | | euiFontSizeM | 16px | Veröffentlichte Typografiereferenz. Verwenden Sie EuiText-/EuiTitle-Varianten für die Komponentenhierarchie. | | euiFontSizeL | 20px | Veröffentlichte Typografiereferenz. Verwenden Sie EuiText-/EuiTitle-Varianten für die Komponentenhierarchie. | | euiFontSizeXL | 24px | Veröffentlichte Typografiereferenz. Verwenden Sie EuiText-/EuiTitle-Varianten für die Komponentenhierarchie. | | euiFontSizeXXL | 30px | Veröffentlichte Typografiereferenz. Verwenden Sie EuiText-/EuiTitle-Varianten für die Komponentenhierarchie. | | euiLineHeight | 1.5 | Veröffentlichte Typografiereferenz. Verwenden Sie EuiText-/EuiTitle-Varianten für die Komponentenhierarchie. | ### Rahmen und Formen | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | euiBorderWidthThin | 1px | Unterscheiden Sie zwischen Inline-, Steuerungs-, Panel- und Rahmenformen. Ein einheitlicher Eckenradius für alles würde die Hierarchie verwischen. | | euiBorderWidthThick | 2px | Unterscheiden Sie zwischen Inline-, Steuerungs-, Panel- und Rahmenformen. Ein einheitlicher Eckenradius für alles würde die Hierarchie verwischen. | | euiBorderColor | #E3E8F2 | Unterscheiden Sie zwischen Inline-, Steuerungs-, Panel- und Rahmenformen. Ein einheitlicher Eckenradius für alles würde die Hierarchie verwischen. | | euiBorderRadiusInline | 4px | Unterscheiden Sie zwischen Inline-, Steuerungs-, Panel- und Rahmenformen. Ein einheitlicher Eckenradius für alles würde die Hierarchie verwischen. | | euiBorderRadiusControl | 8px | Unterscheiden Sie zwischen Inline-, Steuerungs-, Panel- und Rahmenformen. Ein einheitlicher Eckenradius für alles würde die Hierarchie verwischen. | | euiBorderRadiusPanel | 12px | Unterscheiden Sie zwischen Inline-, Steuerungs-, Panel- und Rahmenformen. Ein einheitlicher Eckenradius für alles würde die Hierarchie verwischen. | | euiBorderRadiusFrame | 16px | Unterscheiden Sie zwischen Inline-, Steuerungs-, Panel- und Rahmenformen. Ein einheitlicher Eckenradius für alles würde die Hierarchie verwischen. | ### Fokus und Bewegung | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | euiFocusRingSize | 2px | Behalten Sie das native Fokus- und Bewegungsverhalten bei, statt interne .eui-Selektoren zu überschreiben. | | euiFocusBackgroundColor | #ECF1F9 | Behalten Sie das native Fokus- und Bewegungsverhalten bei, statt interne .eui-Selektoren zu überschreiben. | | euiAnimSpeedExtraFast | 90ms | Behalten Sie das native Fokus- und Bewegungsverhalten bei, statt interne .eui-Selektoren zu überschreiben. | | euiAnimSpeedFast | 150ms | Behalten Sie das native Fokus- und Bewegungsverhalten bei, statt interne .eui-Selektoren zu überschreiben. | | euiAnimSpeedNormal | 250ms | Behalten Sie das native Fokus- und Bewegungsverhalten bei, statt interne .eui-Selektoren zu überschreiben. | | euiAnimSpeedSlow | 350ms | Behalten Sie das native Fokus- und Bewegungsverhalten bei, statt interne .eui-Selektoren zu überschreiben. | ### Nativer API-Vertrag in diesem Explorer | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | EuiProvider | colorMode="light" \| "dark" | Stellt den Theme-Kontext und Emotion-Stile bereit. | | useEuiTheme | { euiTheme } | Löst semantische Farben für benutzerdefinierte Elemente und EuiHealth auf. | | EuiBasicTable | items · itemId · columns | Rendert die gesteuerte sichtbare Sammlung anhand stabiler IDs. | | EuiFieldSearch | value · onChange · incremental | Die Anwendung filtert eine lokale Sammlung mit sechs Ereignissen. | | EuiButtonGroup | options · idSelected · onChange | Gesteuerter Schweregradfilter mit sichtbarer Legende. | | EuiHealth | color + readable child label | Ein Statuspunkt ergänzt die Bezeichnung des Schweregrads, ersetzt sie aber nicht. | ## Vollständiger Leitfaden zum Elastic UI-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. ## Struktur des Elastic UI-Designsystem-Explorers ### Ein Arbeitsbereich für Untersuchungen statt eines allgemeinen Dashboards > Das Beispiel umfasst drei kompakte Kennzahlen und einen Ereignisstrom. Ein Suchfeld und eine Schweregradgruppe grenzen den Ereignisstrom ein; jede Zeile bietet eine eigene Speicheraktion. Wenn die Aktion direkt beim Ereignis steht, können Leserinnen und Leser Belege sammeln, ohne den gefilterten Kontext zu verlassen. In der Zusammenfassung wird ausdrücklich die Anzahl der Beispieldatenereignisse angegeben, statt Live-Datenverkehr vorzutäuschen. ### Die aktuelle Theme-Grenze verwenden Dieses Beispiel kombiniert EUI 123.0.0 mit Borealis 8.1.0. Die Referenzwerte stammen aus diesem veröffentlichten Theme und nicht aus einem älteren Screenshot von Amsterdam. EuiProvider verwaltet den Darstellungsmodus und den Stilkontext. Der Anwendungsstatus bleibt von jeder Theme-Berechnung getrennt, sodass ein Wechsel der Darstellung weder gespeicherte Ereignisse noch die aktuelle Suchanfrage zurücksetzt. ## Semantische Farbrollen des Elastic UI-Designsystems ### Den Schweregrad als aussagekräftige Beziehung verwenden In dieser Anwendung verwendet Info die primäre Rolle, Warning die Warnungsrolle und Error die Gefahrenrolle. EuiHealth zeigt neben dem Punkt die Bezeichnung des Schweregrads an. Diese Zuordnung ist eine Anwendungsrichtlinie und bedeutet nicht, dass jedes Element in der Primärfarbe einen Informationsschweregrad darstellt. Fehleranzahlen und Ereignisbezeichnungen müssen weiterhin als Text lesbar sein. ### Farben anhand des aktiven Themes auflösen Der Bildschirm ruft useEuiTheme auf und verwendet die aufgelösten Farben für Hintergrund, Fließtext und Statusindikatoren. Die Exporttabellen enthalten jeweils Werte für helle und dunkle Darstellung, damit der Unterschied sichtbar wird. Kopieren Sie nicht denselben Hex-Wert in beide Modi und verwenden Sie keine generierten Emotion-Klassennamen, um die Darstellung zu erzwingen. ## Typografie und Zahlenhierarchie des Elastic UI-Designsystems ### Kennzahlen erst einordnen, dann hervorheben EuiStat versieht die 6 Beispieldatenereignisse, das 1 Fehlerereignis und die Anzahl gespeicherter Ereignisse mit Beschreibungen. Die Zahl allein wäre mehrdeutig. EuiTitle leitet die Untersuchung ein, während EuiText den Zeitraum und den Hinweis auf Beispieldaten angibt. Die Überschrift des Ereignisstroms ist kleiner als der Seitentitel. ### Protokolltext bei kompakter Darstellung gut lesbar halten Borealis verwendet im Export einen Basiswert von 14px und eine Zeilenhöhe von 1.5 sowie Schriftgrößen in den Abstufungen 12/16/20/24/30px. Zeitstempel und Dienstnamen stehen in vorhersehbaren Spalten, während die Ereignisnachricht flexibel Platz erhält. Das Beispiel verwendet verfügbare Systemschriften aus dem nativen Schriftstapel und gibt nicht vor, eine extern geladene Inter-Schriftdatei zu verwenden. ## Basistabelle und gesteuerte Filter des Elastic UI-Designsystems ### Darstellung und Filterung voneinander trennen EuiBasicTable erhält bereits gefilterte Elemente. Spalten definieren ein Feld oder einen benutzerdefinierten Renderer, und itemId verwendet die stabile Ereignis-ID. EuiFieldSearch aktualisiert den Abfragestatus; EuiButtonGroup aktualisiert die ausgewählte Schweregrad-ID. Die Anwendung kombiniert beide Filterbedingungen, bevor sie die sichtbare Sammlung an die Tabelle übergibt. 1. Geben Sie einen Dienstnamen oder einen Nachrichtenausschnitt ein. 2. Wählen Sie Error oder Warning aus, um nach Schweregrad zu filtern. 3. Speichern Sie ein passendes Ereignis über die Aktion in seiner Zeile. 4. Entfernen Sie die Filter und prüfen Sie, ob das gespeicherte Ereignis weiterhin markiert ist. ### Nach Ereignis-ID statt nach Zeilenposition speichern Die Aktion „Ereignis speichern“ schaltet eine ID in einer lokalen Menge um. Durch Sortieren oder Filtern darf ein Lesezeichen niemals auf ein anderes Ereignis verweisen, nur weil sich dessen Position im Array geändert hat. Im Beispiel wird in der Nachricht „Lokal gespeichert“ angezeigt und die Aktion in „Speichern rückgängig machen“ geändert. So ist das Ergebnis der Aktion eindeutig und umkehrbar. ## Abstände und responsive Daten im Elastic UI-Designsystem ### Für Gruppen durchgängig die native Abstandsskala verwenden Die dokumentierten Größen sind 4, 8, 12, 16, 24, 32 und 40px. EuiSpacer und EuiFlexGroup schaffen Abstände zwischen Zusammenfassungsstatistiken, Filtern und Ereignistabelle. EuiPanel stellt die Containerform bereit; das Theme unterscheidet den Panel-Radius von 12px von den Radien für Steuerelemente mit 8px und Rahmen mit 16px. ### Die Seite im mobilen Ansichtsbereich halten Die Gruppen für Zusammenfassung und Filter ordnen sich mit dem nativen Verhalten von FlexGroup neu an. Die Tabelle befindet sich in einem horizontal scrollbar begrenzten Bereich mit einer Anwendungs-Mindestbreite von 640px. So bleiben Zeitstempel, Meldung und Aktionen einander zugeordnet, statt dass die ganze Seite überläuft. Für eine Produktionstabelle können Sie die dokumentierten Optionen für responsive Tabellen passend zu den tatsächlichen Spalten auswählen. ## Elastic UI-Designsystem: Suche, leere und gespeicherte Zustände ### Bei einer Suche ohne Treffer gibt es eine direkte Möglichkeit, fortzufahren Bei einer Abfrage ohne mögliche Treffer wird „Keine Ereignisse entsprechen den aktuellen Filtern“ mit der Aktion „Filter zurücksetzen“ angezeigt. Durch das Zurücksetzen von Abfrage und Schweregrad werden alle sechs Beispieldaten wiederhergestellt, ohne gespeicherte IDs zu ändern. Die Anzahl über der Tabelle gibt die Zahl der passenden Ereignisse über eine höfliche Live-Region bekannt. ### Ein lokales Speichern ist kein Incident-Workflow Beim Speichern eines Ereignisses ändern sich die sichtbare Zeilenbeschriftung und die gespeicherte Statistik. Es wird weder Elasticsearch kontaktiert noch ein Incident erstellt oder der Zustand über ein Neuladen hinaus gespeichert. Ein echtes Produkt für Untersuchungen sollte einen dokumentierten Persistenzendpunkt ergänzen und ausstehende oder fehlgeschlagene Antworten melden, bevor behauptet wird, dass die gespeicherte Sammlung dauerhaft ist. ## Elastic UI-Designsystem: barrierefreie Tabellenaktionen ### Filter unabhängig von Platzhaltern benennen Die Suche hat einen barrierefreien Namen, und die Schaltflächengruppe dient als Legende für die Schweregrade. Die Tabellenspalten haben aussagekräftige Überschriften; die Aktion jeder Zeile ist ein natives EuiButtonEmpty. EuiHealth enthält Text, sodass die Statusfarbe nie die einzige Information ist. Bewahren Sie diese Vorgaben beim Ersetzen der Beispieldaten bei. - Für Schweregrade sichtbare Wörter verwenden. - Tabellenbeschriftung und Spaltennamen beibehalten. - Den Speicherstatus der stabilen Ereignis-ID zuordnen. ### Tastatur- und visuellen Zustand gemeinsam beibehalten Nutzer können den Fokus auf die Suche setzen, einen Schweregradfilter auswählen, die Aktionen einer Zeile erreichen und die Darstellungseinstellung umschalten. Der 2px-Fokusring gehört zur Theme-Referenz. Testen Sie eine gefilterte Ergebnismenge, nachdem Sie eine Zeile gespeichert und den Filter zurückgesetzt haben; die Aktionsbeschriftung und die gespeicherte Statistik sollten weiterhin übereinstimmen. ## Elastic UI-Designsystem: Einrichtung und Theme-Integration ### Die dokumentierten Peer-Abhängigkeiten installieren Die offizielle Einrichtungsanleitung verwendet Yarn und führt neben EUI auch Borealis, Emotion, datemath und moment auf. Dieses Beispiel läuft mit React 18 und umschließt den Komponentenbaum nicht mit StrictMode. Die folgende Einrichtung macht diese Voraussetzungen explizit, statt unbemerkt React 19 aus einer neu erstellten Anwendung zu übernehmen. ### Die vollständige Einstiegsdatei als Implementierung verwenden Das folgende Beispiel enthält den Provider, den Datensatz, den gesteuerten Zustand, die Spalten-Renderer, die Filtersteuerelemente und den createRoot-Einstiegspunkt. Das Vite-Grundgerüst stellt index.html bereit. Dieses native Beispiel wurde mit esbuild gebündelt und im Browser geprüft; die offizielle Einrichtungsanleitung dokumentiert Einschränkungen von Vite und anderen Bundlern ohne Webpack. Prüfen Sie Ihren Produktions-Bundler unabhängig davon. ## Elastic UI-Designsystem: Komponentenbeispiele ### main.jsx – vollständiger nativer Log-Explorer EuiProvider und Borealis ermöglichen eine gesteuerte Ereignistabelle mit Filtern nach Schweregrad und Suche sowie einem lokalen Zustand für gespeicherte Ereignisse. ``` import React, { useState } from "react"; import { createRoot } from "react-dom/client"; import { EuiProvider, EuiPanel, EuiTitle, EuiText, EuiSpacer, EuiFlexGroup, EuiFlexItem, EuiFieldSearch, EuiButtonGroup, EuiButtonEmpty, EuiBasicTable, EuiHealth, EuiStat, EuiSwitch, EuiCallOut, useEuiTheme, } from "@elastic/eui"; const logs = [ { id: 1, time: "09:42:18", service: "gateway", message: "Request completed", level: "Info", duration: 42, }, { id: 2, time: "09:42:21", service: "worker", message: "Retry queued after timeout", level: "Warning", duration: 1200, }, { id: 3, time: "09:42:24", service: "gateway", message: "Upstream connection refused", level: "Error", duration: 800, }, { id: 4, time: "09:42:29", service: "indexer", message: "Batch indexed", level: "Info", duration: 180, }, { id: 5, time: "09:42:32", service: "worker", message: "Job completed", level: "Info", duration: 94, }, { id: 6, time: "09:42:36", service: "gateway", message: "Upstream connection restored", level: "Info", duration: 51, }, ]; function Screen({ dark, setDark }) { const { euiTheme } = useEuiTheme(); const [query, setQuery] = useState(""), [level, setLevel] = useState("all"), [saved, setSaved] = useState([]); const visible = logs.filter( (x) => (level === "all" || x.level === level) && (x.service + " " + x.message).toLowerCase().includes(query.toLowerCase()), ); const colors = { Info: euiTheme.colors.primary, Warning: euiTheme.colors.warning, Error: euiTheme.colors.danger, }; const columns = [ { field: "time", name: "Time", width: "105px" }, { field: "service", name: "Service", width: "105px" }, { field: "message", name: "Event", render: (value, item) => ( {value} {saved.includes(item.id) ? " · Saved locally" : ""} ), }, { field: "level", name: "Level", width: "110px", render: (value) => {value}, }, { name: "Action", width: "110px", render: (item) => ( setSaved((v) => v.includes(item.id) ? v.filter((id) => id !== item.id) : [...v, item.id], ) } > {saved.includes(item.id) ? "Unsave" : "Save event"} ), }, ]; return (

ELASTIC UI · LOG EXPLORER

Investigate gateway events

 setDark(e.target.checked)} />

Event stream

09:42:18–09:42:36 · fictional data · no live telemetry

 setQuery(e.target.value)} incremental /> setLevel(id)} />

{visible.length} matching events
{!visible.length && ( { setLevel("all"); setQuery(""); }} > Clear filters )} Saving an event only changes this preview. No query is sent to Elasticsearch and no incident is created.

Native Elastic UI 123.0.0 · Borealis 8.1.0 theme · controlled filters and table actions.

); } function App() { const [dark, setDark] = useState(false); return ( ); } createRoot(document.getElementById("root")).render(); ``` Code-Referenz - Als src/main.jsx im React-Grundgerüst speichern. In diesem Einstiegspunkt wird StrictMode bewusst nicht aktiviert. - Die begrenzte Tabellenbreite von 640px ist eine Anwendungsentscheidung unter CSS; alle visuellen Komponenten stammen von EUI. ### Benutzerdefinierter Theme-Hinweis Das aktive Theme innerhalb eines Providers verwenden, statt benutzerdefiniertes Markup an generierte Komponentenklassen zu koppeln. ``` import React from 'react'; import { useEuiTheme } from '@elastic/eui'; export function InvestigationNote({ children }) { const { euiTheme } = useEuiTheme(); return ; } ``` Code-Referenz - InvestigationNote unter EuiProvider rendern. Der Hinweis übernimmt den ausgewählten Darstellungsmodus. ## Elastic UI-Designsystem: Einrichtung für AI-Agenten ### Ausgangspunkt für die Implementierung Die offizielle EUI-Anleitung dokumentiert die Installation mit Yarn und die Unterstützung von React 18. Einschränkungen bei Bundlern ohne Webpack sind dokumentiert; dieses spezielle native Beispiel wurde mit esbuild gebündelt und im Browser getestet. Verwenden Sie eine von Ihrem Grundgerüst unterstützte Node.js-Version. ``` yarn create vite elastic-investigation --template react cd elastic-investigation yarn add react@18.3.1 react-dom@18.3.1 @elastic/eui@123.0.0 @elastic/eui-theme-borealis@8.1.0 @elastic/datemath @emotion/react @emotion/css moment # Replace src/main.jsx with the complete example above. yarn dev ``` ### Ein Prompt für dein Projekt ``` Erstellen Sie eine Oberfläche zur Untersuchung von Logs mit Elastic UI 123.0.0, Borealis 8.1.0 und React 18. Lesen Sie den bereitgestellten Theme-Export und den nativen Quellcode. Verwenden Sie EuiProvider, eine gesteuerte EuiBasicTable sowie barrierefreie Filter für Suche und Schweregrad. Speichern Sie Ereignisse anhand ihrer stabilen ID, erhalten Sie Lesezeichen beim Filtern und unterscheiden Sie den lokalen UI-Zustand von einer echten Elasticsearch-Abfrage oder Persistenzantwort. Halten Sie die Tabelle auf Mobilgeräten innerhalb des Ansichtsbereichs. ``` ## Elastic UI-Designsystem: Quellen und Geltungsbereich Ein von OpenDesign verfasster Leitfaden und ein fiktiver lokaler Log-Explorer mit nativem Elastic UI 123.0.0 und Borealis 8.1.0. Die Beispieldaten sind keine Live-Telemetriedaten, und die Speicheraktion erfolgt ausschließlich im Arbeitsspeicher. Für EUI gelten eigene Lizenzbedingungen nach Elastic/SSPL; beachten Sie für Ihre Distribution die offizielle Paketlizenz. - Offizielle Einrichtung Provider, Installation, Peer-Abhängigkeiten und Unterstützung der Umgebung. - Basic Table von API Spaltendefinitionen, Renderer und natives Tabellenverhalten. - Borealis-Export des hellen Themes Für diese Referenz verwendete Versionswerte. - EUI-Quellcode und Lizenz Native Implementierung und Lizenzinformationen. ## Elastic UI-Designsystem: verwandte Ressourcen ### Emplifi Soul Lesen Sie Souls Vertrag für Datentabellen zusammen mit den sechs Pixeln Abstand, den abgestuften Farbrollen und der kompakten Inter-Typografie. Vergleichen Sie die Mehrfachauswahl, die Kennzeichnung fehlender Daten und die Zusammenfassungszeilen. Prüfen Sie anschließend die Einstiegspunkte des verifizierten privaten React-Pakets. ### Esri Calcite Eine praktische Calcite-Referenz für fokussierte räumliche Werkzeuge: semantische Oberflächen und blaue Aktionen, kompakte Inspektionsbereiche, echte Eingabe-APIs und ein vollständiges lokales Beispiel zur Standortprüfung. ### GitLab Pajamas Ein Pajamas-Leitfaden für technische Workflows: tatsächliche semantische Design-Token, fließende Typografie und Abstände, ein gestufter Pipeline-Inspektor, verständliche Fehlerausgaben und eine ausdrücklich lokale Wiederholungs-Simulation. - [Implementierungsreferenz](https://eui.elastic.co/docs/components/tables/basic/) - [Quelle](https://cdn.jsdelivr.net/npm/@elastic/eui-theme-borealis@8.1.0/lib/eui_theme_borealis_light.json) - [Quelle](https://eui.elastic.co/docs/components/tables/basic/) - [Code-Referenz](https://eui.elastic.co/docs/components/tables/basic/) - [Code-Referenz](https://eui.elastic.co/docs/getting-started/setup/) - [Offizielle Einrichtung Provider, Installation, Peer-Abhängigkeiten und Unterstützung der Umgebung.](https://eui.elastic.co/docs/getting-started/setup/) - [Basic Table von API Spaltendefinitionen, Renderer und natives Tabellenverhalten.](https://eui.elastic.co/docs/components/tables/basic/) - [Borealis-Export des hellen Themes Für diese Referenz verwendete Versionswerte.](https://cdn.jsdelivr.net/npm/@elastic/eui-theme-borealis@8.1.0/lib/eui_theme_borealis_light.json) - [EUI-Quellcode und Lizenz Native Implementierung und Lizenzinformationen.](https://github.com/elastic/eui)