Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 52 additions & 0 deletions MAUI/TabView/Tab-Item-Customization.md
Original file line number Diff line number Diff line change
Expand Up @@ -583,4 +583,56 @@ stackLayout.Children.Add(tabView);
this.Content = stackLayout;
{% endhighlight %}

{% endtabs %}

## Disable ripple effect on item click

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

{% tabs %}

{% highlight xaml %}
<!-- Define the SfTabView control with the ripple animation disabled -->
<tabView:SfTabView EnableRippleAnimation="False">
<!-- Define tab items -->
</tabView:SfTabView>
{% endhighlight %}

{% highlight C# %}
// Create an instance of the SfTabView control
SfTabView tabView = new SfTabView();

// Disable the ripple animation
tabView.EnableRippleAnimation = false;

{% endhighlight %}

{% endtabs %}

## How to

### Disable hover effect on tab item

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

{% tabs %}

{% highlight xaml %}

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
... >
<ContentPage.Resources>
<x:String x:Key="SfTabViewTheme">CustomTheme</x:String>
<Color x:Key="SfTabViewHoverBackground">Transparent</Color>
</ContentPage.Resources>
<ContentPage.Content>
<tabView:SfTabView x:Name="tabView" EnableRippleAnimation="False">
<!-- Define tab items -->
</tabView:SfTabView>
</ContentPage.Content>
</ContentPage>

{% endhighlight %}

{% endtabs %}
12 changes: 12 additions & 0 deletions MAUI/Themes/Keys.md
Original file line number Diff line number Diff line change
Expand Up @@ -17961,6 +17961,18 @@ This page lists the keys associated with each control and the respective UI elem
<br/>
</td>
</tr>
<tr>
<td>
SfTabViewHoverBackground
<br/>
<br/>
</td>
<td>
Hover BackgroundColor of the SfTabItem.
<br/>
<br/>
</td>
</tr>
</table>

## SfTextInputLayout
Expand Down