Skip to content

Commit e1ea899

Browse files
donchoMilkovMpepinho24
donchoMilkovM
and
pepinho24
committed
RadSplitButton_docs squash (#395)
* docs(splitbutton): add documentation structure * docs(splitbutton): add GettingStarted * docs(splitbutton): add SingleClick * docs(splitbutton): add ContextMenu * docs(splitbutton): add Overview * docs(splitbutton): add image to GettingStarted * docs(splitbutton): add ElasticDesign * docs(splitbutton): add FluidDesign * docs(splitbutton): add MobileSupport Overview * docs(splitbutton): add RenderModes * docs(splitbutton): add links in Overview article * docs(splitbutton): fix slug and typos * docs(splitbutton): add wai-aria support * docs(splitbutton): add wcag and section508 compliance * docs(splitbutton): add skins article * docs(splitbutton): add primary action button article * docs(splitbutton): add create a custom skin article * docs(splitbutton): remove flat button article from structure * docs(splitbutton): fix slugs and typos * docs(splitbutton): add server-side programming * docs(splitbutton): add client-side programming overview * docs(splitbutton): add splitbutton object article * docs(splitbutton): add client side events articles * docs(splitbutton): add troubleshooting articles * docs(splitbutton): some improvements after code implementations * docs(splitbutton): fix typos * docs(splitbutton): add ClientContextMenuItemClicked event * docs(splitbutton): add Embedded Icons article * docs(splitbutton): add Custom Icons article * docs(splitbutton): add icons Fine Tune article * docs(splitbutton): add SeeAlso section * docs(splitbutton): add content template article * docs(splitbutton): add embedded context menu article * docs(splitbutton): fix typo * docs(splitbutton): fix issues * docs(splitbutton): fix pushbutton leftovers * docs(splitbutton): fix minor issues * docs(splitbutton): add Custom attributes samples Co-authored-by: Peter Milchev <peter.milchev@progress.com>
1 parent 4d7774f commit e1ea899

File tree

55 files changed

+2051
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+2051
-0
lines changed

‎_config.yml‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -410,6 +410,9 @@ navigation:
410410
"controls/spell":
411411
title: "Spell"
412412
position: 1
413+
"controls/splitbutton":
414+
title: "SplitButton"
415+
position: 1
413416
"controls/splitter":
414417
title: "Splitter"
415418
position: 1
@@ -2022,6 +2025,7 @@ intro_columns:
20222025
"RibbonBar": "ribbonbar/overview"
20232026
"SearchBox": "searchbox/overview"
20242027
"SiteMap": "sitemap/overview"
2028+
"SplitButton": "splitbutton/overview"
20252029
"Switch": "switch/overview"
20262030
"Tab Strip": "tabstrip/overview"
20272031
"Timeline": "timeline/overview"

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
---
2+
title: Keyboard Support
3+
page_title: Keyboard Support - RadSplitButton
4+
description: Check our Web Forms article about Keyboard Support.
5+
slug: splitbutton/accessibility-and-internationalization/keyboard-support
6+
tags: keyboard,support
7+
published: True
8+
position: 2
9+
---
10+
11+
12+
# Keyboard Support
13+
14+
There are several ways to use the **RadSplitButton** via the keyboard only:
15+
16+
* Set its **TabIndex** property and use the **Tab** key to navigate to the desired button and then press the **Enter** key to invoke a click on the button.
17+
18+
* 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).
19+
20+
>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".
21+
22+
Once the **SplitButton** is focused, you can use the `Alt` + `Down Arrow` to open and focus the button's **ContextMenu**. Then, you can leverage the [ContextMenu's keyboard support]({%slug menu/accessibility-and-internationalization/keyboard-support%}) to navigate, select and close the dropdown.
23+
24+
## See Also
25+
26+
* [WCAG 2.0 and Section 508 Accessibility Compliance]({%slug splitbutton/accessibility-and-internationalization/wcag-2.0-and-section-508-accessibility-compliance%})
27+
28+
* [Right-to-Left Support]({%slug splitbutton/accessibility-and-internationalization/right-to-left-support%})

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

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
title: Right-to-Left Support
3+
page_title: Right-to-Left Support - RadSplitButton
4+
description: Check our Web Forms article about Right-to-Left Support.
5+
slug: splitbutton/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+
14+
The **RadSplitButton** 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.
15+
16+
>caption Figure 1: RadSplitButton in RTL mode.
17+
18+
![radsplitbutton-rtl-screenshot](../images/splitbutton-rtl-screenshot.png)
19+
20+
>caption Example 1: Set the dir=rtl attribute to the **RadSplitButton**'s wrapper element in order to enable the RTL support for the control.
21+
22+
````ASP.NET
23+
<div dir="rtl">
24+
<telerik:RadSplitButton runat="server" AutoPostBack="true" ID="RadSplitButton1" Skin="Silk" Text="Paste" CommandName="Paste">
25+
<ContextMenu>
26+
<Items>
27+
<telerik:RadMenuItem Text="Paste plain" Value="PastePlain"></telerik:RadMenuItem>
28+
<telerik:RadMenuItem Text="Paste as HTML" Value="PasteHtml"></telerik:RadMenuItem>
29+
</Items>
30+
</ContextMenu>
31+
</telerik:RadSplitButton>
32+
</div>
33+
````
34+
35+
## See Also
36+
37+
* [See this live in an online demo](https://demos.telerik.com/aspnet-ajax/splitbutton/right-to-left-support/defaultcs.aspx)
38+
39+
* [WCAG 2.0 and Section 508 Accessibility Compliance]({%slug splitbutton/accessibility-and-internationalization/wcag-2.0-and-section-508-accessibility-compliance%})
40+
41+
* [Keyboard Support]({%slug splitbutton/accessibility-and-internationalization/keyboard-support%})
42+

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

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
---
2+
title: WAI-ARIA Support
3+
page_title: WAI-ARIA Support - RadSplitButton
4+
description: Check our Web Forms article about WAI-ARIA Support.
5+
slug: splitbutton/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: RadSplitButton")
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. **RadSplitButton** offers WAI-ARIA support.
16+
17+
In order to enable the WAI-ARIA support, set the **RadSplitButton** 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 RadSplitButton
20+
21+
````ASP.NET
22+
<%--AriaLabel--%>
23+
<telerik:RadSplitButton ID="RadSplitButton1" runat="server" EnableAriaSupport="true" Text="Split Button with WAI-ARIA attributes">
24+
<AriaSettings Label="Some Label Value" />
25+
</telerik:RadSplitButton>
26+
27+
<%--DescribedBy--%>
28+
<asp:Label Text="SplitButton aria label" runat="server" ID="Label1" ClientIDMode="Static" />
29+
<telerik:RadSplitButton ID="RadSplitButton2" runat="server" EnableAriaSupport="true" Text="Split Button with WAI-ARIA attributes">
30+
<AriaSettings DescribedBy="Label1" />
31+
</telerik:RadSplitButton>
32+
````
33+
34+
>note The implementation of the WAI ARIA support is achieved entirely 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.
35+
36+
37+
38+
## See Also
39+
40+
* [Live Demo: RadSplitButton WAI-ARIA Support](https://demos.telerik.com/aspnet-ajax/splitbutton/wai-aria-support/defaultcs.aspx)
41+
42+
* [W3C: WAI-ARIA Overview](https://www.w3.org/WAI/intro/aria)
43+
44+

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
---
2+
title: WCAG 2.0 and Section 508 Accessibility Compliance
3+
page_title: WCAG 2.0 and Section 508 Accessibility Compliance - RadSplitButton
4+
description: Check our Web Forms article about WCAG 2.0 and Section 508 Accessibility Compliance.
5+
slug: splitbutton/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 **RadSplitButton 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 splitbutton/accessibility-and-internationalization/keyboard-support%}).
18+
19+
## See Also
20+
21+
* [Section 508](http://www.section508.gov/)
22+
23+
* [Web Content Accessibility Guidelines (WCAG) 2.0](https://www.w3.org/TR/WCAG/)
24+
25+
* [Live Demo: RadSplitButton WCAG 2.0 and Section 508 Accessibility Compliance](https://demos.telerik.com/aspnet-ajax/splitbutton/accessibility-support/defaultcs.aspx)
26+
27+
* [Right-to-Left Support]({%slug splitbutton/accessibility-and-internationalization/right-to-left-support%})
28+
29+
* [Keyboard Support]({%slug splitbutton/accessibility-and-internationalization/keyboard-support%})
30+

‎controls/splitbutton/appearance-and-styling/create-a-custom-skin.md‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
---
2+
title: Create a Custom Skin
3+
page_title: Create a Custom Skin - RadSplitButton
4+
description: Check our Web Forms article about Create a Custom Skin.
5+
slug: splitbutton/appearance-and-styling/create-a-custom-skin
6+
tags: create,a,custom,skin
7+
published: True
8+
position: 3
9+
---
10+
11+
# Create a Custom Skin
12+
13+
Each of the controls included in the **Telerik® UI for ASP.NET AJAX** suite is styled with two CSS files that are loaded in a certain order. The first file – **[ControlName].css** , also called base stylesheet, contains CSS properties and values that are common for all skins, i.e., it is layout-specific, not skin-specific. These are CSS float, padding, margin, font-size, font-family, etc. In general, when creating a custom skin for a control, this file should not be edited unless the custom skin needs different sizes, padding and / or margins.
14+
15+
The second file represents the actual skin of the control, and its name consists of the control name plus the skin name, e.g., - **Button.Default.css**. Upon creating a custom skin for the control, one should edit that particular file, as it contains skin-specific CSS properties and references to images, colors, borders and backgrounds.
16+
17+
## Create a RadSplitButton Skin from an Existing One
18+
19+
1. In your project, create a new directory named **Skins**;
20+
21+
1. In the **Skins** folder if you already have some custom skin, most probably you have already a folder named: **MyCustomSkin** – if you don’t – create one;
22+
23+
1. In the **Skins** folder, create a new folder named: **MyCustomSkinLite** - this is the place where your Lightweight custom skins CSS will be placed;
24+
25+
1. Go to **[ControlsInstallationFolder]\Skins\DefaultLite** and copy **Button.Default.css** and **Menu.Default.css** into your **MyCustomSkinLite** folder;
26+
27+
1. Go to **[TelerikControlsInstallationFolder]\Skins\Default** and copy the **Common** folder into your **MyCustomSkin** folder;
28+
29+
1. Rename **Button.Default.css** to **Button.MyCustomSkin.css** and **Menu.Default.css** to **Menu.MyCustomSkin.css**;
30+
31+
1. When you are finished you should have the following folder structure in your project:
32+
33+
1. **Skins/MyCustomSkin/Common/** - containing several sprites;
34+
35+
1. **Skins/MyCustomSkinLite/Button.MyCustomSkin.css**.
36+
37+
1. **Skins/MyCustomSkinLite/Menu.MyCustomSkin.css**.
38+
39+
1. In order to support multiple skins of **RadSplitButton** on a single page, the wrapping skin-specific class is created by the name of the control, plus underscore ("_") plus SkinName, i.e., **.RadButton_Default**, so in order to create a custom skin out of the Default skin, we should rename all occurrences of **"RadButton_Default"** in **Button.MyCustomSkin.css** to **"RadButton_MyCustomSkin"** as shown below and **"RadMenu_Default"** in **Menu.MyCustomSkin.css** to **"RadMenu_MyCustomSkin"** in the same manner.
40+
41+
![Rename Button Light](images/RenameButtonLight.png)
42+
43+
1. Add a new server declaration of **RadSplitButton** on your page, and set **Skin="MyCustomSkin"** and **EnableEmbeddedSkins="false"**:
44+
45+
**ASP.NET**
46+
47+
<telerik:RadSplitButton ID="RadSplitButton1" runat="server" EnableEmbeddedSkins="false" Skin="MyCustomSkin" />
48+
49+
1. Register **Button.MyCustomSkin.css** and **Menu.MyCustomSkin.css** in the head section of your web page. In order to have the CSS applied correctly, the base stylesheet should come first in the DOM:
50+
51+
**ASP.NET**
52+
53+
<link href="Skins/MyCustomSkin/Button.MyCustomSkin.css" rel="stylesheet" type="text/css" />
54+
<link href="Skins/MyCustomSkin/Menu.MyCustomSkin.css" rel="stylesheet" type="text/css" />
55+
56+
1. Make sure the path to the files is correct; otherwise the skin will not apply;
57+
58+
1. Reload the page, and if the steps above have been followed correctly, you will see **RadSplitButton** running a custom Default skin set as an external resource.
59+
60+
## Custom Skin Example
61+
62+
The example below shows how to modify the CSS in order not only to change some colors and background colors, but also some base layout settings such as font size, element height, border-radius, etc.
63+
64+
````ASPX
65+
<asp:ScriptManager runat="server"></asp:ScriptManager>
66+
<telerik:RadSplitButton runat="server" Text="SplitButton">
67+
<ContextMenu>
68+
<Items>
69+
<telerik:RadMenuItem Text="Action1"></telerik:RadMenuItem>
70+
<telerik:RadMenuItem Text="Action2"></telerik:RadMenuItem>
71+
<telerik:RadMenuItem Text="Action3"></telerik:RadMenuItem>
72+
</Items>
73+
</ContextMenu>
74+
</telerik:RadSplitButton>
75+
````
76+
````CSS
77+
/* Button normal state */
78+
.RadButton.RadButton_Default.rbButton,
79+
.RadButton.RadButton_Default.rbButton .rbSplitPart {
80+
background-color: #80078e;
81+
background-image: linear-gradient(#4f0258, #80078e 100%);
82+
border-color: #6b536e;
83+
color: #fff;
84+
}
85+
86+
/* Button hovered state */
87+
.RadButton.RadButton_Default.rbButton.rbHovered,
88+
.RadButton.RadButton_Default.rbButton .rbSplitPart.rbHovered {
89+
background-color: #660283;
90+
background-image: linear-gradient(#660283, #f2ddf8 100%);
91+
border-color: #47035a;
92+
color: #3a0470;
93+
}
94+
95+
/* ContextMenu normal state */
96+
.RadMenu.RadMenu_Default .rmGroup {
97+
border-color: #6b536e;
98+
color: #fff;
99+
background-color: #80078e;
100+
}
101+
.RadMenu.RadMenu_Default .rmGroup:before {
102+
border-color: transparent;
103+
background-color: #80078e;
104+
}
105+
106+
/* ContextMenu hovered state */
107+
.RadMenu.RadMenu_Default .rmGroup .rmLink:hover {
108+
background-color: #660283;
109+
background-image: linear-gradient(#660283, #f2ddf8 100%);
110+
border-color: #47035a;
111+
color: #3a0470;
112+
}
113+
````
114+
115+
## See Also
116+
117+
* [Render Modes]({%slug splitbutton/mobile-support/render-modes%})

‎controls/splitbutton/appearance-and-styling/images/RenameButtonLight.png‎

18.2 KB
Loading

‎controls/splitbutton/appearance-and-styling/images/primary-action-button.png‎

8.17 KB
Loading

‎controls/splitbutton/appearance-and-styling/images/splitbutton-skins-fade.gif‎

194 KB
Loading

‎controls/splitbutton/appearance-and-styling/primary-action-button.md‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
---
2+
title: Primary Action Button
3+
page_title: Primary Action Button - RadSplitButton
4+
description: Check our Web Forms article about Primary Action Button.
5+
slug: splitbutton/appearance-and-styling/primary-action-button
6+
tags: primary,and,secondary,action,buttons,state
7+
published: True
8+
position: 1
9+
---
10+
11+
# Primary Action Button
12+
13+
@[template](/_templates/common/primary-action-button.md#intro-base "control: **RadSplitButton**")
14+
15+
@[template](/_templates/common/primary-action-button.md#intro-main "control: **RadSplitButton**")
16+
17+
@[template](/_templates/common/primary-action-button.md#configuration "control: RadSplitButton")
18+
19+
````ASPX
20+
<telerik:RadSplitButton runat="server" ID="RadSplitButton1" Text="Primary SplitButton" Primary="true">
21+
<ContextMenu>
22+
<Items>
23+
...
24+
</Items>
25+
</ContextMenu>
26+
</telerik:RadSplitButton>
27+
````
28+
29+
## See Also
30+
31+
* [Skins]({%slug splitbutton/appearance-and-styling/skins%})
32+
33+
* [Create a Custom Skin]({%slug splitbutton/appearance-and-styling/create-a-custom-skin%})

0 commit comments

Comments
 (0)