# Elastic UI Sistema di progettazione ## Anteprima dell’interfaccia del sistema di progettazione sistema di design Elastic UI Filtra il flusso di eventi per messaggio o gravità, salva i singoli eventi, cancella un risultato vuoto e passa dall’aspetto chiaro a quello scuro. ## Riferimento di progettazione del sistema di progettazione sistema di design Elastic UI Elastic UI 123.0.0 con tema Borealis 8.1.0 e React 18.3.1. Le tabelle usano i nomi del JSON del tema pubblicato; sono chiavi di esportazione, non percorsi letterali di useEuiTheme. L’anteprima effettiva usa il tema nativo di React API. ### Colori semantici Borealis | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | euiColorPrimary | light: #0B64DD; dark: #61A2FF | Nomi pubblicati nell’esportazione del tema. In React, usa il ruolo semantico corrispondente tramite useEuiTheme invece di codificare direttamente questi valori. | | euiColorSuccess | light: #008A5E; dark: #24C292 | Nomi pubblicati nell’esportazione del tema. In React, usa il ruolo semantico corrispondente tramite useEuiTheme invece di codificare direttamente questi valori. | | euiColorWarning | light: #FACB3D; dark: #FACB3D | Nomi pubblicati nell’esportazione del tema. In React, usa il ruolo semantico corrispondente tramite useEuiTheme invece di codificare direttamente questi valori. | | euiColorDanger | light: #C61E25; dark: #F6726A | Nomi pubblicati nell’esportazione del tema. In React, usa il ruolo semantico corrispondente tramite useEuiTheme invece di codificare direttamente questi valori. | | euiColorEmptyShade | light: #FFFFFF; dark: #111C2C | Nomi pubblicati nell’esportazione del tema. In React, usa il ruolo semantico corrispondente tramite useEuiTheme invece di codificare direttamente questi valori. | | euiColorFullShade | light: #07101F; dark: #FFFFFF | Nomi pubblicati nell’esportazione del tema. In React, usa il ruolo semantico corrispondente tramite useEuiTheme invece di codificare direttamente questi valori. | | euiPageBackgroundColor | light: #ECF1F9; dark: #07101F | Nomi pubblicati nell’esportazione del tema. In React, usa il ruolo semantico corrispondente tramite useEuiTheme invece di codificare direttamente questi valori. | | euiTextColor | light: #384861; dark: #B4C1D5 | Nomi pubblicati nell’esportazione del tema. In React, usa il ruolo semantico corrispondente tramite useEuiTheme invece di codificare direttamente questi valori. | | euiTextSubduedColor | light: #516381; dark: #98A8C3 | Nomi pubblicati nell’esportazione del tema. In React, usa il ruolo semantico corrispondente tramite useEuiTheme invece di codificare direttamente questi valori. | ### Scala di spaziatura | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | euiSizeXS | 4px | Usa dimensioni corrispondenti di EuiSpacer/FlexGroup per il ritmo del layout; in questa esportazione del tema la base è 16px. | | euiSizeS | 8px | Usa dimensioni corrispondenti di EuiSpacer/FlexGroup per il ritmo del layout; in questa esportazione del tema la base è 16px. | | euiSizeM | 12px | Usa dimensioni corrispondenti di EuiSpacer/FlexGroup per il ritmo del layout; in questa esportazione del tema la base è 16px. | | euiSize | 16px | Usa dimensioni corrispondenti di EuiSpacer/FlexGroup per il ritmo del layout; in questa esportazione del tema la base è 16px. | | euiSizeL | 24px | Usa dimensioni corrispondenti di EuiSpacer/FlexGroup per il ritmo del layout; in questa esportazione del tema la base è 16px. | | euiSizeXL | 32px | Usa dimensioni corrispondenti di EuiSpacer/FlexGroup per il ritmo del layout; in questa esportazione del tema la base è 16px. | | euiSizeXXL | 40px | Usa dimensioni corrispondenti di EuiSpacer/FlexGroup per il ritmo del layout; in questa esportazione del tema la base è 16px. | ### Tipografia | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | euiFontSizeXS | 12px | Riferimento tipografico pubblicato. Usa le varianti di EuiText/EuiTitle per la gerarchia dei componenti. | | euiFontSizeS | 14px | Riferimento tipografico pubblicato. Usa le varianti di EuiText/EuiTitle per la gerarchia dei componenti. | | euiFontSize | 14px | Riferimento tipografico pubblicato. Usa le varianti di EuiText/EuiTitle per la gerarchia dei componenti. | | euiFontSizeM | 16px | Riferimento tipografico pubblicato. Usa le varianti di EuiText/EuiTitle per la gerarchia dei componenti. | | euiFontSizeL | 20px | Riferimento tipografico pubblicato. Usa le varianti di EuiText/EuiTitle per la gerarchia dei componenti. | | euiFontSizeXL | 24px | Riferimento tipografico pubblicato. Usa le varianti di EuiText/EuiTitle per la gerarchia dei componenti. | | euiFontSizeXXL | 30px | Riferimento tipografico pubblicato. Usa le varianti di EuiText/EuiTitle per la gerarchia dei componenti. | | euiLineHeight | 1.5 | Riferimento tipografico pubblicato. Usa le varianti di EuiText/EuiTitle per la gerarchia dei componenti. | ### Bordi e forme | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | euiBorderWidthThin | 1px | Distingui le forme in linea, dei controlli, dei pannelli e della cornice; un unico raggio d’angolo universale cancellerebbe la gerarchia. | | euiBorderWidthThick | 2px | Distingui le forme in linea, dei controlli, dei pannelli e della cornice; un unico raggio d’angolo universale cancellerebbe la gerarchia. | | euiBorderColor | #E3E8F2 | Distingui le forme in linea, dei controlli, dei pannelli e della cornice; un unico raggio d’angolo universale cancellerebbe la gerarchia. | | euiBorderRadiusInline | 4px | Distingui le forme in linea, dei controlli, dei pannelli e della cornice; un unico raggio d’angolo universale cancellerebbe la gerarchia. | | euiBorderRadiusControl | 8px | Distingui le forme in linea, dei controlli, dei pannelli e della cornice; un unico raggio d’angolo universale cancellerebbe la gerarchia. | | euiBorderRadiusPanel | 12px | Distingui le forme in linea, dei controlli, dei pannelli e della cornice; un unico raggio d’angolo universale cancellerebbe la gerarchia. | | euiBorderRadiusFrame | 16px | Distingui le forme in linea, dei controlli, dei pannelli e della cornice; un unico raggio d’angolo universale cancellerebbe la gerarchia. | ### Focus e animazioni | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | euiFocusRingSize | 2px | Mantieni il comportamento nativo di focus e animazione invece di sovrascrivere i selettori interni .eui. | | euiFocusBackgroundColor | #ECF1F9 | Mantieni il comportamento nativo di focus e animazione invece di sovrascrivere i selettori interni .eui. | | euiAnimSpeedExtraFast | 90ms | Mantieni il comportamento nativo di focus e animazione invece di sovrascrivere i selettori interni .eui. | | euiAnimSpeedFast | 150ms | Mantieni il comportamento nativo di focus e animazione invece di sovrascrivere i selettori interni .eui. | | euiAnimSpeedNormal | 250ms | Mantieni il comportamento nativo di focus e animazione invece di sovrascrivere i selettori interni .eui. | | euiAnimSpeedSlow | 350ms | Mantieni il comportamento nativo di focus e animazione invece di sovrascrivere i selettori interni .eui. | ### Contratto nativo di API in questo esploratore | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | EuiProvider | colorMode="light" \| "dark" | Fornisce il contesto del tema e gli stili Emotion. | | useEuiTheme | { euiTheme } | Risolve i colori semantici per gli elementi personalizzati e EuiHealth. | | EuiBasicTable | items · itemId · columns | Visualizza la raccolta visibile controllata usando ID stabili. | | EuiFieldSearch | value · onChange · incremental | L’applicazione filtra una raccolta locale di sei eventi. | | EuiButtonGroup | options · idSelected · onChange | Filtro di gravità controllato con legenda visibile. | | EuiHealth | color + readable child label | Un punto di stato affianca la parola che indica la gravità, senza sostituirla. | ## Guida completa al sistema di progettazione sistema di design Elastic UI Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale. Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti. ## Struttura dell’esploratore del sistema di progettazione sistema di design Elastic UI ### Uno spazio di lavoro per le indagini, non una dashboard generica > L’esempio presenta tre statistiche di riepilogo compatte e un unico flusso di eventi. Un campo di ricerca e un gruppo di gravità restringono il flusso; ogni riga offre un’azione di salvataggio indipendente. Tenere l’azione accanto all’evento permette a chi legge di raccogliere elementi utili senza uscire dal contesto filtrato. Il riepilogo indica esplicitamente il conteggio degli eventi di esempio, senza dichiarare che si tratti di traffico in tempo reale. ### Usa il perimetro del tema corrente Questo esempio abbina EUI 123.0.0 a Borealis 8.1.0. I valori di riferimento provengono da quel tema pubblicato, non da uno screenshot precedente di Amsterdam. EuiProvider gestisce la modalità visiva e il contesto degli stili. Lo stato dell’applicazione resta indipendente dai calcoli del tema, quindi cambiare aspetto non azzera gli eventi salvati né la query corrente. ## Ruoli semantici dei colori nel sistema di progettazione sistema di design Elastic UI ### Usa la gravità per esprimere una relazione significativa In questa applicazione, Info usa il ruolo primario, Warning quello di avviso ed Error quello di pericolo. EuiHealth mostra la parola che indica la gravità accanto al punto. Questa corrispondenza è una regola dell’applicazione; non implica che ogni elemento del colore primario rappresenti una gravità informativa. Anche il conteggio degli errori e le etichette degli eventi devono essere leggibili come testo. ### Risolvi i colori dal tema attivo La schermata richiama useEuiTheme e usa i colori risolti per lo sfondo, il testo principale e gli indicatori di stato. Le tabelle di esportazione includono i valori abbinati per modalità chiara e scura, così che la differenza sia visibile. Non copiare lo stesso valore esadecimale in entrambe le modalità e non usare i nomi delle classi Emotion generate per forzare una corrispondenza. ## Gerarchia tipografica e numerica del sistema di progettazione sistema di design Elastic UI ### Fornisci il contesto delle statistiche prima di mettere in risalto il numero EuiStat abbina 6 eventi di esempio, 1 evento di errore e il conteggio degli elementi salvati alle rispettive descrizioni. Il numero da solo sarebbe ambiguo. EuiTitle introduce l’indagine, mentre EuiText specifica l’intervallo temporale e chiarisce che si tratta di dati di esempio. L’intestazione del flusso è un titolo di livello inferiore, non un secondo titolo di pagina. ### Mantieni leggibile il testo dei log anche con una densità elevata Borealis usa un valore base di esportazione di 14px con un riferimento di interlinea pari a 1.5, oltre a passi tipografici di 12/16/20/24/30px. Timestamp e nomi dei servizi hanno colonne prevedibili, mentre il messaggio dell’evento occupa lo spazio flessibile. L’esempio usa i font di sistema disponibili tramite lo stack nativo e non dichiara di caricare da remoto un asset Inter. ## Tabella di base e filtri controllati del sistema di progettazione sistema di design Elastic UI ### Separa la presentazione dal filtraggio EuiBasicTable riceve gli elementi già filtrati. Le colonne definiscono un campo o un renderer personalizzato, mentre itemId usa l’ID stabile dell’evento. EuiFieldSearch aggiorna lo stato della query; EuiButtonGroup aggiorna l’ID della gravità selezionata. L’applicazione combina entrambi i criteri prima di passare alla tabella la raccolta visibile. 1. Digita il nome di un servizio o una parte del messaggio. 2. Scegli Error o Warning per applicare anche un criterio di gravità. 3. Salva un evento corrispondente usando l’azione della relativa riga. 4. Cancella i filtri e verifica che l’evento salvato rimanga contrassegnato. ### Salva usando l’identità dell’evento, non la posizione della riga L’azione Save event alterna la presenza di un ID in un insieme locale. Ordinare o filtrare non deve mai far sì che un segnalibro punti a un altro evento perché è cambiata la sua posizione nell’array. Nell’esempio, il messaggio indica Saved locally e l’azione diventa Unsave, rendendo esplicito e reversibile il risultato dell’operazione. ## Spaziatura e dati adattabili del sistema di progettazione sistema di design Elastic UI ### Usa la scala di spaziatura nativa per tutti i gruppi Le dimensioni pubblicate sono 4, 8, 12, 16, 24, 32 e 40px. EuiSpacer ed EuiFlexGroup gestiscono lo spazio tra statistiche riepilogative, filtri e tabella degli eventi. EuiPanel definisce la forma del contenitore; il tema distingue il raggio di 12px dei pannelli da quello di 8px dei controlli e di 16px delle cornici. ### Mantieni la pagina entro l’area visibile del dispositivo mobile I gruppi di riepilogo e i filtri si ridispongono grazie al comportamento nativo di FlexGroup. La tabella si trova in un’area delimitata con scorrimento orizzontale e larghezza minima dell’applicazione di 640px: timestamp, messaggio e azioni restano così correlati, senza che l’intera pagina fuoriesca dall’area visibile. Per una tabella di produzione, puoi scegliere le opzioni documentate per le tabelle responsive in base alle colonne effettivamente presenti. ## Elastic UI Stati di ricerca, vuoto e salvataggio del sistema di design ### Una ricerca senza risultati offre un’azione per riprendere Una query senza corrispondenze mostra il messaggio Nessun evento corrisponde ai filtri correnti e l’azione Cancella filtri. Reimpostando la query e la gravità vengono ripristinati tutti e sei gli eventi di esempio, senza modificare gli ID salvati. Il conteggio sopra la tabella comunica il numero di eventi corrispondenti tramite una regione live con annuncio cortese. ### Un salvataggio locale non è un flusso di gestione degli incidenti Il salvataggio di un evento modifica l’etichetta visibile della riga e la statistica degli elementi salvati. Non contatta Elasticsearch, non crea un incidente e non conserva i dati dopo l’aggiornamento della pagina. Un prodotto reale per le indagini dovrebbe aggiungere un endpoint di persistenza documentato e segnalare le risposte in sospeso o non riuscite prima di dichiarare persistente la raccolta salvata. ## Elastic UI Azioni accessibili nelle tabelle del sistema di design ### Assegna ai filtri un nome indipendente dai segnaposto La ricerca ha un nome accessibile e il gruppo di pulsanti fornisce una legenda per la gravità. Le colonne della tabella hanno intestazioni descrittive; l’azione di ogni riga è un EuiButtonEmpty nativo. EuiHealth include del testo, quindi il colore dello stato non è mai l’unica informazione disponibile. Mantieni queste caratteristiche quando sostituisci i dati di esempio. - Indica la gravità con parole visibili. - Mantieni la didascalia della tabella e i nomi delle colonne. - Associa lo stato salvato all’ID stabile dell’evento. ### Mantieni coerenti lo stato visivo e quello da tastiera Gli utenti possono portare il focus sulla ricerca, selezionare un filtro di gravità, raggiungere le azioni delle righe e attivare o disattivare l’impostazione dell’aspetto. L’anello di focus da 2px fa parte del riferimento del tema. Prova un insieme filtrato dopo aver salvato una riga e dopo aver cancellato il filtro: l’etichetta dell’azione e la statistica degli elementi salvati devono continuare a essere coerenti. ## Elastic UI Configurazione e integrazione del tema del sistema di design ### Installa le dipendenze peer documentate La guida ufficiale alla configurazione usa Yarn e indica Borealis, Emotion, datemath e moment tra le dipendenze richieste insieme a EUI. Questo esempio viene eseguito con React 18 e non racchiude l’albero in StrictMode. La configurazione seguente esplicita questi vincoli, invece di ereditare implicitamente React 19 da un’applicazione appena generata. ### Considera il file di ingresso completo come l’implementazione L’esempio seguente include il provider, il set di dati, lo stato controllato, i renderer delle colonne, i controlli dei filtri e l’entry point createRoot. Lo scaffold di Vite fornisce index.html. Questo esempio nativo è stato creato con esbuild e verificato nel browser; la guida ufficiale alla configurazione documenta le limitazioni di Vite e degli altri bundler non basati su Webpack. Verifica separatamente il bundler di produzione. ## Elastic UI Esempi di componenti del sistema di design ### main.jsx — esploratore di log nativo completo EuiProvider e Borealis supportano una tabella di eventi controllata, con filtri per gravità e ricerca e stato locale degli eventi salvati. ``` 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(); ``` Riferimento del codice - Salva come src/main.jsx nello scaffold React. Questo entry point non attiva intenzionalmente StrictMode. - La larghezza delimitata di 640px della tabella è una scelta applicativa CSS; tutti gli elementi visivi dei componenti provengono da EUI. ### Nota personalizzata che si adatta al tema Usa il tema attivo all’interno di un provider, invece di legare il markup personalizzato alle classi generate dei componenti. ``` import React from 'react'; import { useEuiTheme } from '@elastic/eui'; export function InvestigationNote({ children }) { const { euiTheme } = useEuiTheme(); return ; } ``` Riferimento del codice - Esegui il rendering di InvestigationNote all’interno di EuiProvider. La nota eredita la modalità visiva selezionata. ## Elastic UI Configurazione dell’agente per il sistema di design ### Punto di partenza per l’implementazione La guida ufficiale di EUI documenta l’installazione con Yarn e il supporto per React 18. I bundler non basati su Webpack presentano limitazioni documentate; questo specifico esempio nativo è stato creato con esbuild e verificato nel browser. Usa una versione di Node.js supportata dal tuo scaffold. ``` 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 ``` ### Un prompt per il tuo progetto ``` Crea una schermata per le indagini sui log con Elastic UI 123.0.0, Borealis 8.1.0 e React 18. Leggi l’esportazione del tema e il codice sorgente nativo forniti. Usa EuiProvider, un EuiBasicTable controllato e filtri accessibili per ricerca e gravità. Salva in base all’ID stabile dell’evento, mantieni i segnalibri tra un filtro e l’altro e distingui lo stato locale dell’interfaccia da una query reale a Elasticsearch o da una risposta di persistenza. Mantieni la tabella entro i limiti su dispositivi mobili. ``` ## Elastic UI Fonti e ambito del sistema di design Guida redatta da OpenDesign ed esploratore di log locale fittizio che esegue in modo nativo Elastic UI 123.0.0 con Borealis 8.1.0. Gli eventi di esempio non sono dati di telemetria in tempo reale e l’azione di salvataggio conserva i dati solo in memoria. EUI prevede le proprie opzioni di licenza Elastic/SSPL; per la distribuzione, consulta la licenza ufficiale del pacchetto. - Configurazione ufficiale Provider, installazione, dipendenze peer e supporto dell’ambiente. - Basic Table API Definizioni delle colonne, renderer e comportamento nativo della tabella. - Esportazione del tema Borealis Light Valori versionati usati in questo riferimento. - Codice sorgente e licenza di EUI Implementazione nativa e informazioni sulla licenza. ## Elastic UI Risorse correlate al sistema di design ### Emplifi Soul Esamina il contratto delle tabelle dati di Soul insieme alla spaziatura di sei pixel, ai ruoli cromatici su più livelli e alla tipografia Inter compatta. Confronta la selezione multipla, la notazione dei dati mancanti e le righe di riepilogo, quindi consulta i punti di accesso verificati del pacchetto privato React. ### Esri Calcite Una guida pratica a Calcite per strumenti spaziali progettati per un uso mirato: superfici semantiche e azioni blu, pannelli di ispezione compatti, API reali per gli input e un esempio completo, eseguibile in locale, per la revisione di un sito. ### GitLab Pajamas Una guida Pajamas per i flussi di lavoro tecnici: token semantici effettivi, tipografia e spaziatura fluide, un ispettore di pipeline a fasi, messaggi di errore leggibili e una simulazione esplicitamente locale dei nuovi tentativi. - [Riferimento per l’implementazione](https://eui.elastic.co/docs/components/tables/basic/) - [Fonte](https://cdn.jsdelivr.net/npm/@elastic/eui-theme-borealis@8.1.0/lib/eui_theme_borealis_light.json) - [Fonte](https://eui.elastic.co/docs/components/tables/basic/) - [Riferimento del codice](https://eui.elastic.co/docs/components/tables/basic/) - [Riferimento del codice](https://eui.elastic.co/docs/getting-started/setup/) - [Configurazione ufficiale Provider, installazione, dipendenze peer e supporto dell’ambiente.](https://eui.elastic.co/docs/getting-started/setup/) - [Basic Table API Definizioni delle colonne, renderer e comportamento nativo della tabella.](https://eui.elastic.co/docs/components/tables/basic/) - [Esportazione del tema Borealis Light Valori versionati usati in questo riferimento.](https://cdn.jsdelivr.net/npm/@elastic/eui-theme-borealis@8.1.0/lib/eui_theme_borealis_light.json) - [Codice sorgente e licenza di EUI Implementazione nativa e informazioni sulla licenza.](https://github.com/elastic/eui)