[!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.

    Blazor Grid Column Animations

    A Tabela de Dados/Grade de Dados do Ignite UI for Blazor 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 Blazor estiver definida, a animação correspondente será acionada para todas as células dessa coluna.

    Blazor 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 com que o cabeçalho da coluna e suas células deslizem da esquerda, direita, superior ou inferior. Também há opções para fazer com que ele apareça gradualmente, bem como deslize e apareça gradualmente.
    • ColumnExchangingAnimationMode: Quando uma coluna é trocada, você tem a opção de fazer com que o cabeçalho da coluna trocada e suas células deslizem para a esquerda, direita, superior ou inferior. Também existem opções para desvanecer, deslizar e desbotar.
    • ColumnHidingAnimationMode: Quando uma coluna está oculta, você tem a opção de fazer com que o cabeçalho da coluna e suas células deslizem para a esquerda, direita, superior ou inferior. Também há opções para que ele desapareça, bem como deslize e desapareça.
    • 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 é alterada, você tem a opção de fazer com que essa alteração de propriedade seja animada interpolando ou interpolando profundamente sua alteração.
    • ColumnShowingAnimationMode: Quando uma coluna é adicionada, você tem a opção de fazer com que o cabeçalho da coluna e suas células deslizem da esquerda, direita, superior ou inferior. Também há opções para fazer com que ele apareça gradualmente, bem como deslize e apareça gradualmente.

    Code Snippet

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

    <IgbDataGrid Height="100%" Width="100%"
    DataSource="DataSource"
    ColumnAddingAnimationMode="ColumnShowingAnimationMode.SlideFromLeft"
    ColumnExchangingAnimationMode="ColumnExchangingAnimationMode.SlideToRight"
    ColumnHidingAnimationMode="ColumnHidingAnimationMode.SlideToTopAndFadeOut"
    ColumnMovingAnimationMode="ColumnMovingAnimationMode.SlideOver"
    ColumnPropertyUpdatingAnimationMode="ColumnPropertyUpdatingAnimationMode.Interpolate"
    ColumnShowingAnimationMode="ColumnShowingAnimationMode.SlideFromBottomAndFadeIn" />

    API References