Skip to content

Commit 800a0b5

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent 3937b16 commit 800a0b5

File tree

80 files changed

+3035
-1861
lines changed

Some content is hidden

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

80 files changed

+3035
-1861
lines changed

‎docs-aspnet/accessibility/accessibility-compliance-core.html‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@
7474
<td>AAA</td>
7575
<td>n/a</td>
7676
</tr>
77-
<tr>
77+
<tr>
7878
<td>CheckBoxGroup</td>
7979
<td>Yes</td>
8080
<td>AAA</td>
@@ -164,6 +164,12 @@
164164
<td>AAA</td>
165165
<td><a href="https://demos.telerik.com/aspnet-core/filemanager/keyboard-navigation">Yes</a></td>
166166
</tr>
167+
<tr>
168+
<td>FlatColorPicker</td>
169+
<td>Yes</td>
170+
<td>AA</td>
171+
<td><a href="https://demos.telerik.com/aspnet-core/flatcolorpicker/keyboard-navigation">Yes</a></td>
172+
</tr>
167173
<tr>
168174
<td>FloatingActionButton</td>
169175
<td>Yes</td>
@@ -308,7 +314,7 @@
308314
<td>AAA</td>
309315
<td>n/a</td>
310316
</tr>
311-
<tr>
317+
<tr>
312318
<td>RadioGroup</td>
313319
<td>Yes</td>
314320
<td>AAA</td>

