Skip to content

Commit 9183193

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent 53080e4 commit 9183193

File tree

12 files changed

+483
-11
lines changed

12 files changed

+483
-11
lines changed

‎docs-aspnet/_config.yml

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -480,7 +480,7 @@ navigation:
480480
title: "AutoComplete"
481481
"*barcode":
482482
title: "BarCode"
483-
"*button":
483+
"*/button":
484484
title: "Button"
485485
"*buttongroup":
486486
title: "ButtonGroup"
@@ -653,6 +653,8 @@ navigation:
653653
title: "Switch"
654654
"*splitbutton":
655655
title: "SplitButton"
656+
"*/dropdownbutton":
657+
title: "DropDownButton"
656658
"*/globalization":
657659
title: "Globalization"
658660
position: 50

‎docs-aspnet/html-helpers/navigation/dropdownbutton/accessibility/keyboard-navigation.md

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
---
2+
title: Keyboard Navigation
3+
page_title: Keyboard Navigation
4+
description: "Get started with the {{ site.product }} DropDownButton and learn about the accessibility support it provides through its keyboard navigation functionality."
5+
slug: keynav_aspnetcore_dropdownbutton
6+
position: 2
7+
---
8+
9+
# Keyboard Navigation
10+
11+
The keyboard navigation of the DropDownButton is always available.
12+
13+
For a complete example, refer to the [demo on the keyboard navigation of the DropDownButton](https://demos.telerik.com/{{ site.platform }}/dropdownbutton/keyboard-navigation).
14+
15+
The {{ site.product }} DropDownButton supports the following shortcuts
16+
17+
| SHORTCUT | DESCRIPTION |
18+
|:--- |:--- |
19+
| `Access key + W` | Focuses the wiget. |
20+
| `Up Arrow` | Highlights the previous item. |
21+
| `Down Arrow` | Highlights the next item. |
22+
| `Home` | Highlights the first item. |
23+
| `End` | Highlights the last item. |
24+
| `Enter` | Selects the highlighted item. |
25+
| `Esc` | Closes the popup. |
26+
| `Alt + Down Arrow` | Opens the popup. |
27+
| `Alt + Up Arrow` | Closes the popup. |
28+
29+
## See Also
30+
31+
* [Keyboard Navigation in the DropDownButton for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/dropdownbutton/keyboard-navigation)

‎docs-aspnet/html-helpers/navigation/dropdownbutton/accessibility/overview.md

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
---
2+
title: Overview
3+
page_title: Accessibility
4+
description: "Get started with the {{ site.product }} DropDownButton and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.1."
5+
slug: accessibility_aspnetcore_dropdownbutton
6+
position: 1
7+
---
8+
9+
# DropDownButton Accessibility
10+
11+
The DropDownButton is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.1, and keyboard support.
12+
13+
For more information, refer to:
14+
* [Keyboard navigation by the Telerik UI DropDownButton]({% slug keynav_aspnetcore_dropdownbutton %})
15+
* [Accessibility in {{ site.product }}]({% slug overview_accessibility %})
16+
17+
## WAI-ARIA
18+
19+
The component follows the WAI-ARIA Authoring Practices for implementing the keyboard navigation for its component role and is tested against the popular screen readers. For more information, refer to the article on [WAI-ARIA support in {{ site.product }}]({% slug overview_accessibility %}#wai-aria).
20+
21+
## Section 508
22+
23+
The DropDownButton is compliant with the Section 508 requirements. For more information, refer to the article on [Section 508 support in Telerik {{ site.product_short }}]({% slug overview_accessibility %}#section-508).
24+
25+
## WCAG 2.1
26+
27+
The DropDownButton supports the standards for providing accessible web content which are set by the [Web Content Accessibility Guidelines 2.1](https://www.w3.org/TR/WCAG/). For more information, refer to the article on [WCAG 2.1 compliance in {{ site.product }} ]({% slug overview_accessibility %}#wcag-21)
28+
29+
## See Also
30+
31+
* [Keyboard Navigation by the DropDownButton HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/dropdownbutton/keyboard-navigation)
32+
* [Accessibility in {{ site.product }}]({% slug compliance_accessibility %})

‎docs-aspnet/html-helpers/navigation/dropdownbutton/appearance.md

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
---
2+
title: Appearance
3+
page_title: Appearance
4+
description: "Learn how to customize the appearance of the Telerik UI DropDownButton HtmlHelper for {{ site.framework }}."
5+
slug: htmlhelpers_dropdownbutton_aspnetcore_appearance
6+
position: 3
7+
---
8+
9+
# Appearance
10+
11+
In this article, you will find information about the rendering and styling options of the {{ site.product }} DropDownButton.
12+
13+
For general information regarding the rendering, visit the [Components Rendering](https://docs.telerik.com/{{ site.platform }}/styles-and-layout/components-rendering-overview) article.
14+
15+
For a complete example, refer to the [Appearance Demo of the DropDownButton](https://demos.telerik.com/{{ site.platform }}/dropdownbutton/appearance).
16+
17+
## Options
18+
19+
The DropDownButton provides the following methods for styling:
20+
21+
- [`Size()`](#size)—configures the overall size of the component.
22+
- [`ThemeColor()`](#themecolor)—configures what color will be applied to the component.
23+
- [`FillMode()`](#fillmode)—defines how the color is applied to the component.
24+
- [`Rounded()`](#rounded)—determines the border radius of the component.
25+
26+
### Size
27+
28+
To control the size of the DropDownButton, configure the `Size()` method with any of the following values:
29+
30+
- `Small`
31+
- `Medium`
32+
- `Large`
33+
- `None`
34+
35+
The default `Size` value is `Medium`.
36+
37+
```HtmlHelper
38+
@(Html.Kendo().DropDownButton()
39+
.Name("DropDownButton")
40+
.Icon("paste")
41+
.Size(ComponentSize.Medium)
42+
.Items(items =>
43+
{
44+
items.Add().Id("keep-text").Text("Keep Text Only").Icon("paste-plain-text");
45+
items.Add().Id("paste-html").Text("Paste as HTML").Icon("paste-as-html");
46+
items.Add().Id("paste-markdown").Text("Paste Markdown").Icon("paste-markdown");
47+
}
48+
)
49+
```
50+
{% if site.core %}
51+
```TagHelper
52+
<kendo-dropdownbutton name="DropDownButton" text="Paste" icon="paste" size="ComponentSize.Medium">
53+
<dropdownbutton-items>
54+
<item id="keep-text" text="Keep Text Only" icon="paste-plain-text"></item>
55+
<item id="paste-html" text="Paste as HTML" icon="paste-as-html"></item>
56+
<item id="paste-markdown" text="Paste Markdown" icon="paste-markdown"></item>
57+
</dropdownbutton-items>
58+
</kendo-dropdownbutton>
59+
```
60+
{% endif %}
61+
62+
### FillMode
63+
64+
To manipulate the fill mode of the DropDownButton, configure the `FillMode()` method with any of the following values:
65+
66+
- `Solid`
67+
- `Outline`
68+
- `Flat`
69+
- `None`
70+
71+
The default `FillMode` value is `Solid`.
72+
73+
```HtmlHelper
74+
@(Html.Kendo().DropDownButton()
75+
.Name("DropDownButton")
76+
.Icon("paste")
77+
.FillMode(FillMode.Solid)
78+
.Items(items =>
79+
{
80+
items.Add().Id("keep-text").Text("Keep Text Only").Icon("paste-plain-text");
81+
items.Add().Id("paste-html").Text("Paste as HTML").Icon("paste-as-html");
82+
items.Add().Id("paste-markdown").Text("Paste Markdown").Icon("paste-markdown");
83+
}
84+
)
85+
```
86+
{% if site.core %}
87+
```TagHelper
88+
<kendo-dropdownbutton name="DropDownButton" text="Paste" icon="paste" fill-mode="FillMode.Solid">
89+
<dropdownbutton-items>
90+
<item id="keep-text" text="Keep Text Only" icon="paste-plain-text"></item>
91+
<item id="paste-html" text="Paste as HTML" icon="paste-as-html"></item>
92+
<item id="paste-markdown" text="Paste Markdown" icon="paste-markdown"></item>
93+
</dropdownbutton-items>
94+
</kendo-dropdownbutton>
95+
```
96+
{% endif %}
97+
98+
### ThemeColor
99+
100+
To specify the theme color of the DropDownButton, configure the `ThemeColor()` method with any of the following values:
101+
102+
- `Base`
103+
- `Primary`
104+
- `Secondary`
105+
- `Tertiary`
106+
- `Info`
107+
- `Success`
108+
- `Warning`
109+
- `Error`
110+
- `Dark`
111+
- `Light`
112+
- `Inverse`
113+
114+
The default `ThemeColor` value is `Base`.
115+
116+
```HtmlHelper
117+
@(Html.Kendo().DropDownButton()
118+
.Name("DropDownButton")
119+
.Icon("paste")
120+
.ThemeColor(ThemeColor.Base)
121+
.Items(items =>
122+
{
123+
items.Add().Id("keep-text").Text("Keep Text Only").Icon("paste-plain-text");
124+
items.Add().Id("paste-html").Text("Paste as HTML").Icon("paste-as-html");
125+
items.Add().Id("paste-markdown").Text("Paste Markdown").Icon("paste-markdown");
126+
}
127+
)
128+
```
129+
{% if site.core %}
130+
```TagHelper
131+
<kendo-dropdownbutton name="DropDownButton" text="Paste" icon="paste" theme-color="ThemeColor.Base">
132+
<dropdownbutton-items>
133+
<item id="keep-text" text="Keep Text Only" icon="paste-plain-text"></item>
134+
<item id="paste-html" text="Paste as HTML" icon="paste-as-html"></item>
135+
<item id="paste-markdown" text="Paste Markdown" icon="paste-markdown"></item>
136+
</dropdownbutton-items>
137+
</kendo-dropdownbutton>
138+
```
139+
{% endif %}
140+
141+
### Rounded
142+
143+
To set the border radius of the DropDownButton, configure the `Rounded()` method with any of the following values:
144+
145+
- `Small`
146+
- `Medium`
147+
- `Large`
148+
- `Full`
149+
- `None`
150+
151+
The default `Rounded` value is `Medium`.
152+
153+
```HtmlHelper
154+
@(Html.Kendo().DropDownButton()
155+
.Name("DropDownButton")
156+
.Icon("paste")
157+
.Rounded(Rounded.Medium)
158+
.Items(items =>
159+
{
160+
items.Add().Id("keep-text").Text("Keep Text Only").Icon("paste-plain-text");
161+
items.Add().Id("paste-html").Text("Paste as HTML").Icon("paste-as-html");
162+
items.Add().Id("paste-markdown").Text("Paste Markdown").Icon("paste-markdown");
163+
}
164+
)
165+
```
166+
{% if site.core %}
167+
```TagHelper
168+
<kendo-dropdownbutton name="DropDownButton" text="Paste" icon="paste" rounded="Rounded.Medium">
169+
<dropdownbutton-items>
170+
<item id="keep-text" text="Keep Text Only" icon="paste-plain-text"></item>
171+
<item id="paste-html" text="Paste as HTML" icon="paste-as-html"></item>
172+
<item id="paste-markdown" text="Paste Markdown" icon="paste-markdown"></item>
173+
</dropdownbutton-items>
174+
</kendo-dropdownbutton>
175+
```
176+
{% endif %}
177+
178+
## See Also
179+
180+
* [Appearance of the DropDownButton HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/dropdownbutton/appearance)
181+
* [Button Server-Side API](/api/button)
182+
* [Button Client-Side API](https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownbutton)

‎docs-aspnet/html-helpers/navigation/dropdownbutton/icons.md

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
---
2+
title: Icons
3+
page_title: Icons
4+
description: "Get started with the Telerik UI {{ site.platform }} DropDownButton and add background, image, or font icons to enhance the visualization of the widget."
5+
slug: htmlhelpers_dropdownbutton_aspnetcore_icons
6+
position: 4
7+
---
8+
9+
# Icons
10+
11+
The DropDownButton provides the `Icon`, `SpriteCssClass`, and `ImageUrl` properties for configuring icons. With a specific DropDownButton instance, you have to use only one of them&mdash;if you define multiple properties, the DropDownButton will work with only one of them in the order previously stated.
12+
13+
* `Icon()`&mdash;This method displays the appropriate [Kendo UI font icon.](https://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes/font-icons)
14+
15+
```HtmlHelper
16+
@(Html.Kendo().DropDownButton()
17+
.Name("DropDownButton")
18+
.Text("Plus")
19+
.Icon("plus")
20+
)
21+
```
22+
{% if site.core %}
23+
```TagHelper
24+
<kendo-dropdownbutton name="DropDownButton" text="Plus" icon="plus">
25+
</kendo-dropdownbutton>
26+
```
27+
{% endif %}
28+
* `SpriteCssClass()`&mdash;This method displays the icon as a background of a span element instead.
29+
30+
```HtmlHelper
31+
@(Html.Kendo().DropDownButton()
32+
.Name("DropDownButton")
33+
.Text("Plus")
34+
.SpriteCssClass("myPlusIcon")
35+
)
36+
```
37+
{% if site.core %}
38+
```TagHelper.cshtml
39+
<kendo-dropdownbutton name="DropDownButton" text="Plus" sprite-css-class="myPlusIcon">
40+
</kendo-dropdownbutton>
41+
```
42+
{% endif %}
43+
* `ImageUrl()`&mdash;This method applies image icons.
44+
45+
```HtmlHelper
46+
@(Html.Kendo().DropDownButton()
47+
.Name("DropDownButton")
48+
.Text("Plus")
49+
.ImageUrl("url/to/myPlusIcon.png")
50+
)
51+
52+
```
53+
{% if site.core %}
54+
```TagHelper
55+
<kendo-dropdownbutton name="DropDownButton" text="Plus" image-url="url/to/myPlusIcon.png">
56+
</kendo-dropdownbutton>
57+
```
58+
{% endif %}
59+
60+
## Font Icons
61+
62+
You can integrate FontAwesome or other font icons by setting the required third-party CSS classes over the `.SpriteCssClass()` configuration method. However, this approach will render a `k-sprite` CSS class, which applies font and size styles that may interfere with the font icon styles.
63+
64+
```HtmlHelper
65+
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />
66+
<style>
67+
.k-button .fa {
68+
font-size: inherit;
69+
line-height: inherit;
70+
width: auto;
71+
height: auto;
72+
margin-left: 0;
73+
}
74+
</style>
75+
76+
@(Html.Kendo().DropDownButton()
77+
.Name("DropDownButton")
78+
.Text("Archive")
79+
.SpriteCssClass("fa fa-archive")
80+
.Items(items =>
81+
{
82+
items.Add().Text("Item 1");
83+
items.Add().Text("Item 2");
84+
})
85+
)
86+
```
87+
{% if site.core %}
88+
```TagHelper
89+
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />
90+
<style>
91+
.k-button .fa {
92+
font-size: inherit;
93+
line-height: inherit;
94+
width: auto;
95+
height: auto;
96+
margin-left: 0;
97+
}
98+
</style>
99+
100+
<kendo-dropdownbutton name="DropDownButton" text="Archive" sprite-css-class="fa fa-archive">
101+
<dropdownbutton-items>
102+
<item text="Item 1"></item>
103+
<item text="Item 2"></item>
104+
</dropdownbutton-items>
105+
</kendo-dropdownbutton>
106+
```
107+
{% endif %}
108+
109+
## See Also
110+
111+
* [Icons in the DropDownButton (Demo)](https://demos.telerik.com/{{ site.platform }}/dropdownbutton/icons)
112+
* [Server-Side API](/api/dropdownbutton)

0 commit comments

Comments
 (0)