Skip to content

Commit c4b1b66

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent 42a22de commit c4b1b66

File tree

10 files changed

+521
-0
lines changed

10 files changed

+521
-0
lines changed

docs-aspnet/_config-mvc.yml

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -557,6 +557,11 @@ defaults:
557557
values:
558558
title_prefix: "ASP.NET MVC FloatingActionButton Component"
559559
-
560+
scope:
561+
path: "html-helpers/navigation/splitbutton"
562+
values:
563+
title_prefix: "ASP.NET MVC SplitButton Component"
564+
-
560565
scope:
561566
path: "html-helpers/navigation/stepper"
562567
values:

docs-aspnet/_config.yml

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -651,6 +651,8 @@ navigation:
651651
title: "Templates"
652652
"*switch":
653653
title: "Switch"
654+
"*splitbutton":
655+
title: "SplitButton"
654656
"*/globalization":
655657
title: "Globalization"
656658
position: 50
@@ -1093,6 +1095,11 @@ defaults:
10931095
values:
10941096
title_prefix: "ASP.NET Core FloatingActionButton Component"
10951097
-
1098+
scope:
1099+
path: "html-helpers/navigation/splitbutton"
1100+
values:
1101+
title_prefix: "ASP.NET Core SplitButton Component"
1102+
-
10961103
scope:
10971104
path: "html-helpers/navigation/stepper"
10981105
values:

docs-aspnet/html-helpers/charts/data-binding.md

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,45 @@ You can specify the data points of the Charts as part of the series definitions.
117117
)
118118
)
119119
```
120+
{% if site.core %}
121+
```TagHelper
122+
@{
123+
var data2008 = new double[][] { new[] { 16.4, 5.4 }, new[] { 21.7, 2 }, new[] { 25.4, 3 }, new[] { 19.0, 2.0 }, new[] { 10.9, 1 }};
124+
var data2009 = new double[][] { new[] { 6.4, 13.4 }, new[] { 1.7, 11 }, new[] { 5.4, 8 }, new[] { 9.0, 17.0 }, new[] { 1.9, 4 } };
125+
var data2010 = new double[][] { new[] { 21.7, 3 }, new[] { 13.6, 3.5 }, new[] { 13.6, 3 }, new[] { 29.9, 3 }, new[] { 21.7, 20 } };
126+
}
127+
128+
<kendo-chart name="chart">
129+
<chart-title text="Rainfall - Wind Speed">
130+
</chart-title>
131+
<chart-legend position="ChartLegendPosition.Bottom">
132+
</chart-legend>
133+
<series-defaults>
134+
<labels visible="false"></labels>
135+
</series-defaults>
136+
<series>
137+
<series-item type="ChartSeriesType.Scatter" name="January 2008" data="data2008">
138+
</series-item>
139+
<series-item type="ChartSeriesType.Scatter" name="January 2009" data="data2009">
140+
</series-item>
141+
<series-item type="ChartSeriesType.Scatter" name="January 2010" data="data2010">
142+
</series-item>
143+
</series>
144+
<x-axis>
145+
<x-axis-item max="35" type="numeric">
146+
<chart-x-axis-item-title text="Wind Speed [km/h]">
147+
</chart-x-axis-item-title>
148+
</x-axis-item>
149+
</x-axis>
150+
<y-axis>
151+
<y-axis-item min="-5" max="25" axis-crossing-value="new object[] { -5 }" type="numeric">
152+
<chart-y-axis-item-title text="Rainfall [mm]">
153+
</chart-y-axis-item-title>
154+
</y-axis-item>
155+
</y-axis>
156+
</kendo-chart>
157+
```
158+
{% endif %}
120159

121160
### Binding to Arrays of Objects
122161

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 }} SplitButton and learn about the accessibility support it provides through its keyboard navigation functionality."
5+
slug: keynav_aspnetcore_splitbutton
6+
position: 2
7+
---
8+
9+
# Keyboard Navigation
10+
11+
The keyboard navigation of the SplitButton is always available.
12+
13+
For a complete example, refer to the [demo on the keyboard navigation of the SplitButton](https://demos.telerik.com/{{ site.platform }}/splitbutton/keyboard-navigation).
14+
15+
The {{ site.product }} SplitButton 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 SplitButton for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/splitbutton/keyboard-navigation)
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 }} SplitButton and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.1."
5+
slug: accessibility_aspnetcore_splitbutton
6+
position: 1
7+
---
8+
9+
# SplitButton Accessibility
10+
11+
The SplitButton 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 SplitButton]({% slug keynav_aspnetcore_splitbutton %})
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 SplitButton 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 SplitButton 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 SplitButton HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/button/keyboard-navigation)
32+
* [Accessibility in {{ site.product }}]({% slug compliance_accessibility %})
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 SplitButton HtmlHelper for {{ site.framework }}."
5+
slug: htmlhelpers_splitbutton_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 }} SplitButton.
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 SplitButton](https://demos.telerik.com/{{ site.platform }}/splitbutton/appearance).
16+
17+
## Options
18+
19+
The SplitButton 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 SplitButton, configure the `Size()` method with any of the following values:
29+
30+
- `Small`
31+
- `Medium`
32+
- `Large`
33+
- `Null`
34+
35+
The default `Size` value is `Medium`.
36+
37+
```HtmlHelper
38+
@(Html.Kendo().SplitButton()
39+
.Name("splitButton")
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-splitbutton name="splitButton" text="Paste" icon="paste" size="ComponentSize.Medium">
53+
<splitbutton-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+
</splitbutton-items>
58+
</kendo-splitbutton>
59+
```
60+
{% endif %}
61+
62+
### FillMode
63+
64+
To manipulate the fill mode of the SplitButton, configure the `FillMode()` method with any of the following values:
65+
66+
- `Solid`
67+
- `Outline`
68+
- `Flat`
69+
- `Null`
70+
71+
The default `FillMode` value is `Solid`.
72+
73+
```HtmlHelper
74+
@(Html.Kendo().SplitButton()
75+
.Name("splitButton")
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-splitbutton name="splitButton" text="Paste" icon="paste" fill-mode="FillMode.Solid">
89+
<splitbutton-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+
</splitbutton-items>
94+
</kendo-splitbutton>
95+
```
96+
{% endif %}
97+
98+
### ThemeColor
99+
100+
To specify the theme color of the SplitButton, 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().SplitButton()
118+
.Name("splitButton")
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-splitbutton name="splitButton" text="Paste" icon="paste" theme-color="ThemeColor.Base">
132+
<splitbutton-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+
</splitbutton-items>
137+
</kendo-splitbutton>
138+
```
139+
{% endif %}
140+
141+
### Rounded
142+
143+
To set the border radius of the SplitButton, configure the `Rounded()` method with any of the following values:
144+
145+
- `Small`
146+
- `Medium`
147+
- `Large`
148+
- `Full`
149+
- `Null`
150+
151+
The default `Rounded` value is `Medium`.
152+
153+
```HtmlHelper
154+
@(Html.Kendo().SplitButton()
155+
.Name("splitButton")
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-splitbutton name="splitButton" text="Paste" icon="paste" rounded="Rounded.Medium">
169+
<splitbutton-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+
</splitbutton-items>
174+
</kendo-splitbutton>
175+
```
176+
{% endif %}
177+
178+
## See Also
179+
180+
* [Appearance of the SplitButton HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/button/appearance)
181+
* [Button Server-Side API](/api/button)
182+
* [Button Client-Side API](https://docs.telerik.com/kendo-ui/api/javascript/ui/splitbutton)

0 commit comments

Comments
 (0)