1. Home
  2. Forum
  3. Blazor
  4. Disable Blazor Tabs Animation effect

Disable Blazor Tabs Animation effect

Hello, 

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

Many thanks

Linqing

3 Replies
AK Alagumeena Kalaiselvan Syncfusion Team March 12, 2020 05:50 AM UTC

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 

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

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

Regards 
Alagumeena.K 


LS Linqing Shangguan replied to Alagumeena Kalaiselvan March 12, 2020 01:59 PM UTC

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 

Note:  Refer the below the UG link to know more about 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

VM Vengatesh Maniraj Syncfusion Team March 13, 2020 04:37 AM UTC

Hi Linqing, 

You are most welcome. 

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

Regards, 
Vengatesh 


Loader.
Up arrow icon