# Sistema de diseño Elastic UI ## Elastic UI Vista previa de la interfaz del sistema de diseño Filtra el flujo de eventos por mensaje o nivel de gravedad, guarda eventos individuales, borra los resultados y alterna entre la apariencia clara y la oscura. ## Elastic UI Referencia de diseño del sistema de diseño Elastic UI 123.0.0 con el tema Borealis 8.1.0 y React 18.3.1. Las tablas usan los nombres del JSON publicado del tema; son claves de exportación, no rutas literales del objeto useEuiTheme. La vista previa real usa el tema nativo de React API. ### Colores semánticos de Borealis | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | euiColorPrimary | light: #0B64DD; dark: #61A2FF | Nombres publicados en la exportación del tema. En React, utiliza useEuiTheme para aplicar el rol semántico correspondiente en lugar de codificar estos valores directamente. | | euiColorSuccess | light: #008A5E; dark: #24C292 | Nombres publicados en la exportación del tema. En React, utiliza useEuiTheme para aplicar el rol semántico correspondiente en lugar de codificar estos valores directamente. | | euiColorWarning | light: #FACB3D; dark: #FACB3D | Nombres publicados en la exportación del tema. En React, utiliza useEuiTheme para aplicar el rol semántico correspondiente en lugar de codificar estos valores directamente. | | euiColorDanger | light: #C61E25; dark: #F6726A | Nombres publicados en la exportación del tema. En React, utiliza useEuiTheme para aplicar el rol semántico correspondiente en lugar de codificar estos valores directamente. | | euiColorEmptyShade | light: #FFFFFF; dark: #111C2C | Nombres publicados en la exportación del tema. En React, utiliza useEuiTheme para aplicar el rol semántico correspondiente en lugar de codificar estos valores directamente. | | euiColorFullShade | light: #07101F; dark: #FFFFFF | Nombres publicados en la exportación del tema. En React, utiliza useEuiTheme para aplicar el rol semántico correspondiente en lugar de codificar estos valores directamente. | | euiPageBackgroundColor | light: #ECF1F9; dark: #07101F | Nombres publicados en la exportación del tema. En React, utiliza useEuiTheme para aplicar el rol semántico correspondiente en lugar de codificar estos valores directamente. | | euiTextColor | light: #384861; dark: #B4C1D5 | Nombres publicados en la exportación del tema. En React, utiliza useEuiTheme para aplicar el rol semántico correspondiente en lugar de codificar estos valores directamente. | | euiTextSubduedColor | light: #516381; dark: #98A8C3 | Nombres publicados en la exportación del tema. En React, utiliza useEuiTheme para aplicar el rol semántico correspondiente en lugar de codificar estos valores directamente. | ### Escala de espaciado | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | euiSizeXS | 4px | Usa tamaños equivalentes de EuiSpacer/FlexGroup para mantener el ritmo de la composición; la unidad base es 16px en esta exportación del tema. | | euiSizeS | 8px | Usa tamaños equivalentes de EuiSpacer/FlexGroup para mantener el ritmo de la composición; la unidad base es 16px en esta exportación del tema. | | euiSizeM | 12px | Usa tamaños equivalentes de EuiSpacer/FlexGroup para mantener el ritmo de la composición; la unidad base es 16px en esta exportación del tema. | | euiSize | 16px | Usa tamaños equivalentes de EuiSpacer/FlexGroup para mantener el ritmo de la composición; la unidad base es 16px en esta exportación del tema. | | euiSizeL | 24px | Usa tamaños equivalentes de EuiSpacer/FlexGroup para mantener el ritmo de la composición; la unidad base es 16px en esta exportación del tema. | | euiSizeXL | 32px | Usa tamaños equivalentes de EuiSpacer/FlexGroup para mantener el ritmo de la composición; la unidad base es 16px en esta exportación del tema. | | euiSizeXXL | 40px | Usa tamaños equivalentes de EuiSpacer/FlexGroup para mantener el ritmo de la composición; la unidad base es 16px en esta exportación del tema. | ### Tipografía | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | euiFontSizeXS | 12px | Referencia tipográfica publicada. Usa las variantes de EuiText/EuiTitle para establecer la jerarquía de componentes. | | euiFontSizeS | 14px | Referencia tipográfica publicada. Usa las variantes de EuiText/EuiTitle para establecer la jerarquía de componentes. | | euiFontSize | 14px | Referencia tipográfica publicada. Usa las variantes de EuiText/EuiTitle para establecer la jerarquía de componentes. | | euiFontSizeM | 16px | Referencia tipográfica publicada. Usa las variantes de EuiText/EuiTitle para establecer la jerarquía de componentes. | | euiFontSizeL | 20px | Referencia tipográfica publicada. Usa las variantes de EuiText/EuiTitle para establecer la jerarquía de componentes. | | euiFontSizeXL | 24px | Referencia tipográfica publicada. Usa las variantes de EuiText/EuiTitle para establecer la jerarquía de componentes. | | euiFontSizeXXL | 30px | Referencia tipográfica publicada. Usa las variantes de EuiText/EuiTitle para establecer la jerarquía de componentes. | | euiLineHeight | 1.5 | Referencia tipográfica publicada. Usa las variantes de EuiText/EuiTitle para establecer la jerarquía de componentes. | ### Bordes y formas | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | euiBorderWidthThin | 1px | Distingue entre formas en línea, de controles, paneles y marcos; un único radio de esquina universal borraría la jerarquía. | | euiBorderWidthThick | 2px | Distingue entre formas en línea, de controles, paneles y marcos; un único radio de esquina universal borraría la jerarquía. | | euiBorderColor | #E3E8F2 | Distingue entre formas en línea, de controles, paneles y marcos; un único radio de esquina universal borraría la jerarquía. | | euiBorderRadiusInline | 4px | Distingue entre formas en línea, de controles, paneles y marcos; un único radio de esquina universal borraría la jerarquía. | | euiBorderRadiusControl | 8px | Distingue entre formas en línea, de controles, paneles y marcos; un único radio de esquina universal borraría la jerarquía. | | euiBorderRadiusPanel | 12px | Distingue entre formas en línea, de controles, paneles y marcos; un único radio de esquina universal borraría la jerarquía. | | euiBorderRadiusFrame | 16px | Distingue entre formas en línea, de controles, paneles y marcos; un único radio de esquina universal borraría la jerarquía. | ### Foco y movimiento | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | euiFocusRingSize | 2px | Mantén el comportamiento nativo del foco y del movimiento en lugar de sobrescribir los selectores internos .eui. | | euiFocusBackgroundColor | #ECF1F9 | Mantén el comportamiento nativo del foco y del movimiento en lugar de sobrescribir los selectores internos .eui. | | euiAnimSpeedExtraFast | 90ms | Mantén el comportamiento nativo del foco y del movimiento en lugar de sobrescribir los selectores internos .eui. | | euiAnimSpeedFast | 150ms | Mantén el comportamiento nativo del foco y del movimiento en lugar de sobrescribir los selectores internos .eui. | | euiAnimSpeedNormal | 250ms | Mantén el comportamiento nativo del foco y del movimiento en lugar de sobrescribir los selectores internos .eui. | | euiAnimSpeedSlow | 350ms | Mantén el comportamiento nativo del foco y del movimiento en lugar de sobrescribir los selectores internos .eui. | ### Contrato nativo de API en este explorador | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | EuiProvider | colorMode="light" \| "dark" | Proporciona el contexto del tema y los estilos de Emotion. | | useEuiTheme | { euiTheme } | Resuelve los colores semánticos de los elementos personalizados y EuiHealth. | | EuiBasicTable | items · itemId · columns | Representa la colección visible controlada mediante ID estables. | | EuiFieldSearch | value · onChange · incremental | La aplicación filtra una colección local de seis eventos. | | EuiButtonGroup | options · idSelected · onChange | Filtro de gravedad controlado con una leyenda visible. | | EuiHealth | color + readable child label | Un punto de estado complementa la palabra que indica la gravedad, no la sustituye. | ## Elastic UI Guía completa del sistema de diseño Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real. Orientación completa, un punto de partida para la implementación y enlaces al código fuente. ## Elastic UI Estructura del explorador del sistema de diseño ### Un espacio de trabajo de investigación, no un panel genérico > El ejemplo incluye tres estadísticas resumidas compactas y un único flujo de eventos. Un campo de búsqueda y un grupo de niveles de gravedad permiten acotar el flujo; cada fila ofrece una acción para guardar el evento de forma independiente. Colocar la acción junto a su evento permite recopilar información sin salir del contexto filtrado. El resumen cuenta explícitamente eventos de ejemplo y no afirma mostrar tráfico en tiempo real. ### Usa el límite del tema actual Este ejemplo combina EUI 123.0.0 con Borealis 8.1.0. Los valores de referencia proceden de ese tema publicado, no de una captura de pantalla antigua de Amsterdam. EuiProvider controla el modo visual y el contexto de estilos. El estado de la aplicación no forma parte de ningún cálculo del tema, así que cambiar la apariencia no restablece los eventos guardados ni la consulta actual. ## Elastic UI Roles semánticos de color del sistema de diseño ### Aplica la gravedad como una relación con significado En esta aplicación, Info usa el rol primario, Warning el rol de advertencia y Error el rol de peligro. EuiHealth muestra la palabra que indica la gravedad junto al punto. Esta correspondencia es una política de la aplicación; no implica que todos los elementos de color primario representen una gravedad informativa. Los recuentos de errores y las etiquetas de eventos siguen necesitando texto legible. ### Obtener los colores del tema activo La pantalla usa useEuiTheme y los colores resueltos para el lienzo, el texto del cuerpo y los indicadores de estado. Las tablas de exportación incluyen valores emparejados para los modos claro y oscuro, de modo que la diferencia sea visible. No copies un único valor hexadecimal en ambos modos ni apuntes a los nombres de clase de Emotion generados para forzar una coincidencia. ## Elastic UI Tipografía y jerarquía numérica del sistema de diseño ### Da contexto a las estadísticas antes de destacar las cifras EuiStat acompaña los 6 eventos de muestra, el 1 evento de error y el recuento de elementos guardados con descripciones. La cifra por sí sola sería ambigua. EuiTitle introduce la investigación, mientras que EuiText indica el intervalo de tiempo y aclara que se trata de datos de muestra. El encabezado del flujo es un título de menor nivel, no un segundo título de página. ### Mantén legible el texto de los registros en una disposición compacta Borealis usa una base de 14px y una referencia de interlineado de 1.5, además de los tamaños tipográficos de 12/16/20/24/30px. Las marcas de tiempo y los nombres de los servicios tienen columnas predecibles, mientras que el mensaje del evento dispone de un ancho flexible. El ejemplo usa las fuentes del sistema disponibles mediante la pila nativa y no afirma que cargue de forma remota un recurso de Inter. ## Elastic UI Tabla básica y filtros controlados del sistema de diseño ### Separa la presentación del filtrado EuiBasicTable recibe los elementos ya filtrados. Las columnas definen un campo o un renderizador personalizado, e itemId usa el ID estable del evento. EuiFieldSearch actualiza el estado de la consulta; EuiButtonGroup actualiza el ID de gravedad seleccionado. La aplicación combina ambos predicados antes de pasar la colección visible a la tabla. 1. Escribe el nombre de un servicio o un fragmento del mensaje. 2. Elige Error o Warning para combinarlo con un predicado de gravedad. 3. Guarda un evento coincidente con la acción de su fila. 4. Borra los filtros y comprueba que el evento guardado siga marcado. ### Guarda por identidad del evento, no por posición de fila La acción Guardar evento alterna un ID dentro de un conjunto local. Ordenar o filtrar nunca debería hacer que un marcador señale otro evento porque haya cambiado su posición en el arreglo. El ejemplo muestra Guardado localmente en el mensaje y cambia la acción a Quitar de guardados, para dejar claro que la operación se puede revertir. ## Elastic UI Espaciado y datos adaptables del sistema de diseño ### Usa la escala de espaciado nativa en todos los grupos Los tamaños publicados son 4, 8, 12, 16, 24, 32 y 40px. EuiSpacer y EuiFlexGroup proporcionan el espacio entre las estadísticas resumidas, los filtros y la tabla de eventos. EuiPanel aporta la forma del contenedor; el tema distingue su radio de panel de 12px de los radios de 8px de los controles y de 16px del marco. ### Mantén la página dentro del área visible en dispositivos móviles Los grupos de resumen y filtros se reorganizan mediante el comportamiento nativo de FlexGroup. La tabla se encuentra dentro de una región de desplazamiento horizontal acotada, con un ancho mínimo de aplicación de 640px, lo que conserva las relaciones entre la marca de tiempo, el mensaje y la acción sin desbordar toda la página. En una tabla de producción se pueden elegir las opciones documentadas de tablas adaptables según sus columnas reales. ## Elastic UI Búsqueda y estados vacíos y de elementos guardados del sistema de diseño ### Una búsqueda sin resultados ofrece una acción directa para recuperarse Una consulta sin coincidencias muestra No hay eventos que coincidan con los filtros actuales y una acción Borrar filtros. Al restablecer la consulta y la gravedad, se recuperan los seis eventos de muestra sin alterar los ID guardados. El recuento encima de la tabla comunica el total de eventos coincidentes mediante una región activa cortés. ### Un guardado local no equivale a un flujo de trabajo de incidentes Guardar un evento cambia la etiqueta visible de la fila y la estadística de elementos guardados. No se conecta a Elasticsearch, no crea un incidente ni persiste tras actualizar la página. Un producto real de investigación debería añadir un endpoint de persistencia documentado e informar de las respuestas pendientes o fallidas antes de afirmar que la colección guardada es duradera. ## Elastic UI Acciones accesibles de tabla del sistema de diseño ### Asigna a los filtros nombres independientes de los textos de marcador La búsqueda tiene un nombre accesible y el grupo de botones incluye una leyenda de gravedad. Las columnas de la tabla tienen encabezados descriptivos; la acción de cada fila es un EuiButtonEmpty nativo. EuiHealth incluye texto, por lo que el color del estado nunca es la única fuente de información. Conserva estos contratos al sustituir los datos de muestra. - Usa palabras visibles para indicar la gravedad. - Conserva el título de la tabla y los nombres de las columnas. - Asocia el estado guardado con el ID estable del evento. ### Mantén juntos el estado visual y el del teclado Los usuarios pueden enfocar la búsqueda, seleccionar un filtro de gravedad, acceder a las acciones de las filas y alternar la configuración de apariencia. El anillo de foco de 2px forma parte de la referencia del tema. Prueba un conjunto filtrado después de guardar una fila y de borrar el filtro; la etiqueta de la acción y la estadística de elementos guardados deben seguir coincidiendo. ## Elastic UI Configuración e integración del tema del sistema de diseño ### Instala las dependencias entre pares documentadas La guía de configuración oficial usa Yarn e incluye Borealis, Emotion, datemath y moment junto con EUI. Este ejemplo ejecuta React 18 y no envuelve el árbol en StrictMode. La configuración siguiente explicita esas restricciones en lugar de heredar en silencio React 19 de una aplicación recién generada. ### Considera el archivo de entrada completo como la implementación El ejemplo siguiente contiene el proveedor, el conjunto de datos, el estado controlado, los renderizadores de columnas, los controles de filtro y la entrada createRoot. El entorno de Vite proporciona index.html. Este ejemplo nativo se empaquetó con esbuild y se comprobó en el navegador; la guía de configuración oficial documenta las salvedades de Vite y otros empaquetadores que no son Webpack. Comprueba por separado tu empaquetador de producción. ## Elastic UI Ejemplos de componentes del sistema de diseño ### main.jsx — explorador de registros nativo completo EuiProvider y Borealis permiten usar una tabla de eventos controlada con filtros de gravedad y búsqueda, y el estado local de los eventos guardados. ``` 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(); ``` Referencia de código - Guárdalo como src/main.jsx en el entorno de React. Esta entrada no activa StrictMode de forma intencionada. - El ancho acotado de la tabla de 640px es propio de la aplicación CSS; todos los elementos visuales de los componentes proceden de EUI. ### Nota personalizada adaptada al tema Usa el tema activo dentro de un proveedor en lugar de vincular el marcado personalizado a las clases generadas de los componentes. ``` import React from 'react'; import { useEuiTheme } from '@elastic/eui'; export function InvestigationNote({ children }) { const { euiTheme } = useEuiTheme(); return ; } ``` Referencia de código - Renderiza InvestigationNote dentro de EuiProvider. La nota hereda el modo visual seleccionado. ## Configuración del agente de diseño sistema de diseño Elastic UI ### Punto de partida para la implementación La guía oficial de EUI documenta la instalación con Yarn y la compatibilidad con React 18. Los empaquetadores que no son Webpack tienen limitaciones documentadas; este ejemplo nativo en concreto se empaquetó con esbuild y se probó en el navegador. Usa una versión de Node.js compatible con tu 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 ``` ### Una instrucción para tu proyecto ``` Crea una pantalla para investigar registros con Elastic UI 123.0.0, Borealis 8.1.0 y React 18. Lee la exportación del tema y el código fuente nativo proporcionados. Usa EuiProvider, un EuiBasicTable controlado y filtros accesibles de búsqueda y gravedad. Guarda por ID de evento estable, conserva los marcadores al filtrar y distingue el estado local de la interfaz de una consulta real a Elasticsearch o de una respuesta de persistencia. Mantén la tabla dentro de los límites de la pantalla en dispositivos móviles. ``` ## Fuentes y alcance del sistema de diseño Elastic UI Guía creada con OpenDesign y explorador de registros local ficticio que ejecuta Elastic UI 123.0.0 nativo con Borealis 8.1.0. Los eventos de ejemplo no son telemetría en tiempo real y la acción de guardar solo se mantiene en memoria. EUI tiene sus propias condiciones de licencia Elastic/SSPL; consulta la licencia oficial del paquete para tu distribución. - Configuración oficial Proveedor, instalación, dependencias pares y compatibilidad del entorno. - EuiBasicTable API Definiciones de columnas, funciones de renderizado y comportamiento nativo de la tabla. - Exportación del tema claro Borealis Valores versionados usados en esta referencia. - Código fuente y licencia de EUI Información sobre la implementación nativa y la licencia. ## Recursos relacionados con el sistema de diseño Elastic UI ### Emplifi Soul Consulta el contrato de tabla de datos de Soul junto con su espaciado de seis píxeles, sus funciones de color por capas y su tipografía Inter compacta. Compara la selección múltiple, la notación de datos ausentes y las filas de resumen; después, examina los puntos de entrada verificados del paquete privado de React. ### Esri Calcite Una referencia práctica de Calcite para herramientas espaciales que requieren precisión: superficies semánticas y acciones azules, paneles de inspección compactos, API reales para entradas y un ejemplo completo de revisión local de sitios. ### GitLab Pajamas Una guía de Pajamas para flujos de trabajo técnicos: tokens semánticos reales, tipografía y espaciado fluidos, un inspector de canalización por etapas, mensajes de error fáciles de leer y una simulación de reintento explícitamente local. - [Referencia de implementación](https://eui.elastic.co/docs/components/tables/basic/) - [Fuente](https://cdn.jsdelivr.net/npm/@elastic/eui-theme-borealis@8.1.0/lib/eui_theme_borealis_light.json) - [Fuente](https://eui.elastic.co/docs/components/tables/basic/) - [Referencia de código](https://eui.elastic.co/docs/components/tables/basic/) - [Referencia de código](https://eui.elastic.co/docs/getting-started/setup/) - [Configuración oficial Proveedor, instalación, dependencias pares y compatibilidad del entorno.](https://eui.elastic.co/docs/getting-started/setup/) - [EuiBasicTable API Definiciones de columnas, funciones de renderizado y comportamiento nativo de la tabla.](https://eui.elastic.co/docs/components/tables/basic/) - [Exportación del tema claro Borealis Valores versionados usados en esta referencia.](https://cdn.jsdelivr.net/npm/@elastic/eui-theme-borealis@8.1.0/lib/eui_theme_borealis_light.json) - [Código fuente y licencia de EUI Información sobre la implementación nativa y la licencia.](https://github.com/elastic/eui)