From 0d7ab7cb06f1c8984b0778d21da4d788fb872303 Mon Sep 17 00:00:00 2001 From: nagasiddarthak <161321459+nagasiddarthak@users.noreply.github.com> Date: Mon, 8 Dec 2025 17:38:04 +0530 Subject: [PATCH] 994980: Need to update the UG documentation of native events in toggl --- blazor/toggle-switch-button/native-event.md | 211 +++++++++++++++++--- 1 file changed, 187 insertions(+), 24 deletions(-) diff --git a/blazor/toggle-switch-button/native-event.md b/blazor/toggle-switch-button/native-event.md index 277ab250a5..20f3390b34 100644 --- a/blazor/toggle-switch-button/native-event.md +++ b/blazor/toggle-switch-button/native-event.md @@ -9,9 +9,11 @@ documentation: ug # Events in Blazor Toggle Switch Button Component +This explains how to handle the ValueChange event and bind standard Blazor native DOM events to the Toggle Switch Button component for common interaction scenarios such as focus, keyboard, mouse, and touch. + ## ValueChange Event -The ValueChange event will trigger when switch state has been changed by user interaction. ValueChange event argument type is [ChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.ChangeEventArgs-1.html). [ChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.ChangeEventArgs-1.html) contains [Checked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.ChangeEventArgs-1.html#Syncfusion_Blazor_Buttons_ChangeEventArgs_1_Checked) and [Event](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.ChangeEventArgs-1.html#Syncfusion_Blazor_Buttons_ChangeEventArgs_1_Event) properties. +The ValueChange event is triggered when the switch state changes through user interaction. The ValueChange event argument type is [ChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.ChangeEventArgs-1.html). [ChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.ChangeEventArgs-1.html) includes the [Checked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.ChangeEventArgs-1.html#Syncfusion_Blazor_Buttons_ChangeEventArgs_1_Checked) and [Event](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.ChangeEventArgs-1.html#Syncfusion_Blazor_Buttons_ChangeEventArgs_1_Event) properties for obtaining the current state and the associated event details. ```csharp @@ -29,50 +31,211 @@ The ValueChange event will trigger when switch state has been changed by user in ``` -N> Toggle Switch Button has support for nullable boolean +N> Toggle Switch Button supports a nullable boolean value (true, false, or null). + +## How to bind native events + +In addition to the ValueChange component event, the Toggle Switch Button supports standard Blazor native DOM events for detailed control over user interactions. Attach native event handlers using Blazor's `@on*` directives (for example, `@onfocus`, `@onkeydown`), and access event-specific data through the corresponding event argument type. + +The following native events are supported: + +| Event Category | Events | +|---|---| +| **Focus** | onfocus, onfocusin, onfocusout | +| **Keyboard** | onkeydown, onkeyup, onkeypress | +| **Mouse** | onclick, ondblclick, onmousedown, onmouseup, onmousemove, onmouseenter, onmouseleave | +| **Touch** | ontouchstart, ontouchend, ontouchmove | -## Native Events +### Focus Events -The native event can be defined using `event` attribute in component. The value of attribute is treated as an event handler. The event specific data will be available in event arguments. +Focus events fire when the Toggle Switch Button receives or loses focus. The `FocusEventArgs` parameter provides access to focus state information for implementing accessibility features and focus-dependent logic. -The different event argument types for each event are, +| Event | Behavior | +|---|---| +| **onfocus** | Fires when the component gains focus | +| **onfocusin** | Fires when the component gains focus, including during event bubbling | +| **onfocusout** | Fires when the component loses focus | + +The following example demonstrates handling focus events on the Toggle Switch Button: + +```cshtml +@using Syncfusion.Blazor.Buttons -* Focus Events - UIFocusEventArgs -* Mouse Events - UIMouseEventArgs -* Keyboard Events - UIKeyboardEventArgs -* Touch Events – UITouchEventArgs + + -## List of Native events supported +@code { + private bool? isChecked = null; + + private void OnFocus(FocusEventArgs args) + { + /* onfocus triggered */ + } + private void OnFocusIn(FocusEventArgs args) + { + /* onfocusin triggered */ + } + private void OnFocusOut(FocusEventArgs args) + { + /* onfocusout triggered */ + } +} +``` -The following native event support has been provided to the Toggle Switch Button component: +### Keyboard Events -* onfocus -* onfocusout -* onfocusin -* onkeydown -* onkeyup -* Onkeypress +Keyboard events are triggered when keyboard interactions occur on the Toggle Switch Button component. The `KeyboardEventArgs` event argument provides information about which key was pressed and keyboard modifiers, allowing you to handle keyboard navigation and shortcuts. -## How to bind focus event to Toggle Switch Button +| Event | Behavior | +|---|---| +| **onkeydown** | Fires when a key is pressed | +| **onkeyup** | Fires when a pressed key is released | +| **onkeypress** | Fires when a key is pressed (generally use onkeydown for better compatibility) | -The `onfocus` attribute is used to bind the focus event for Toggle Switch Button. Here, we have explained about the sample code snippets of Toggle Switch Button. +The following example demonstrates handling keyboard events: ```cshtml @using Syncfusion.Blazor.Buttons - - + + @code { - private bool isChecked = true; + private bool? isChecked = null; + + private void OnKeyDown(KeyboardEventArgs args) + { + /* onkeydown triggered */ + } + private void OnKeyUp(KeyboardEventArgs args) + { + /* onkeyup triggered */ + } + private void OnKeyPress(KeyboardEventArgs args) + { + /* onkeypress triggered */ + } } +``` + +### Mouse Events + +Mouse events fire when the user interacts with the Toggle Switch Button using the mouse. The `MouseEventArgs` parameter provides positional data, button information, and other mouse-related properties. + +**Event Types:**| Event | Behavior | +|---|---| +| **onclick** | Fires when the component is clicked | +| **ondbclick** | Fires when the component is double-clicked | +| **onmousedown** | Fires when a mouse button is pressed down | +| **onmouseup** | Fires when a mouse button is released | +| **onmousemove** | Fires as the mouse pointer moves over the component | +| **onmouseenter** | Fires when the mouse pointer enters the component area | +| **onmouseleave** | Fires when the mouse pointer leaves the component area | + +The following example demonstrates handling mouse events: + +```cshtml +@using Syncfusion.Blazor.Buttons + + + @code { + private bool? isChecked = null; - private void onFocus(Microsoft.AspNetCore.Components.Web.FocusEventArgs args) + private void OnClick(MouseEventArgs args) + { + /* onclick triggered */ + } + private void OnDoubleClick(MouseEventArgs args) { - //onfocus Event triggered + /* ondblclick triggered */ + } + private void OnMouseDown(MouseEventArgs args) + { + /* onmousedown triggered */ + } + private void OnMouseUp(MouseEventArgs args) + { + /* onmouseup triggered */ + } + private void OnMouseMove(MouseEventArgs args) + { + /* onmousemove triggered */ + } + private void OnMouseEnter(MouseEventArgs args) + { + /* onmouseenter triggered */ + } + private void OnMouseLeave(MouseEventArgs args) + { + /* onmouseleave triggered */ } } +``` + +### Touch Events + +Touch events fire when the user interacts with the Toggle Switch Button using touch input on touch-enabled devices (tablets, smart phones, etc.). The `TouchEventArgs` parameter provides information about touch points and their positions. + +| Event | Behavior | +|---|---| +| **ontouchstart** | Fires when one or more touch points contact the component | +| **ontouchend** | Fires when one or more touch points are removed from the component | +| **ontouchmove** | Fires when one or more touch points move while in contact with the component | + +The following example demonstrates handling touch events: +```cshtml +@using Syncfusion.Blazor.Buttons + + + + +@code { + private bool? isChecked = null; + + private void OnTouchStart(TouchEventArgs args) + { + /* ontouchstart triggered */ + } + private void OnTouchEnd(TouchEventArgs args) + { + /* ontouchend triggered */ + } + private void OnTouchMove(TouchEventArgs args) + { + /* ontouchmove triggered */ + } +} ``` + +