Tenga en cuenta que este control ha quedado obsoleto y reemplazado con el componente Grid y, como tal, recomendamos migrar a ese control. Esto no recibirá ninguna característica nueva, las correcciones de errores no tendrán prioridad. Para obtener ayuda o preguntas sobre la migración de su código base a Data Grid, comuníquese con el soporte.

    Web Components Animaciones de columnas de cuadrícula

    La tabla de datos Ignite UI for Web Components / cuadrícula de datos admite la animación de columnas durante eventos como la ocultación de columnas o el movimiento de columnas. Cuando se establece Animación de columna en la cuadrícula de datos de Web Components, la animación correspondiente se activará para todas las celdas de esa columna.

    Ejemplo de animaciones de columnas de cuadrícula de Web Components

    EXAMPLE
    DATA
    TS
    HTML
    CSS

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Propiedades de animación

    Cada propiedad de animación de columna se enumera y describe a continuación:

    • columnAddingAnimationMode: cuando se agrega una columna, tiene la opción de que el encabezado de la columna y sus celdas se deslicen desde la izquierda, derecha, arriba o abajo. También hay opciones para que aparezca gradualmente, así como para que se deslice y aparezca gradualmente.
    • columnExchangingAnimationMode: cuando se intercambia una columna, tiene la opción de que el encabezado de la columna intercambiada y sus celdas se deslicen hacia la izquierda, derecha, arriba o abajo. También hay opciones para que se desvanezca, así como para que se deslice y se desvanezca.
    • columnHidingAnimationMode: cuando una columna está oculta, tiene la opción de que el encabezado de la columna y sus celdas se deslicen hacia la izquierda, derecha, arriba o abajo. También hay opciones para que se desvanezca, así como para que se deslice y se desvanezca.
    • columnMovingAnimationMode: cuando se mueve una columna, tiene la opción de hacer que el encabezado de la columna y sus celdas se deslicen.
    • columnPropertyUpdatingAnimationMode: cuando la propiedad de una columna cambia, tiene la opción de animar ese cambio de propiedad interpolando o interpolando profundamente su cambio.
    • columnShowingAnimationMode: cuando se agrega una columna, tiene la opción de que el encabezado de la columna y sus celdas se deslicen desde la izquierda, derecha, arriba o abajo. También hay opciones para que aparezca gradualmente, así como para que se deslice y aparezca gradualmente.
    Ignite UI for Web Components | CTA Banner

    Fragmento de código

    A continuación se demuestra la implementación de cada una de las animaciones de columna descritas en este tema:

    <igc-data-grid id="grid"
          height="100%"
          width="100%"
          column-addingAnimation-mode="SlideToLeft"
          column-exchanging-animation-mode="SlideToRight"
          column-hiding-animation-mode="SlideToTopAndFadeOut"
          column-moving-animation-mode="SlideOver"
          column-property-updating-animation-mode="Interpolate"
          column-showing-animation-mode="SlideFromBottomAndFadeIn">
    </igc-data-grid>
    html

    Referencias de API