‎docs-aspnet/accessibility/accessibility-compliance-mvc.html‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@
7474
<td>AAA</td>
7575
<td>-</td>
7676
</tr>
77-
<tr>
77+
<tr>
7878
<td>CheckBoxGroup</td>
7979
<td>Yes</td>
8080
<td>AAA</td>
@@ -176,6 +176,12 @@
176176
<td>AAA</td>
177177
<td><a href="https://demos.telerik.com/aspnet-mvc/filemanager/keyboard-navigation">Yes</a></td>
178178
</tr>
179+
<tr>
180+
<td>FlatColorPicker</td>
181+
<td>Yes</td>
182+
<td>AA</td>
183+
<td><a href="https://demos.telerik.com/aspnet-mvc/flatcolorpicker/keyboard-navigation">Yes</a></td>
184+
</tr>
179185
<tr>
180186
<td>FloatingActionButton</td>
181187
<td>Yes</td>
@@ -320,7 +326,7 @@
320326
<td>AAA</td>
321327
<td>-</td>
322328
</tr>
323-
<tr>
329+
<tr>
324330
<td>RadioGroup</td>
325331
<td>Yes</td>
326332
<td>AAA</td>

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
---
2+
title: Keyboard Navigation
3+
page_title: The {{ site.product }} FlatColorPicker Documentation | Keyboard Navigation
4+
description: "Get started with the {{ site.product }} FlatColorPicker by Kendo UI and learn about the accessibility support it provides through its keyboard navigation functionality."
5+
slug: keyboard_navigation_flatcolorpickerhelper_aspnetcore
6+
position: 2
7+
---
8+
9+
# Keyboard Navigation
10+
11+
The keyboard navigation of the FlatColorPicker is always enabled.
12+
13+
The Kendo UI FlatColorPicker supports the following keyboard shortcuts:
14+
15+
| SHORTCUT | DESCRIPTION |
16+
|:--- |:--- |
17+
| `Space/Enter` | When the Toggle format button is focused, changes the format between RGB and HEX. When a View button is focused, switches to Palette or Gradient view.|
18+
| `Tab` | navigates to the next FlatColorPicker element.|
19+
| `Shift`+`Tab` | navigates to the previous FlatColorPicker element.|
20+
| `Arrow Up/Right` | When any of the FlatColorPicker's sliders is focused, increases their value. When the drag handle in the FlatColorPicker canvas is focused, moves in the corresponding direction.|
21+
| `Arrow Down/Left` | When any of the FlatColorPicker's sliders is focused, decreases their value. When the drag handle in the FlatColorPicker canvas is focused, moves in the corresponding direction.|
22+
23+
For a complete example, refer to the [demo on keyboard navigation of the FlatColorPicker](https://demos.telerik.com/{{ site.platform }}/flatcolorpicker/keyboard-navigation).
24+
25+
## See Also
26+
27+
* [Keyboard Navigation of the FlatColorPicker (Demo)](https://demos.telerik.com/{{ site.platform }}/flatcolorpicker/keyboard-navigation)
28+
* [FlatColorPicker Accessibility Overview]({% slug accessibility_flatcolorpickerhelper_aspnetcore %})

‎docs-aspnet/html-helpers/editors/flatcolorpicker/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: The {{ site.product }} FlatColorPicker Documentation | FlatColorPicker Accessibility
4+
description: "Get started with the {{ site.product }} FlatColorPicker and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.1."
5+
slug: accessibility_flatcolorpickerhelper_aspnetcore
6+
position: 1
7+
---
8+
9+
# FlatColorPicker Accessibility
10+
11+
The FlatColorPicker 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 Kendo UI FlatColorPicker]({% slug keyboard_navigation_flatcolorpickerhelper_aspnetcore %})
15+
* [Accessibility in {{ site.product }}](https://docs.telerik.com/{{ site.platform }}/accessibility/accessibility-compliance)
16+
17+
## WAI-ARIA
18+
19+
The widget follows the WAI-ARIA Authoring Practices for implementing the keyboard navigation for its component role and is tested against the popular screen readers.
20+
21+
## Section 508
22+
23+
The FlatColorPicker is compliant with the Section 508 requirements.
24+
25+
## WCAG 2.1
26+
27+
The FlatColorPicker 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/).
28+
29+
## See Also
30+
31+
* [Keyboard Navigation by the FlatColorPicker (Demo)](https://demos.telerik.com/{{ site.platform }}/flatcolorpicker/keyboard-navigation)
32+
* [Keyboard Navigation by the FlatColorPicker]({% slug keyboard_navigation_flatcolorpickerhelper_aspnetcore %})

‎docs-aspnet/html-helpers/editors/flatcolorpicker/contrast-tool.md‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
---
2+
title: Contrast Tool
3+
page_title: FlatColorPicker Documentation | FlatColorPicker Contrast Tool
4+
description: "Check out the Contrast Tool in the FlatColorPicker."
5+
slug: contrast_tool_flatcolorpickerhelper_aspnetcore
6+
position: 4
7+
---
8+
9+
# Contrast Tool
10+
11+
The FlatColorPicker provides a Color Contrast Tool. It offers the capability for checking the color contrast ratio between two colors.
12+
13+
Color contrast between text and background is important on web pages. It affects some people’s ability to perceive the required information. The tool follows [the WCAG recommendations](/editors/flatcolorpicker/accessibility/overview#wcag-21) for web accessibility.
14+
15+
According to the WCAG standard, there are two levels of contrast ratio:
16+
* AA (minimum contrast)—The level AA requires a contrast ratio of at least 4.5:1 for normal text.
17+
* AAA (enhanced contrast)—The level AAA requires a contrast ratio of at least 7:1 for normal text.
18+
19+
The example below demonstrates how to enable the contrast tool in the ColorPicker:
20+
21+
```HtmlHelper
22+
@(Html.Kendo().FlatColorPicker()
23+
.Name("foreground-picker")
24+
.Opacity(true)
25+
.Value("#d13838ff")
26+
.ContrastTool(c=>c.BackgroundColor("#ffffff"))
27+
.Events(ev => ev.Change("foregroundSelect"))
28+
)
29+
```
30+
{% if site.core %}
31+
```TagHelper
32+
@addTagHelper *, Kendo.Mvc
33+
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
34+
35+
@{
36+
string[] views = new string[] { "gradient" };
37+
}
38+
39+
<kendo-flatcolorpicker name="foreground-picker" value="#d13838ff" on-change="foregroundSelect" opacity="true">
40+
<contrast-tool background-color="#ffffff"/>
41+
</kendo-flatcolorpicker>
42+
```
43+
{% endif %}
44+
45+
## See Also
46+
47+
* [Contrast Tool of the FlatColorPicker (Demo)](https://demos.telerik.com/{{ site.platform }}/flatcolorpicker/contrast-tool)
48+
* [JavaScript API Reference of the FlatColorPicker](/api/javascript/ui/flatcolorpicker)

‎docs-aspnet/html-helpers/editors/flatcolorpicker/overview.md‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,21 @@ The following example demonstrates how to subscribe to events by a handler name.
5151
}
5252
</script>
5353
```
54+
{% if site.core %}
55+
```TagHelper
56+
@addTagHelper *, Kendo.Mvc
57+
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
58+
59+
<script>
60+
function change(e) {
61+
console.log("Change in picker #" + this.element.attr("id") + " :: " + e.value);
62+
}
63+
</script>
64+
65+
<kendo-flatcolorpicker name="flatColorPicker" value="#00f" on-change="change">
66+
</kendo-flatcolorpicker>
67+
```
68+
{% endif %}
5469

5570
### Handling by Template Delegate
5671

@@ -83,5 +98,5 @@ To reference an existing Telerik UI FlatColorPicker instance, use the [`jQuery.d
8398

8499
## See Also
85100

86-
* [Basic Usage of the FlatColorPicker HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/colorpicker/flatcolorpicker)
101+
* [Basic Usage of the FlatColorPicker HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/flatcolorpicker)
87102
* [Server-Side API](/api/flatcolorpicker)

‎docs-aspnet/html-helpers/editors/flatcolorpicker/rgb-hex-formats.md‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
---
2+
title: Formats
3+
page_title: The {{ site.product }} FlatColorPicker Documentation | FlatColorPicker RGB and HEX Formats
4+
description: Check out the RGB and HEX input formats in the FlatColorPicker.
5+
slug: rgb_hex_flatcolorpickerhelper_aspnetcore
6+
position: 3
7+
---
8+
9+
# RGB and HEX Input Formats
10+
11+
The FlatColorPicker supports both RGB and HEX formats as input through its [formats](/api/javascript/ui/flatcolorpicker/configuration/formats) configuration. To choose the default format, you can use the [format](/api/javascript/ui/flatcolorpicker/configuration/format) option:
12+
13+
{% if site.core %}
14+
```HtmlHelper
15+
@(Html.Kendo().FlatColorPicker()
16+
.Name("rgb")
17+
.Buttons(true)
18+
.Value("#ff0000")
19+
.Format(ColorPickerFormat.Rgb)
20+
.Formats(new string[] {"rgb","hex"})
21+
)
22+
```
23+
```TagHelper
24+
@addTagHelper *, Kendo.Mvc
25+
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
26+
27+
@{
28+
string[] formats = new string[] { "rgb", "hex" };
29+
}
30+
31+
<kendo-flatcolorpicker name="rgb" value="#ff0000" buttons="true"
32+
format="ColorPickerFormat.Rgb" formats="formats">
33+
</kendo-flatcolorpicker>
34+
```
35+
{% else %}
36+
```HtmlHelper
37+
@(Html.Kendo().FlatColorPicker()
38+
.Name("rgb")
39+
.Buttons(true)
40+
.Value("#ff0000")
41+
.Format("rgb")
42+
.Formats(new string[] {"rgb","hex"})
43+
)
44+
```
45+
{% endif %}
46+
47+
## See Also
48+
49+
* [RGB and HEX formats of the FlatColorPicker (Demo)](https://demos.telerik.com/{{ site.platform }}/flatcolorpicker/rgb-hex)
50+
* [JavaScript API Reference of the FlatColorPicker](/api/javascript/ui/flatcolorpicker)

‎docs-aspnet/html-helpers/editors/flatcolorpicker/views.md‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
title: Views
3+
page_title: {{ site.product }} FlatColorPicker Documentation | FlatColorPicker Views
4+
description: "Review the available views in the FlatColorPicker."
5+
slug: htmlhelpers_views_flatcolorpickerhelper_aspnetcore
6+
position: 2
7+
---
8+
9+
# FlatColorPicker Views
10+
11+
The FlatColorPicker is a component with a new and modern design. One of the available features is the [views](https://docs.telerik.com/kendo-ui/api/javascript/ui/flatcolorpicker/configuration/views) configuration. It allows you to choose between a `gradient` and a `palette` view. You can also choose which the default view would be through the [view](https://docs.telerik.com/kendo-ui/api/javascript/ui/flatcolorpicker/configuration/view) option.
12+
13+
```HtmlHelper
14+
@(Html.Kendo().FlatColorPicker()
15+
.Name("tail")
16+
.Value("#000")
17+
.Events(ev => ev.Change("select"))
18+
.Preview(false)
19+
.View("palette")
20+
.Views(new string[] {"gradient", "palette"})
21+
.HtmlAttributes(new { @class = "picker" })
22+
)
23+
```
24+
{% if site.core %}
25+
```TagHelper
26+
@addTagHelper *, Kendo.Mvc
27+
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
28+
29+
@{
30+
string[] views = new string[] { "gradient", "palette" };
31+
}
32+
33+
<kendo-flatcolorpicker name="tail" value="#000" on-change="select" preview="false" class="picker"
34+
view="palette" views="views">
35+
</kendo-flatcolorpicker>
36+
```
37+
{% endif %}
38+
39+
## See Also
40+
41+
* [Views of the FlatColorPicker (Demo)](https://demos.telerik.com/{{ site.platform }}/flatcolorpicker/views)
42+
* [JavaScript API Reference of the FlatColorPicker](/api/javascript/ui/flatcolorpicker)

0 commit comments

Comments
 (0)