Skip to content

Commit 2cbfc7a

Browse files
vveesseelliinnaavveesseelliinnaa
committed
docs(switch): Create Switch documentation
1 parent 01e9637 commit 2cbfc7a

33 files changed

+1535
-0
lines changed

‎controls/switch/accessibility-and-internationalization/images/switch-rtl.png‎

1.17 KB
Loading

‎controls/switch/accessibility-and-internationalization/keyboard-support.md‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
---
2+
title: Keyboard Support
3+
page_title: Keyboard Support - RadSwitch
4+
description: Check our Web Forms article about Keyboard Support.
5+
slug: switch/accessibility-and-internationalization/keyboard-support
6+
tags: keyboard,support
7+
published: True
8+
position: 2
9+
---
10+
11+
# Keyboard Support
12+
13+
There are several ways to use the **RadSwitch** via the keyboard only:
14+
15+
* Set its **TabIndex** property and use the **Tab** key to navigate to the desired switch and then press the **Enter** key to invoke a click on the switch.
16+
17+
* Set its **AccessKey** property. This allows you to use the browser's shortcut combination to invoke the click ("Alt + AccessKey" in IE and Chrome, "Shift + Alt + AccessKey" for Firefox, "Shift + Esc + AccessKey" for Opera).
18+
19+
>note Note: By default, tab-access is disabled in Safari. To enable it, check "Preferences > Advanced > Press tab to highlight each item on a page".
20+
21+
## See Also
22+
23+
* [Live Demo: RadSwitch Keyboard Support](https://demos.telerik.com/aspnet-ajax/switch/examples/keyboard-support/defaultcs.aspx)
24+
25+
* [WCAG 2.0 and Section 508 Accessibility Compliance]({%slug switch/accessibility-and-internationalization/wcag-2.0-and-section-508-accessibility-compliance%})
26+
27+
* [Right-to-Left Support]({%slug switch/accessibility-and-internationalization/right-to-left-support%})

‎controls/switch/accessibility-and-internationalization/right-to-left-support.md‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
---
2+
title: Right-to-Left Support
3+
page_title: Right-to-Left Support - Switch
4+
description: Check our Web Forms article about Right-to-Left Support.
5+
slug: switch/accessibility-and-internationalization/right-to-left-support
6+
tags: right-to-left,support
7+
published: True
8+
position: 1
9+
---
10+
11+
# Right-to-Left Support
12+
13+
The **Switch** fully supports right-to-left (RTL) language locales (**Figure 1**). In order to turn on the RTL support, you should set **dir=rtl to the html or body** element or at least to its parent element (**Figure 1**). You can also use the **direction:rtl** CSS property.
14+
15+
>caption Figure 1: Switch in RTL mode.
16+
17+
![Switch-rtl](images/switch-rtl.png)
18+
19+
>caption Example 1: Set the "direction: rtl" style to the **Switch**'s wrapper element in order to enable the RTL support for the control.
20+
21+
````ASP.NET
22+
<div style="direction: rtl;">
23+
<telerik:RadLabel runat="server" ID="RadLabel1" AssociatedControlID="RadSwitch1" Text="پذیرفتن">
24+
</telerik:RadLabel>
25+
<telerik:RadSwitch runat="server" ID="RadSwitch1" Checked="true" AutoPostBack="false">
26+
<ToggleStates>
27+
<ToggleStateOff Text="نه" />
28+
<ToggleStateOn Text="آره" />
29+
</ToggleStates>
30+
</telerik:RadSwitch>
31+
</div>
32+
````
33+
34+
## See Also
35+
36+
* [Live Demo: Switch RTL Support](https://demos.telerik.com/aspnet-ajax/switch/examples/righttoleft/defaultcs.aspx)
37+
38+
* [WCAG 2.0 and Section 508 Accessibility Compliance]({%slug switch/accessibility-and-internationalization/wcag-2.0-and-section-508-accessibility-compliance%})
39+
40+
* [Keyboard Support]({%slug switch/accessibility-and-internationalization/keyboard-support%})

‎controls/switch/accessibility-and-internationalization/wai-aria-support.md‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
---
2+
title: WAI-ARIA Support
3+
page_title: WAI-ARIA Support - RadSwitch
4+
description: Check our Web Forms article about WAI-ARIA Support.
5+
slug: switch/accessibility-and-internationalization/wai-aria-support
6+
tags: wai-aria,support
7+
published: True
8+
position: 3
9+
---
10+
11+
# WAI-ARIA Support
12+
13+
@[template](/_templates/common/wai-aria-templates.md#intro "control: RadSwitch")
14+
15+
The [WAI-ARIA Suite](https://www.w3.org/WAI/intro/aria) defines an approach to make web content and web applications more accessible to people with disabilities. **RadSwitch** offers WAI-ARIA support.
16+
17+
In order to enable the WAI-ARIA support, set the **RadSwitch** control's `EnableAriaSupport` property to `true` and, optionally, set the inner properties ([DescribedBy](https://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby) and [Label](https://www.w3.org/TR/wai-aria/states_and_properties#aria-label)) of the `AriaSettings` composite tag to the desired values as shown in **Example 1**.
18+
19+
>caption **Example 1**: Enabling WAI-ARIA support for RadSwitch
20+
21+
````ASP.NET
22+
<telerik:RadSwitch ID="RadSwitch1" runat="server" EnableAriaSupport="true">
23+
<AriaSettings DescribedBy="someElementId" Label="Some Label Value" />
24+
</telerik:RadSwitch>
25+
````
26+
27+
>note The implementation of the WAI-ARIA support is achieved entirely on the client side (using JavaScript) by appending different attributes and appropriate WAI-ARIA roles to the DOM elements. This is done because an HTML document containing ARIA attributes will not pass validation if they are added on the server.
28+
29+
30+
31+
32+
## See Also
33+
34+
* [Live Demo: RadSwitch WAI-ARIA Support](https://demos.telerik.com/aspnet-ajax/switch/examples/wai-aria-support/defaultcs.aspx)
35+
36+
* [W3C: WAI-ARIA Overview](https://www.w3.org/WAI/intro/aria)
37+
38+

‎controls/switch/accessibility-and-internationalization/wcag-2.0-and-section-508-accessibility-compliance.md‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
---
2+
title: WCAG 2.0 and Section 508 Accessibility Compliance
3+
page_title: WCAG 2.0 and Section 508 Accessibility Compliance - RadSwitch
4+
description: Check our Web Forms article about WCAG 2.0 and Section 508 Accessibility Compliance.
5+
slug: switch/accessibility-and-internationalization/wcag-2.0-and-section-508-accessibility-compliance
6+
tags: wcag,2.0,and,section,508,accessibility,compliance
7+
published: True
8+
position: 0
9+
---
10+
11+
# WCAG 2.0 and Section 508 Accessibility Compliance
12+
13+
The interface of **RadSwitch for ASP.NET AJAX** is level AAA accessible (in compliance with the W3C Web Accessibility Guidelines 2.0) as well as Section 508 compliant. It passes the check of the [WAVE](http://wave.webaim.org/) automated content compliance tool for Section 508 and WCAG 2.0 - Compliance Level AAA.
14+
15+
The control is also visible in Windows High Contrast mode when rendered with Simple skin.
16+
17+
It also offers [Keyboard support]({%slug switch/accessibility-and-internationalization/keyboard-support%}).
18+
19+
## See Also
20+
21+
* [Live Demo: RadSwitch Accessibility Support](https://demos.telerik.com/aspnet-ajax/switch/examples/accessibility-support/defaultcs.aspx)
22+
23+
* [Section 508](http://www.section508.gov/)
24+
25+
* [Web Content Accessibility Guidelines (WCAG) 2.0](https://www.w3.org/TR/WCAG/)
26+
27+
* [Right-to-Left Support]({%slug switch/accessibility-and-internationalization/right-to-left-support%})
28+
29+
* [Keyboard Support]({%slug switch/accessibility-and-internationalization/keyboard-support%})

‎controls/switch/appearance-and-styling/controlling-appearance.md‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
---
2+
title: Controlling Appearance
3+
page_title: Controlling Appearance - RadSwitch
4+
description: Check our Web Forms article about how to control the appearance of RadSwitch.
5+
slug: switch/appearance-and-styling/controlling-appearance
6+
tags: skins, custom, customize, appearance, css, styles, icon
7+
published: True
8+
position: 0
9+
---
10+
11+
# Controlling Apparance
12+
13+
**RadSwitch** can be easily customized with the help of the standard CSS rules. In this demo you can see how to customize the default styles of the control in order to achieve the following layouts:
14+
15+
![RadSwitch-controllingAppearance](images/switch-controlling-appearance.png)
16+
17+
18+
## Long Labels
19+
20+
If you want to use long toggle state labels, you can make **RadSwitch** wider by setting its `Width` property:
21+
22+
>caption Wide RadSwitch with long labels
23+
![Wide RadSwitch with long labels](images/switch-controlling-appearance-wide.gif)
24+
25+
26+
27+
````ASP.NET
28+
<telerik:RadSwitch runat="server" ID="RadSwitch1" Checked="true" Width="92px" AutoPostBack="false">
29+
<ToggleStates>
30+
<ToggleStateOff Text="Disabled" />
31+
<ToggleStateOn Text="Enabled" />
32+
</ToggleStates>
33+
</telerik:RadSwitch>
34+
````
35+
36+
## Custom Icons
37+
38+
>caption Wide RadSwitch with long labels
39+
![RadSwitch with custom icons](images/switch-controlling-appearance-icons.gif)
40+
41+
42+
````CSS
43+
/*Create RadSwitch with custom icons*/
44+
button.RadSwitch.customIcons .k-switch-container .k-switch-handle, .RadSwitch:hover .k-switch-container .k-switch-handle {
45+
font-family: "WebComponentsIcons";
46+
text-align: center;
47+
color: inherit;
48+
}
49+
50+
button.RadSwitch.customIcons.k-switch-on .k-switch-container .rbHovered,
51+
button.RadSwitch.customIcons.k-switch-on:hover .k-switch-container {
52+
box-shadow: inset 0 0 0 1px seagreen;
53+
}
54+
55+
button.RadSwitch.customIcons.k-switch-on .k-switch-container,
56+
button.RadSwitch.customIcons.k-switch-on:hover .k-switch-container {
57+
color: lightgreen;
58+
background-color: lightgreen;
59+
}
60+
61+
button.RadButton.customIcons.k-switch-on:hover .k-switch-handle,
62+
button.RadButton.customIcons.k-switch-on.k-state-hover .k-switch-handle {
63+
border-color: seagreen;
64+
}
65+
66+
button.RadSwitch.customIcons.k-switch-off .k-switch-container,
67+
button.RadSwitch.customIcons.k-switch-off:hover .k-switch-container {
68+
color: palevioletred;
69+
background-color: palevioletred;
70+
}
71+
72+
button.RadSwitch.customIcons.k-switch-off .k-switch-container .rbHovered,
73+
button.RadSwitch.customIcons.k-switch-off:hover .k-switch-container {
74+
box-shadow: inset 0 0 0 1px brown;
75+
}
76+
77+
button.RadButton.customIcons.k-switch-off:hover .k-switch-handle,
78+
button.RadButton.customIcons.k-switch-off.k-state-hover .k-switch-handle {
79+
border-color: brown;
80+
}
81+
82+
.customIcons.k-switch-on .k-switch-handle:before {
83+
font-size: 2em;
84+
content: '\e118';
85+
}
86+
87+
.customIcons.k-switch-off .k-switch-handle:before {
88+
font-size: 2em;
89+
content: '\e11b';
90+
}
91+
/*********************/
92+
````
93+
94+
## Square RadSwitch
95+
96+
>caption Wide RadSwitch with long labels
97+
![Square RadSwitch](images/switch-controlling-appearance-square.gif)
98+
99+
````CSS
100+
/*Make RadSwitch square*/
101+
button.RadSwitch.squareSwitch.k-switch,
102+
button.RadSwitch.squareSwitch.k-switch .k-switch-container,
103+
button.RadSwitch.squareSwitch.k-switch .k-switch-handle {
104+
border-radius: initial;
105+
}
106+
/*********************/
107+
````
108+
109+
## Fluid RadSwitch
110+
111+
````CSS
112+
/*Make RadSwitch fluid*/
113+
.RadButton.RadSwitch.fluidSwitch {
114+
box-sizing: border-box;
115+
}
116+
/*********************/
117+
````
118+
119+
## Elastic RadSwitch
120+
121+
````CSS
122+
/*Make RadSwitch elastic*/
123+
.RadButton.RadSwitch.elasticSwitch .k-switch-handle {
124+
width: 2em;
125+
height: 2em;
126+
}
127+
128+
.RadButton.RadSwitch.k-switch-on.elasticSwitch .k-switch-handle {
129+
left: calc( 100% - 2em);
130+
}
131+
132+
.RadButton.RadSwitch.elasticSwitch,
133+
.RadButton.RadSwitch.elasticSwitch .k-switch-container {
134+
width: 4em;
135+
}
136+
/*********************/
137+
````
138+
139+
## See Also
140+
141+
* [Control the appearance of RadSwitch - demo](https://demos.telerik.com/aspnet-ajax/Switch/Application-Scenarios/Controlling-Appearance/DefaultCS.aspx)
142+

‎controls/switch/appearance-and-styling/images/switch-controlling-appearance-icons.gif‎

15.2 KB
Loading

‎controls/switch/appearance-and-styling/images/switch-controlling-appearance-square.gif‎

19.8 KB
Loading

‎controls/switch/appearance-and-styling/images/switch-controlling-appearance-wide.gif‎

20.3 KB
Loading

‎controls/switch/appearance-and-styling/images/switch-controlling-appearance.png‎

10.6 KB
Loading

0 commit comments

Comments
 (0)