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';
}