Double Click

RfDoubleClick is a Blazor component that detects double-click events seperate from single-clicks. It allows you to easily handle single and double-click interactions from the same element in your Blazor applications.

RfDoubleClick creates an element based on RfDoubleClick.Element. It supports the following parameters:

• OnDoubleClick: Event callback for double-click events.
• OnSingleClick: Event callback for single-click events.
• Element: The HTML element to render (default is "button").
• ClickDelay: The delay in milliseconds to distinguish between single and double clicks. (default is 400)
• Supports additional uncaptured parameters and applies them to the root element.

RfDoubleClick makes uses of onclick event exclusively for double-click detection over the use of ondblclick. This should add better support for touch devices and other platforms that may not support the ondblclick event properly.

Example

<RfDoubleClick OnSingleClick="@OnSingleClick"
               OnDoubleClick="@OnDoubleClick"
               Element="button"
               class="button is-primary">
    Click or Double Click Me
</RfDoubleClick>
            
<p>@message</p>

@code {
    private string message = "Try single or double clicking the button above.";

    private void OnSingleClick()
    {
        message = "Single click detected!";
    }

    private void OnDoubleClick()
    {
        message = "Double click detected!";
    }
}

Setting up RForge is simple. Follow the below steps to add RForge Blazor components to your project.

1. Install the Nuget package
2. Import the namespaces (optional)
3. Register RForge services
4. Include Bulma CSS

Install the Nuget Package

RForge Blazor components are installed via Nuget. There are two packages. One for the blazor app and one for the library if any.

Blazor Project Installation

Command Line

dotnet add package RForge.Blazor

Package Manager Console

Install-Package RForge.Blazor

Library Project Installation

This is optional but may be useful if you want to use common enums across the backend and frontend.

Command Line

dotnet add package RForge.Abstractions

Package Manager Console

Install-Package RForge.Abstractions

Import the namespaces

To simplify namespacing while using RForge, the package is designed with most all components sitting within the root RForge namespace.

You may want to include the following namespaces in your _import.razor for ease of use.

@using RForgeBlazor
@using RForgeBlazor.Services
@using RForge.Abstractions

Register RForge Services

In order for some components to work they must first have their services registered.

Open up Program.cs and add the following line before the var app = builder.Build();.

using RForgeBlazor;
//...
builder.Services.AddRfForgeBlazorServices();
//...
var app = builder.Build();
    

Include Bulma CSS

RForge makes use of Bulma CSS to stylize the components. Add / install Bulma and add the CSS file to the head. Link to download: Bulma releases.