You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
`On` or `Off` labels are rendered inside the Switch based on its value:
14
+
15
+
*`OnLabel` will be shown when the Switch `Value` is `true`
16
+
*`OffLabel` will be shown when the Switch `Value` is `false`
17
+
18
+
The component allows customization of the labels text through the dedicated parameters. [Provide your desired strings](#customize-labels-text) for the Switch labels or [use a blank space to remove visible labels](#remove-labels).
19
+
20
+
## Customize Labels Text
21
+
22
+
Provide the desired text for the On and Off labels through the corresponding parameters. If the text is longer, you can increase the component `Width` to ensure the label will be visible.
23
+
24
+
````CSHTML
25
+
@* Use the OnLabel and OffLabel to customize the labels of the Switch. Use the Width parameter to manipulate the width of the component. *@
26
+
<p>
27
+
I agree to the terms and conditions
28
+
</p>
29
+
30
+
<TelerikSwitch @bind-Value="@hasAgreed"
31
+
OnLabel="@myOnLabel"
32
+
OffLabel="@myOffLabel"
33
+
Width="100px">
34
+
</TelerikSwitch>
35
+
36
+
@code {
37
+
public bool hasAgreed { get; set; }
38
+
public string myOnLabel { get; set; } = "Agree";
39
+
public string myOffLabel { get; set; } = "Disagree";
40
+
}
41
+
````
42
+
43
+
## Remove Labels
44
+
45
+
To remove the Switch labels, use a blank space for the `OnLabel` and `OffLabel` parameters.
Copy file name to clipboardExpand all lines: components/switch/overview.md
+48-86Lines changed: 48 additions & 86 deletions
Original file line number
Diff line number
Diff line change
@@ -12,10 +12,10 @@ position: 0
12
12
13
13
The <ahref = "https://www.telerik.com/blazor-ui/switch"target="_blank">Blazor Switch component</a> allows the user to toggle between checked and unchecked states.
14
14
15
-
#### To use a Telerik Switch for Blazor
15
+
##Creating Blazor Switch
16
16
17
-
1.add the `TelerikSwitch` tag
18
-
1.provide `Value` (one-way data binding) or `bind-Value` (two-way data binding) property
17
+
1.Use the `<TelerikSwitch>` tag
18
+
1.Provide a `Value` (one-way binding) or `@bind-Value` (two-way binding)
19
19
20
20
21
21
>caption Basic setup of the Telerik Switch using two-way data binding
@@ -37,118 +37,80 @@ The <a href = "https://www.telerik.com/blazor-ui/switch" target="_blank">Blazor
The Switch has dedicated `On` and `Off` labels serving as text representation of the component value. [Read more about the Switch labels....]({%slug switch-labels%})
43
43
44
-
*`Class` - the CSS class that will be rendered on the main wrapping element of the Switch. Use it to [customize the Switch background color and other styles]({%slug switch-kb-change-background-color%})
44
+
## Events
45
45
46
-
*`Enabled` - whether the component is enabled.
46
+
The Blazor Switch generates events that you can handle and further customize its behavior. [Read more about the Switch events....]({%slug switch-events%})
47
47
48
-
*`Id` - renders as the `id` attribute on the wrapping `<span>` element of the component.
48
+
## Validation
49
49
50
-
*`Width` - the width of the component.
50
+
You can ensure that the component value is acceptable by using the built-in validation. [Read more about input validation....]({%slug common-features/input-validation%})
51
51
52
-
*`TabIndex` - the `tabindex` attribute rendered on the Switch.
52
+
## Switch Parameters
53
53
54
-
*`Value` and `bind-Value` - accept `bool` and `bool?` data types.
54
+
The following table lists the Switch parameters. Also check the [Switch API Reference](/blazor-ui/api/Telerik.Blazor.Components.TelerikSwitch-1) for a full list of all properties, methods and events.
55
55
56
-
*`OnLabel` - the label of the component when the `Value` is `true`.
The Switch is a generic component and its type comes from the model field it is bound to - it is either `bool` or `bool?` (a `null` value is treated as `false`).
73
+
| Attribute | Type and Default Value | Description |
74
+
|----------|----------|----------|
75
+
| `Class` | `string` | The CSS class that will be rendered on the main wrapping element of the Switch. Use it to [customize the Switch background color and other styles]({%slug switch-kb-change-background-color%})
76
+
| `Width` | `string` | The width of the component. You can set the Width parameter to any of the [supported units]({%slug common-features/dimensions%}).
67
77
68
-
>caption Switch Reference
78
+
You can find more options for customizing the Switch styling in the [Appearance article]({%slug switch-appearance%}).
69
79
70
-
````CSHTML
71
-
@* The Switch reference type comes from its Value type *@
The Switch is a generic component and its type comes from the model field it is bound to - it is either `bool` or `bool?` (a `null` value is treated as `false`). Add a reference to the component instance to use the [Switch methods](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.TelerikSwitch-1#methods).
97
83
98
-
@code {
99
-
private bool isSelected { get; set; }
100
-
}
101
-
````
102
-
103
-
### Custom Labels and Size
104
-
105
-
The example below shows how to:
106
-
107
-
* Bind the switch to a value
108
-
* Set custom labels for its On and Off states
109
-
* Use the `Width` parameter to control the size of the component
Thank you for agreeing to our terms and conditions!
122
-
</div>
123
-
}
124
-
else
125
-
{
126
-
<p class="w-50 text-justify">
127
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi lectus, ultrices sed libero et, tempor rutrum mauris. Praesent sit amet suscipit leo, ut hendrerit lacus. Mauris posuere, mi in elementum pretium, sem elit maximus mauris, ac tempus turpis nunc sed orci. Nunc velit lacus, rutrum et dui mattis, condimentum fermentum velit. Pellentesque et elit rhoncus, sodales nibh ac, faucibus tellus. Vestibulum vitae tempor tellus. Sed maximus sem quis est posuere, efficitur porttitor augue tincidunt. Sed viverra dapibus ullamcorper. Vestibulum ex arcu, molestie sed quam vulputate, aliquet cursus lectus. Aenean sollicitudin condimentum fringilla. Integer arcu justo, sollicitudin ut libero ut, posuere finibus sapien. Suspendisse hendrerit convallis urna.
128
-
Donec eu sodales dui, et consequat massa. Integer vitae euismod dui, id rhoncus tellus. Ut luctus leo eget sapien eleifend facilisis. Duis sed maximus tortor. Ut nunc nibh, pulvinar a enim eget, mattis sagittis sem. Mauris odio nibh, aliquet a erat sit amet.
0 commit comments