Skip to content

Commit d141759

Browse files
UdhayaKumarDuraisamyUdhayaKumarDuraisamy
authored
Merge pull request #7192 from syncfusion-content/BLAZ-994980-toggle
994980: Need to update the UG documentation of native events in toggl…
2 parents 38f800c + 7a4ff94 commit d141759

File tree

1 file changed

+188
-24
lines changed

1 file changed

+188
-24
lines changed

‎blazor/toggle-switch-button/native-event.md‎

Lines changed: 188 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,11 @@ documentation: ug
99

1010
# Events in Blazor Toggle Switch Button Component
1111

12+
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.
13+
1214
## ValueChange Event
1315

14-
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.
16+
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.
1517

1618
```csharp
1719

@@ -29,50 +31,212 @@ The ValueChange event will trigger when switch state has been changed by user in
2931

3032
```
3133

32-
N> Toggle Switch Button has support for nullable boolean
34+
N> Toggle Switch Button supports a nullable boolean value (true, false, or null).
35+
36+
## How to bind native events
37+
38+
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.
39+
40+
The following native events are supported:
41+
42+
| Event Category | Events |
43+
|---|---|
44+
| **Focus** | onfocus, onfocusin, onfocusout |
45+
| **Keyboard** | onkeydown, onkeyup, onkeypress |
46+
| **Mouse** | onclick, ondblclick, onmousedown, onmouseup, onmousemove, onmouseenter, onmouseleave |
47+
| **Touch** | ontouchstart, ontouchend, ontouchmove |
3348

34-
## Native Events
49+
### Focus Events
3550

36-
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.
51+
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.
3752

38-
The different event argument types for each event are,
53+
| Event | Behavior |
54+
|---|---|
55+
| **onfocus** | Fires when the component gains focus |
56+
| **onfocusin** | Fires when the component gains focus, including during event bubbling |
57+
| **onfocusout** | Fires when the component loses focus |
58+
59+
The following example demonstrates handling focus events on the Toggle Switch Button:
60+
61+
```cshtml
62+
@using Syncfusion.Blazor.Buttons
3963

40-
* Focus Events - UIFocusEventArgs
41-
* Mouse Events - UIMouseEventArgs
42-
* Keyboard Events - UIKeyboardEventArgs
43-
* Touch Events – UITouchEventArgs
64+
<SfSwitch @bind-Checked="isChecked"
65+
OffLabel="OFF"
66+
OnLabel="ON"
67+
TChecked="bool?"
68+
@onfocus="OnFocus"
69+
@onfocusin="OnFocusIn"
70+
@onfocusout="OnFocusOut">
71+
</SfSwitch>
4472

45-
## List of Native events supported
73+
@code {
74+
private bool? isChecked = null;
75+
76+
private void OnFocus(FocusEventArgs args)
77+
{
78+
/* onfocus triggered */
79+
}
80+
private void OnFocusIn(FocusEventArgs args)
81+
{
82+
/* onfocusin triggered */
83+
}
84+
private void OnFocusOut(FocusEventArgs args)
85+
{
86+
/* onfocusout triggered */
87+
}
88+
}
89+
```
4690

47-
The following native event support has been provided to the Toggle Switch Button component:
91+
### Keyboard Events
4892

49-
* onfocus
50-
* onfocusout
51-
* onfocusin
52-
* onkeydown
53-
* onkeyup
54-
* Onkeypress
93+
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.
5594

56-
## How to bind focus event to Toggle Switch Button
95+
| Event | Behavior |
96+
|---|---|
97+
| **onkeydown** | Fires when a key is pressed |
98+
| **onkeyup** | Fires when a pressed key is released |
99+
| **onkeypress** | Fires when a key is pressed (generally use onkeydown for better compatibility) |
57100

58-
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.
101+
The following example demonstrates handling keyboard events:
59102

