Estilos y temas
La Grid Lite viene con cuatro temas distintos: Bootstrap, Material, Fluent e Indigo. La cuadrícula y sus componentes de interfaz tienen los temas integrados, pero el componente requiere una hoja de estilos global para que las paletas, la tipografía y otras configuraciones globales funcionen.
Loading a Base Themes
Dependiendo del tipo de proyecto, configuración y configuración de compilación, el método para incluir uno de los archivos que aparecen a continuación variará. Si usas un framework o herramienta de compilación, consulta su documentación sobre cómo añadir estilos externos a tu paquete de salida.
Como regla general, siempre puedes copiar lathemes carpeta a tu directorio de assets y enlazar el tema desde ahí en tu index.html.
| Tema | Variante | Camino |
|---|---|---|
| Oreja | Luz | node_modules/igniteui-webcomponents/themes/light/bootstrap.css |
| Oreja | Oscuro | node_modules/igniteui-webcomponents/themes/dark/bootstrap.css |
| Material | Luz | node_modules/igniteui-webcomponents/themes/light/material.css |
| Material | Oscuro | node_modules/igniteui-webcomponents/themes/dark/material.css |
| Fluido | Luz | node_modules/igniteui-webcomponents/themes/light/fluent.css |
| Fluido | Oscuro | node_modules/igniteui-webcomponents/themes/dark/fluent.css |
| Índigo | Luz | node_modules/igniteui-webcomponents/themes/light/indigo.css |
| Índigo | Oscuro | node_modules/igniteui-webcomponents/themes/dark/indigo.css |
En el ejemplo de abajo, puedes previsualizar todos los temas base por defecto.
Creating Custom Themes
Además de los temas predeterminados incluidos con el paquete Grid Lite, puedes personalizar aún más el aspecto y la sensación de tu red de datos usando un conjunto alternativo de propiedades personalizadas CSS.
Consulta el tema de temática para más detalles.
.grid-sample {
--header-background: #494949;
--header-text-color: #f2c43c;
--cell-active-border-color: #f2c43c;
--row-hover-background: #707070;
--row-hover-text-color: #f2c43c;
}
Aquí tienes un ejemplo que muestra la tematización personalizada que se ha visto arriba.
Additional Resources
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.