Disable Blazor Tabs Animation effect

[Linqing Shangguan]

Hello, 

Is there any way to disable EjsTab animations when switch between tabs please? 

Many thanks

Linqing

[Alagumeena Kalaiselvan]

Hi Linqing, 

Greetings from Syncfusion support! 

We have validated your reported query “Disable Blazor Tabs Animation Effect” and you can disable the animation by setting the animation Effect as None. We have prepared a sample based on your requirement and refer the below code for that. 

@using Syncfusion.EJ2.Blazor.Navigations 

 

<EjsTab> 

    <TabAnimationSettings> 

        <TabAnimationPrevious Effect="None"></TabAnimationPrevious> 

        <TabAnimationNext Effect="None"></TabAnimationNext> 

    </TabAnimationSettings> 

    <TabItems> 

        <TabItem Content="@Content1"> 

            <ChildContent> 

                <TabHeader Text="Twitter"></TabHeader> 

            </ChildContent> 

        </TabItem> 

        <TabItem Content="@Content2"> 

            <ChildContent> 

                <TabHeader Text="Facebook"></TabHeader> 

            </ChildContent> 

        </TabItem> 

        <TabItem Content="@Content3"> 

            <ChildContent> 

                <TabHeader Text="WhatsApp"></TabHeader> 

            </ChildContent> 

        </TabItem> 

    </TabItems> 

</EjsTab> 

 

@code{ 

    public string Content1 = "Twitter is an online social networking service that enables users to send and read short 140-character " + 

            "messages called 'tweets'."; 

    public string Content2 = "Facebook is an online social networking service headquartered in Menlo Park, California. Its website was " + 

            "launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo " + 

            "Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes."; 

    public string Content3 = "WhatsApp Messenger is a proprietary cross-platform instant messaging client for smartphones that operates " + 

            "under a subscription business model."; 

} 

Also you can get this sample using the following link 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/TabComponent577038616   

Note:  Refer the below the UG link to know more about Tab Animations 

UG Link:  https://ej2.syncfusion.com/blazor/documentation/tab/animations/ 

Kindly get back to us, If you need further assistance. 

Regards 

Alagumeena.K 

[Linqing Shangguan]

Hi Linqing, 

Greetings from Syncfusion support! 

We have validated your reported query “Disable Blazor Tabs Animation Effect” and you can disable the animation by setting the animation Effect as None. We have prepared a sample based on your requirement and refer the below code for that. 

@using Syncfusion.EJ2.Blazor.Navigations 

 

<EjsTab> 

    <TabAnimationSettings> 

        <TabAnimationPrevious Effect="None"></TabAnimationPrevious> 

        <TabAnimationNext Effect="None"></TabAnimationNext> 

    </TabAnimationSettings> 

    <TabItems> 

        <TabItem Content="@Content1"> 

            <ChildContent> 

                <TabHeader Text="Twitter"></TabHeader> 

            </ChildContent> 

        </TabItem> 

        <TabItem Content="@Content2"> 

            <ChildContent> 

                <TabHeader Text="Facebook"></TabHeader> 

            </ChildContent> 

        </TabItem> 

        <TabItem Content="@Content3"> 

            <ChildContent> 

                <TabHeader Text="WhatsApp"></TabHeader> 

            </ChildContent> 

        </TabItem> 

    </TabItems> 

</EjsTab> 

 

@code{ 

    public string Content1 = "Twitter is an online social networking service that enables users to send and read short 140-character " + 

            "messages called 'tweets'."; 

    public string Content2 = "Facebook is an online social networking service headquartered in Menlo Park, California. Its website was " + 

            "launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo " + 

            "Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes."; 

    public string Content3 = "WhatsApp Messenger is a proprietary cross-platform instant messaging client for smartphones that operates " + 

            "under a subscription business model."; 

} 

Also you can get this sample using the following link 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/TabComponent577038616   

Note:  Refer the below the UG link to know more about Tab Animations 

UG Link:  https://ej2.syncfusion.com/blazor/documentation/tab/animations/ 

Kindly get back to us, If you need further assistance. 

Regards 

Alagumeena.K 

Many thanks again. 

You guys are simply Amazon!

By following your instruction  and sample code attached, I was able to achieve what I need to do easily with promising result. 

Thanks again

Linqing

[Vengatesh Maniraj]

Hi Linqing, 

You are most welcome. 

Please get in touch with us if you need any further assistance. 

Regards, 

Vengatesh