60103
```cshtml
61104
@using Syncfusion.Blazor.Buttons
62105
63-
<label>onfocus</label>
64-
<SfSwitch @onfocus="onFocus" @bind-Checked="isChecked"></SfSwitch>
106+
<SfSwitch @bind-Checked="isChecked"
107+
OffLabel="OFF"
108+
OnLabel="ON"
109+
TChecked="bool?"
110+
@onkeydown="OnKeyDown"
111+
@onkeyup="OnKeyUp"
112+
@onkeypress="OnKeyPress">
113+
</SfSwitch>
65114
66115
@code {
67-
private bool isChecked = true;
116+
private bool? isChecked = null;
117+
118+
private void OnKeyDown(KeyboardEventArgs args)
119+
{
120+
/* onkeydown triggered */
121+
}
122+
private void OnKeyUp(KeyboardEventArgs args)
123+
{
124+
/* onkeyup triggered */
125+
}
126+
private void OnKeyPress(KeyboardEventArgs args)
127+
{
128+
/* onkeypress triggered */
129+
}
68130
}
131+
```
132+
133+
### Mouse Events
134+
135+
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.
136+
137+
**Event Types:**| Event | Behavior |
138+
|---|---|
139+
| **onclick** | Fires when the component is clicked |
140+
| **ondbclick** | Fires when the component is double-clicked |
141+
| **onmousedown** | Fires when a mouse button is pressed down |
142+
| **onmouseup** | Fires when a mouse button is released |
143+
| **onmousemove** | Fires as the mouse pointer moves over the component |
144+
| **onmouseenter** | Fires when the mouse pointer enters the component area |
145+
| **onmouseleave** | Fires when the mouse pointer leaves the component area |
146+
147+
The following example demonstrates handling mouse events:
148+
149+
```cshtml
150+
@using Syncfusion.Blazor.Buttons
151+
152+
<SfSwitch @bind-Checked="isChecked"
153+
OffLabel="OFF"
154+
OnLabel="ON"
155+
TChecked="bool?"
156+
@onclick="OnClick"
157+
@ondblclick="OnDoubleClick"
158+
@onmousedown="OnMouseDown"
159+
@onmouseup="OnMouseUp"
160+
@onmousemove="OnMouseMove"
161+
@onmouseenter="OnMouseEnter"
162+
@onmouseleave="OnMouseLeave">
163+
</SfSwitch>
69164
70165
@code {
166+
private bool? isChecked = null;
71167
72-
private void onFocus(Microsoft.AspNetCore.Components.Web.FocusEventArgs args)
168+
private void OnClick(MouseEventArgs args)
169+
{
170+
/* onclick triggered */
171+
}
172+
private void OnDoubleClick(MouseEventArgs args)
73173
{
74-
//onfocus Event triggered
174+
/* ondblclick triggered */
175+
}
176+
private void OnMouseDown(MouseEventArgs args)
177+
{
178+
/* onmousedown triggered */
179+
}
180+
private void OnMouseUp(MouseEventArgs args)
181+
{
182+
/* onmouseup triggered */
183+
}
184+
private void OnMouseMove(MouseEventArgs args)
185+
{
186+
/* onmousemove triggered */
187+
}
188+
private void OnMouseEnter(MouseEventArgs args)
189+
{
190+
/* onmouseenter triggered */
191+
}
192+
private void OnMouseLeave(MouseEventArgs args)
193+
{
194+
/* onmouseleave triggered */
75195
}
76196
}
197+
```
198+
199+
### Touch Events
200+
201+
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.
202+
203+
| Event | Behavior |
204+
|---|---|
205+
| **ontouchstart** | Fires when one or more touch points contact the component |
206+
| **ontouchend** | Fires when one or more touch points are removed from the component |
207+
| **ontouchmove** | Fires when one or more touch points move while in contact with the component |
208+
209+
The following example demonstrates handling touch events:
77210

211+
```cshtml
212+
@using Syncfusion.Blazor.Buttons
213+
214+
<SfSwitch @bind-Checked="isChecked"
215+
OffLabel="OFF"
216+
OnLabel="ON"
217+
TChecked="bool?"
218+
@ontouchstart="OnTouchStart"
219+
@ontouchend="OnTouchEnd"
220+
@ontouchmove="OnTouchMove">
221+
</SfSwitch>
222+
223+
@code {
224+
private bool? isChecked = null;
225+
226+
private void OnTouchStart(TouchEventArgs args)
227+
{
228+
/* ontouchstart triggered */
229+
}
230+
private void OnTouchEnd(TouchEventArgs args)
231+
{
232+
/* ontouchend triggered */
233+
}
234+
private void OnTouchMove(TouchEventArgs args)
235+
{
236+
/* ontouchmove triggered */
237+
}
238+
}
78239
```
240+
241+
242+

0 commit comments

Comments
 (0)