Theme React Data Grid

    Con el motor de temas React, la cuadrícula de Ignite UI for React se puede personalizar fácilmente para que coincida con la identidad de su marca. Además de los temas y paletas predefinidos, puede personalizar aún más el aspecto de la cuadrícula de datos mediante un conjunto de propiedades personalizadas de CSS.

    Available theming properties

    Nombre de la propiedad Tipo Descripción
    --elevación de cuadrícula número entre 0-24 El nivel de elevación que se utilizará para la cuadrícula.
    --arrastrar-elevación número entre 0-24 El nivel de elevación, que se utilizará para elementos móviles (por ejemplo, encabezado de columna)
    --color del área del grupo color El color del texto del área del grupo de cuadrícula.
    --fondo-área-grupo color El color del texto del área del grupo de cuadrícula.
    --color-texto-área-de-soltar color El color del texto del área de colocación
    --color-del-icono-del-área-de-soltar color El color del icono del área de colocación
    --fondo-área-de-soltación color El color de fondo del área de colocación
    --soltar-área-sobre-fondo-soltar color El fondo del área de colocación en el color de colocación
    --fondo del encabezado color El color de fondo del encabezado de la cuadrícula.
    --color-texto-encabezado color El color del texto del encabezado de la cuadrícula.
    --encabezado-fondo-seleccionado color El color de fondo del encabezado de la cuadrícula cuando se selecciona (por ejemplo, selección de columna).
    --color-de-texto-seleccionado-encabezado color El color del texto del encabezado de la cuadrícula cuando se selecciona (por ejemplo, selección de columna).
    --icono-encabezado-ordenable-color-al pasar el cursor color El color del icono al pasar el cursor sobre el encabezado de la cuadrícula cuando la columna se puede ordenar.
    --color-del-icono-del-encabezado-ordenado color El color del icono del encabezado de la tabla ordenada
    --ancho-borde-encabezado ancho del borde El ancho del borde utilizado para los bordes del encabezado.
    --estilo de borde de encabezado estilo de borde El estilo de borde utilizado para los bordes del encabezado. Puede ser "punteado", "discontinuo" o "sólido"
    --color-borde-encabezado color El color utilizado para los bordes del encabezado.
    --fondo-encabezado-fantasma color El color de fondo del encabezado arrastrado.
    --color-texto-encabezado-fantasma color El color del texto del encabezado arrastrado.
    --color-icono-encabezado-fantasma color El color del icono del encabezado arrastrado.
    --filtrado-de-fondo-y color El color de fondo de la condición "Y" de filtrado avanzado.
    --filtrado-de-fondo-o color El color de fondo en el foco/seleccionado de la condición "Y" de filtrado avanzado.
    --filtrado-de-fondo-y-enfoque color El color de fondo de la condición "O" de filtrado avanzado.
    --filtrado-de-fondo-o-enfoque color El color de fondo en el foco/seleccionado de la condición "O" de filtrado avanzado.
    --grid-borde-color color El color del borde que rodea la cuadrícula.
    --contenido-fondo color El color de fondo del cuerpo de la cuadrícula.
    --contenido-texto-color color El color del texto del cuerpo de la cuadrícula.
    --fila-fondo-impar color El color de fondo de las filas impares.
    --fila-par-fondo color El color de fondo de las filas pares.
    --fila-color-texto-impar color El color del texto de las filas impares.
    --fila-par-texto-color color El color del texto de las filas pares.
    --fondo-fila-seleccionada color El color de fondo de la fila seleccionada.
    --color-de-texto-de-fila-filtrado-seleccionado-de-árbol color El color del texto de la fila seleccionada/filtrada
    --fila-color-texto-seleccionado color El color del texto de la fila seleccionada.
    --celda-seleccionada-en-fondo- color El fondo de la celda seleccionada dentro de una fila/columna seleccionada.
    --celda-seleccionada-dentro-del-color-del-texto color El color de la celda seleccionada dentro de una fila/columna seleccionada.
    --fila-seleccionada-fondo-al pasar el cursor color El fondo de desplazamiento de la fila seleccionada.
    --fila-seleccionada-color-del-texto-al pasar el cursor color El texto al pasar el cursor sobre la fila seleccionada
    --fila-sobre-fondo color El color de fondo de la fila flotante.
    --fila-hover-color-texto color El color del texto de la fila flotante.
    --color-borde-fila color El color del borde entre las filas del cuerpo de la cuadrícula.
    --ancho-de-borde-fijado ancho del borde El ancho del borde de las filas/columnas ancladas.
    --estilo de borde fijado estilo de borde El estilo de borde de las filas/columnas ancladas. Puede ser "punteado", "discontinuo" o "sólido"
    --color-borde-fijado color El color del borde de las filas/columnas ancladas.
    --color-borde-activo-de-celda color El color del borde de la celda activa (enfocada).
    --fondo-celda-seleccionada color El color de fondo de la celda seleccionada.
    --color-de-texto-de-celda-filtrado-seleccionado-de-árbol color El color del texto de la celda seleccionada/filtrada
    --color-de-texto-celda-seleccionada color El color del texto de la celda seleccionada.
    --fondo-de-edición-de-celdas color El color de fondo de una celda en modo de edición.
    --modo-edición-color color El color del texto en modo edición.
    --indicador-de-fila-editado color El color del indicador de la fila editada.
    --celda-nuevo-color color El color del texto de una celda nueva sin editar. Se utiliza al agregar una nueva fila en una cuadrícula.
    --color-valor-editado-de-celda color El color del valor editado de la celda.
    --color-celda-deshabilitada color El color del texto de una celda deshabilitada.
    --cambiar tamaño-color-línea color El color de la línea de cambio de tamaño del encabezado de la cuadrícula.
    --color-indicador-de-caída color El color del indicador de caída.
    --etiqueta-grupo-nombre-columna-texto color El color del texto del nombre de la columna de la fila del grupo de cuadrícula.
    --icono de etiqueta de grupo color El color del icono de la fila del grupo de cuadrícula.
    --texto-etiqueta-grupo color El color del texto de la fila del grupo de cuadrícula.
    --expandir-todo-icono-color color El encabezado de la cuadrícula expande el color del icono de todas las filas del grupo.
    --expandir-todo-icono-desplazar el color color El encabezado de la cuadrícula expande el color del icono de todas las filas del grupo.
    --expandir-icono-color color La fila de la cuadrícula expande el color del icono.
    --expandir-icono-color-al pasar el cursor color La fila de la cuadrícula expande el color del icono de expansión.
    --color-icono-expandir-activo color El fondo del área de colocación en el color de colocación.
    --icono-expandir-activo-color-al pasar el cursor color El fondo del área de colocación en el color de colocación.
    --fondo-de-recuento-de-grupo color El color de fondo de la insignia de la fila del grupo de cuadrícula continúa.
    --color-de-texto-conteo-de-grupo color El color del texto de la insignia de la fila del grupo de cuadrícula.
    --fondo-fila-grupo color El color de fondo de la fila del grupo de cuadrícula.
    --grupo-fila-fondo-seleccionado color El fondo del área de colocación en el color de colocación.
    --filtrado-encabezado-fondo color El color de fondo del encabezado de la columna filtrada.
    --filtrado-color-texto-encabezado color El color del texto del encabezado de la columna filtrada.
    --filtrado-fila-fondo color El color de fondo de la fila de filtrado.
    --filtrado-fila-texto-color color El color del texto de la fila de filtrado.
    --color-de-texto-filtrado-de-árbol color El color de fondo de la fila de agrupación enfocado.
    --resúmenes-del-cuerpo-antecedentes color El color de fondo de los grupos de resumen ubica el cuerpo.
    --resúmenes-del-cuerpo-color-del-texto color El color del texto de los grupos de resumen ubicados en el cuerpo.
    --resúmenes-de-raíz-antecedentes color El color de fondo de los grupos de resumen ubicados en el pie de página.
    --resúmenes-raíz-color-texto color El color del texto de los grupos de resumen ubicados en el pie de página.
    --resaltado de fila color El color de resaltado de la fila de la cuadrícula.
    --fila-fondo-fantasma color El color de fondo de la fila arrastrada.
    --fila-arrastrar-color color El color del controlador de arrastre.
    --soltar-área-borde-radio número entre 0 y 1 El radio del borde utilizado para el área de colocación. Puede ser una fracción entre 0 y 1, píxeles o porcentaje.

    How to use

    Como se mencionó anteriormente, el uso de las variables CSS de la tabla nos permite diseñar nuestra cuadrícula. Digamos que queremos cambiar la cuadrícula para usar un tema oscuro, cambiando el siguiente fondo del encabezado y los colores del texto, etc., podemos hacerlo así en un archivo llamado opcionalmente dark-theme.css.

    importar "./tema-oscuro.css";

    .ig-data-grid {
      /* shared variables used in custom properties */
      --cell-text-color:#58258b;
      --cell-background:#191919;
      --cell-selected-background: #58258b;
      --cell-selected-within-text-color: #191919;
      --cell-selected-within-background: #58258b;
    
      --row-selected-background:var(--cell-selected-background);
      --row-hover-background:var(--cell-selected-background);
      --row-hover-text-color:var(--cell-background);
    
      --header-background: #58258b;
      --header-text-color: #191919;
      --header-separator-background: #58258b;
      --header-separator-width: 5px;
    
      --section-header-background: #191919;
      --section-header-text-color: #58258b;
      --section-header-selected-background: #58258b;
      --section-header-selected-text-color: #191919;
    
      --row-separator-background: #191919;
      --row-separator-last-sticky-row-background: #191919;
      --row-separator-pinned-row-background: #58258b;
      --row-separator-sticky-row-background: #58258b;
    
      --column-resizing-separator-background: #58258b;
      --column-moving-separator-background: #58258b;
    
    
      --filtering-header-background: #272727;
      --filtering-header-text-color: #ffffff;
      --filtering-row-background: #272727;
      --filtering-row-text-color: #ffffff;
      --tree-filtered-text-color: #ffffff;
    
      --summary-root-background: #7446b9;
      --summary-root-label-text-color: #191919;
      --summary-root-value-text-color: #191919;
    }
    
    .ig-grid-column-options {
      --background-color: black;
      --text-color: #7446b9;
      --summary-list-text-color: #7446b9;
      --summary-list-background: #191919;
    }
    
    .ig-data-grid-toolbar {
      --background-color: #191919;
      --text-color: #58258b;
      --dialog-background-color: #191919;
    }
    
    .ig-column-chooser {
      --background-color: #191919;
      --title-color: green;
      --select-all-caption-text-color: #58258b;
      --search-icon-color: #58258b;
      --search-text-color: #58258b;
      --search-background-color: #191919;
      --search-border-color: #58258b;
      --search-text-style: 12px 'Courier';
    }
    
    .ig-column-pinning {
      --background-color: white;
      --text-color: #7446b9;
      --select-all-caption-text-color: #58258b;
      --search-icon-color: #58258b;
      --search-text-color: #58258b;
      --search-background-color: #191919;
      --search-border-color: #58258b;
      --search-text-style: 12px 'Courier';
    }