Selección de columnas de cuadrícula Angular
La función de selección de columnas proporciona una manera fácil de seleccionar una columna completa con un solo clic. Enfatiza la importancia de una columna en particular al enfocarse en las celdas del encabezado y todo lo que se encuentra debajo. La función viene con una API
enriquecida que permite la manipulación del estado de selección, la extracción de datos de las fracciones seleccionadas y operaciones y visualizaciones de análisis de datos.
Angular Column Selection Example
El siguiente ejemplo demuestra los tres tipos de comportamiento de selección de columnas de Grid. Utilice el menú desplegable de selección de columnas a continuación para habilitar cada uno de los modos de selección disponibles.
* Las columnas Título de contacto, Ciudad y Dirección tienen la selección de columna deshabilitada.
Basic usage
La función de selección de columnas se puede habilitar a través de la entrada columnSelection
, que toma valores de GridSelectionMode.
Interacciones
El modo de selección predeterminado es none
. Si se establece en single
o multiple
todas las columnas presentadas serán selectable
. Dicho esto, para poder seleccionar una columna simplemente debemos hacer clic en una, lo que la marcará como selected
. Si la columna no se puede seleccionar, no se aplicará ningún estilo de selección en el encabezado mientras se desplaza el cursor.
Note
Multi-column Headers
no se reflejan en la entrada selectable
. El IgxColumnGroupComponent
es selectable
si al menos uno de sus hijos tiene habilitado el comportamiento de selección. Además, el componente se marca como selected
si todos sus descendientes selectable
están selected
.
*En Grupo de columnas de información del país, solo se pueden seleccionar la columna Ciudad y Código postal.
Keyboard combinations
Note
Las combinaciones de teclado están disponibles solo cuando la entrada columnSelection
de la cuadrícula está configurada en multiple
.
Hay dos escenarios para la navegación con el teclado de la función Selección de columnas:
- Selección de varias columnas: mantenga presionado Ctrl + clic en cada celda del encabezado seleccionable.
- Selección de columnas de rango: al mantener presionada la tecla Mayús + clic se seleccionan todas las columnas seleccionables intermedias.
API manipulations
La API proporciona algunas capacidades adicionales cuando se trata de columnas no visibles, de modo que cada columna oculta se puede marcar como selected
configurando el definidor correspondiente.
Note
La declaración anterior también se aplica a IgxColumnGroupComponent
, excepto que cuando se cambia la propiedad selected
, cambia el estado de sus descendientes.
Puede encontrar más información sobre las manipulaciones de API en la sección API References
.
Estilismo
Antes de sumergirse en las opciones de estilo, es necesario importar el módulo principal y todos los mixins de componentes.
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
Note
Tenga en cuenta que row selection
y column selection
no se pueden manipular de forma independiente. Dependen de las mismas variables
.
Dicho esto, sigamos adelante y cambiemos los estilos de selección y desplazamiento.
Siguiendo el enfoque más simple, definamos nuestro tema personalizado.
$custom-grid-theme: grid-theme(
$row-selected-background: #011627,
$row-selected-text-color: #ECAA53,
$row-selected-hover-background: #011627,
$header-selected-text-color: #ECAA53,
$header-selected-background: #011627
);
grid-theme
acepta varios parámetros pero esos son los cinco responsables de cambiar la apariencia de todas las columnas seleccionadas:
- $row-selected-background: establece el fondo de la fracción seleccionada.
- $row-selected-text-color: establece el color del texto de la fracción seleccionada
- $row-selected-hover-background: establece el color de la celda o grupo de celdas sobre las que se encuentra.
- $header-selected-text-color: establece el color del texto del encabezado de la columna seleccionada
- $header-selected-background: establece el color de fondo del encabezado de la columna seleccionada.
Using CSS Variables
El último paso es incluir el tema igx-grid
personalizado.
@include css-vars($custom-grid-theme)
Overriding the Base Theme
Para diseñar componentes para Internet Explorer 11, tenemos que utilizar un enfoque diferente, ya que no admite variables CSS.
Note
Si el componente utiliza Emulated
ViewEncapsulation, es necesario penetrate
esta encapsulación usando::ng-deep
. Para evitar que el tema personalizado se filtre a otros componentes, asegúrese de haber incluido el selector:host
antes de::ng-deep
.
:host {
::ng-deep {
@include grid($custom-column-selection-theme);
}
}
Demo
Note
La muestra no se verá afectada por el tema global seleccionado en Change Theme
.
API References
La interfaz de usuario de selección de columnas tiene algunas API más para explorar, que se enumeran a continuación.IgxGridComponent
properties:
- columnaSelección
- columnas seleccionadas
- seleccionar columnas
- deseleccionar columnas
- seleccionar todas las columnas
- anular la selección de todas las columnas
IgxColumnComponent
properties:
IgxColumnGrpupComponent
properties:
IgxGridComponent
events:
Additional Resources
- Descripción general de la cuadrícula
- Selección
- Selección de celda
- Paginación
- Filtración
- Clasificación
- resúmenes
- Columna en movimiento
- Fijación de columnas
- Cambio de tamaño de columna
- Virtualización y rendimiento