Skip to content

Commit dbe327a

Browse files
UG 986605: Updated the UG for TabView control new features [Hotfix]
1 parent 8813cbd commit dbe327a

File tree

1 file changed

+51
-0
lines changed

1 file changed

+51
-0
lines changed

MAUI/TabView/Tab-Item-Customization.md

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -583,4 +583,55 @@ stackLayout.Children.Add(tabView);
583583
this.Content = stackLayout;
584584
{% endhighlight %}
585585

586+
{% endtabs %}
587+
588+
## Disable ripple effect on item click
589+
590+
The `EnableRippleAnimation` property of the [SfTabView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html) allows you to enable or disable the ripple animation for tab headers. This animation provides visual feedback when a tab header is tapped. The default value of the `EnableRippleAnimation` property is `true`.
591+
592+
{% tabs %}
593+
594+
{% highlight xaml %}
595+
<!-- Define the SfTabView control with the ripple animation disabled -->
596+
<tabView:SfTabView EnableRippleAnimation="False">
597+
<!-- Define tab items -->
598+
</tabView:SfTabView>
599+
{% endhighlight %}
600+
601+
{% highlight C# %}
602+
// Create an instance of the SfTabView control
603+
SfTabView tabView = new SfTabView();
604+
605+
// Disable the ripple animation
606+
tabView.EnableRippleAnimation = false;
607+
608+
{% endhighlight %}
609+
610+
{% endtabs %}
611+
612+
## How to
613+
614+
### Disable hover effect on tab item
615+
616+
To disable the hover effect when the mouse pointer is over a [TabItem](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabItem.html) header, set color value `Transparent` to the built-in key `SfTabViewHoverBackground`.
617+
618+
{% tabs %}
619+
620+
{% highlight xaml %}
621+
622+
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
623+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
624+
... >
625+
<ContentPage.Resources>
626+
<Color x:Key="SfTabViewHoverBackground">Transparent</Color>
627+
</ContentPage.Resources>
628+
<ContentPage.Content>
629+
<tabView:SfTabView x:Name="tabView" EnableRippleAnimation="False">
630+
<!-- Define tab items -->
631+
</tabView:SfTabView>
632+
</ContentPage.Content>
633+
</ContentPage>
634+
635+
{% endhighlight %}
636+
586637
{% endtabs %}

0 commit comments

Comments
 (0)