[!Note] Please note that this control has been deprecated and replaced with the Grid component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.

    Web Components Animações de coluna de grade

    A Tabela de Dados/Grade de Dados do Ignite UI for Web Components suporta Animação de Coluna durante eventos como Ocultação de Coluna ou Movimentação de Coluna. Quando a Animação da Coluna na grade de dados Web Components estiver definida, a animação correspondente será acionada para todas as células dessa coluna.

    Web Components Grid Column Animations Example

    Animation Properties

    Cada propriedade de animação de coluna é listada e descrita abaixo:

    • columnAddingAnimationMode: Quando uma coluna é adicionada, você tem a opção de fazer o cabeçalho da coluna e suas células deslizarem da esquerda, direita, de cima ou de baixo. Também há opções para fazê-lo aparecer gradualmente, bem como deslizar e aparecer gradualmente.
    • columnExchangingAnimationMode: Quando uma coluna é trocada, você tem a opção de fazer o cabeçalho da coluna trocada e suas células deslizarem para a esquerda, direita, para cima ou para baixo. Também há opções para fazê-lo desaparecer, bem como deslizar e desaparecer.
    • columnHidingAnimationMode: Quando uma coluna está oculta, você tem a opção de fazer o cabeçalho da coluna e suas células deslizarem para a esquerda, direita, para cima ou para baixo. Também há opções para fazê-lo desaparecer, bem como deslizar e desaparecer.
    • columnMovingAnimationMode: quando uma coluna é movida, você tem a opção de fazer com que o cabeçalho da coluna e suas células deslizem.
    • columnPropertyUpdatingAnimationMode: quando a propriedade de uma coluna muda, você tem a opção de animar essa mudança de propriedade interpolando ou interpolando profundamente sua mudança.
    • columnShowingAnimationMode: Quando uma coluna é adicionada, você tem a opção de fazer o cabeçalho da coluna e suas células deslizarem da esquerda, direita, de cima ou de baixo. Também há opções para fazê-lo aparecer gradualmente, bem como deslizar e aparecer gradualmente.

    Code Snippet

    A seguir, demonstramos a implementação de cada uma das animações de coluna descritas neste tópico:

    <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>

    API References