diff --git a/blazor-toc.html b/blazor-toc.html index 92519247b9..bfdc82d9f4 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -5369,6 +5369,9 @@
  • Right-To-Left
  • +
  • + Enable Ripple +
  • State Persistence
  • diff --git a/blazor/common/enable-ripple.md b/blazor/common/enable-ripple.md new file mode 100644 index 0000000000..2b391b12d5 --- /dev/null +++ b/blazor/common/enable-ripple.md @@ -0,0 +1,61 @@ +--- +layout: post +title: Enable Ripple support in Blazor components | Syncfusion +description: Learn how to enable Ripple Effect support globally for Syncfusion Blazor components in Blazor Web App, Blazor WASM standalone, and Blazor Server App. +platform: Blazor +control: Common +documentation: ug +--- + +# Enable Ripple Support in Syncfusion® Blazor Components + +Enable Ripple support can be enabled for Syncfusion® Blazor components by setting the `EnableRippleEffect` property to `true`. This renders supported Syncfusion® Blazor components to display a ripple effect. + +## Enable Ripple Effect Globally + +To enable the ripple effect for all Syncfusion® components by setting the [EnableRippleEffect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.GlobalOptions.html#Syncfusion_Blazor_GlobalOptions_EnableRippleEffect) global option to `true` when adding Syncfusion Blazor via `AddSyncfusionBlazor()`. + +### Blazor Web App + +For **.NET 8, .NET 9 and .NET 10** Blazor Web Apps using any render mode (Server, WebAssembly, or Auto), set the [EnableRippleEffect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.GlobalOptions.html#Syncfusion_Blazor_GlobalOptions_EnableRippleEffect) property to `true` using the `AddSyncfusionBlazor` service method in the `~/Program.cs` file. + +{% tabs %} + +{% highlight c# tabtitle="~/Program.cs" hl_lines="3" %} + +using Syncfusion.Blazor; +.... +builder.Services.AddSyncfusionBlazor(options => { options.EnableRippleEffect = true; }); + + +{% endhighlight %} + +{% endtabs %} + +### Blazor WebAssembly Standalone App + +For Blazor WebAssembly Standalone apps, set the [EnableRippleEffect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.GlobalOptions.html#Syncfusion_Blazor_GlobalOptions_EnableRippleEffect) property to `true` using the `AddSyncfusionBlazor` service method in the `~/Program.cs` file. + +{% tabs %} + +{% highlight c# tabtitle=".NET 10, .NET 9 & .NET 8 (~/Program.cs)" %} + +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); + +.... +builder.Services.AddSyncfusionBlazor(options => { options.EnableRippleEffect = true; }); +await builder.Build().RunAsync(); +.... + +{% endhighlight %} + +{% endtabs %} + +The above configuration enables ripple effect globally for all Syncfusion® Blazor components. + +For example, the Syncfusion® Blazor Tab component will display with a ripple animation effect: + +![Blazor components rendered with ripple effect](images/EnableRipple.gif) + diff --git a/blazor/common/images/EnableRipple.gif b/blazor/common/images/EnableRipple.gif new file mode 100644 index 0000000000..854e1f8890 Binary files /dev/null and b/blazor/common/images/EnableRipple.gif differ