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