Skip to content

Commit 1dfd0eb

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent 0f4a23c commit 1dfd0eb

File tree

103 files changed

+2055
-1487
lines changed

Some content is hidden

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

103 files changed

+2055
-1487
lines changed

‎docs-aspnet/_config-mvc.yml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -258,6 +258,11 @@ defaults:
258258
path: "html-helpers/editors/checkboxgroup"
259259
values:
260260
title_prefix: "ASP.NET MVC CheckBoxGroup Component"
261+
-
262+
scope:
263+
path: "html-helpers/editors/colorgradient"
264+
values:
265+
title_prefix: "ASP.NET MVC ColorGradient Component"
261266
-
262267
scope:
263268
path: "html-helpers/editors/colorpalette"

‎docs-aspnet/_config.yml‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -457,6 +457,8 @@ navigation:
457457
"*checkboxgroup":
458458
title: "CheckBoxGroup"
459459
isNew: true
460+
"*colorgradient":
461+
title: "ColorGradient"
460462
"*colorpalette":
461463
title: "ColorPalette"
462464
"*colorpicker":
@@ -755,11 +757,16 @@ defaults:
755757
path: "html-helpers/editors/checkbox"
756758
values:
757759
title_prefix: "ASP.NET Core CheckBox Component"
758-
760+
-
759761
scope:
760762
path: "html-helpers/editors/checkboxgroup"
761763
values:
762764
title_prefix: "ASP.NET Core CheckBoxGroup Component"
765+
-
766+
scope:
767+
path: "html-helpers/editors/colorgradient"
768+
values:
769+
title_prefix: "ASP.NET Core ColorGradient Component"
763770
-
764771
scope:
765772
path: "html-helpers/editors/colorpalette"

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,12 @@
9292
<td>AA</td>
9393
<td><a href="https://demos.telerik.com/aspnet-core/combobox/keyboard-navigation">Yes</a></td>
9494
</tr>
95+
<tr>
96+
<td>ColorGradient</td>
97+
<td>Yes</td>
98+
<td>AA</td>
99+
<td><a href="https://demos.telerik.com/aspnet-core/colorgradient/keyboard-navigation">Yes</a></td>
100+
</tr>
95101
<tr>
96102
<td>ColorPicker</td>
97103
<td>Yes</td>

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,12 @@
9292
<td>AA</td>
9393
<td><a href="https://demos.telerik.com/aspnet-mvc/combobox/keyboard-navigation">Yes</a></td>
9494
</tr>
95+
<tr>
96+
<td>ColorGradient</td>
97+
<td>Yes</td>
98+
<td>AA</td>
99+
<td><a href="https://demos.telerik.com/aspnet-mvc/colorgradient/keyboard-navigation">Yes</a></td>
100+
</tr>
95101
<tr>
96102
<td>ColorPicker</td>
97103
<td>Yes</td>

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
title: Keyboard Navigation
3+
page_title: Keyboard Navigation
4+
description: "Learn about the accessibility support that the {{ site.product }} ColorGradient component provides through its keyboard navigation functionality."
5+
slug: keynav_colorgradient_aspnetcore
6+
position: 2
7+
---
8+
9+
# Keyboard Navigation
10+
11+
The keyboard navigation of the ColorGradient is always available. It supports the following keyboard shortcuts:
12+
13+
| SHORTCUT | DESCRIPTION |
14+
|:--- |:--- |
15+
| `Space` or `Enter` | When the **Toggle** format button is focused, changes the format between RGB and HEX.|
16+
| `Tab` | Navigates to the next ColorGradient element.|
17+
| `Shift`+`Tab` | Navigates to the previous ColorGradient element.|
18+
| `Arrow Up` or `Arrow Right` | When any of the ColorGradient sliders is focused, increases their value. When the drag handle in the ColorGradient canvas is focused, moves in the corresponding direction.|
19+
| `Arrow Down` or `Arrow Left` | When any of the ColorGradient sliders is focused, decreases their value. When the drag handle in the ColorGradient canvas is focused, moves in the corresponding direction.|
20+
21+
For a complete example, refer to the [demo on keyboard navigation of the ColorGradient](https://demos.telerik.com/{{ site.platform }}/colorgradient/keyboard-navigation).
22+
23+
## See Also
24+
25+
* [Keyboard Navigation in the ColorGradient for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/colorgradient/keyboard-navigation)
26+
* [Accessibility in the ColorGradient for {{ site.framework }}]({% slug htmlhelpers_accessibility_colorgradient %})

‎docs-aspnet/html-helpers/editors/colorgradient/accessibility/overview.md‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
---
2+
title: Overview
3+
page_title: Accessibility
4+
description: "Get started with the Telerik UI ColorGradient for {{ site.framework }} and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.1."
5+
slug: htmlhelpers_accessibility_colorgradient
6+
position: 1
7+
---
8+
9+
# ColorGradient Accessibility
10+
11+
The ColorGradient is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.1, and keyboard support.
12+
13+
{% if site.has_cta_panels == true %}
14+
{% include cta-panel-introduction.html %}
15+
{% endif %}
16+
17+
For more information, refer to:
18+
19+
* [Keyboard navigation by the ColorGradient]({% slug keynav_colorgradient_aspnetcore %})
20+
* [Accessibility in {{ site.product }}]({% slug overview_accessibility %})
21+
22+
## WAI-ARIA
23+
24+
The ColorGradient 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).
25+
26+
## Section 508
27+
28+
The component is compliant with the Section 508 requirements. For more information, refer to the article on [Section 508 support in {{ site.product }}]({% slug overview_accessibility %}#section-508).
29+
30+
## WCAG 2.1
31+
32+
The ColorGradient 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).
33+
34+
35+
## See Also
36+
37+
* [Keyboard Navigation by the ColorGradient for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/colorgradient/keyboard-navigation)
38+
* [Accessibility in {{ site.product }}]({% slug overview_accessibility %})

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

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
---
2+
title: Contrast Tool
3+
page_title: Contrast Tool
4+
description: "Learn more about the contrast tool provided by the Telerik UI ColorGradient component for {{ site.framework }}."
5+
slug: htmlhelpers_contrast_tool_colorgradient
6+
position: 3
7+
---
8+
9+
# Contrast Tool
10+
11+
The ColorGradient provides a Color Contrast Tool. It provides the option for checking the color contrast ratio between two colors.
12+
13+
The color contrast between text and background is important on web pages. It affects the ability of some people to perceive the presented information. The tool follows [the WCAG recommendations]({% slug htmlhelpers_accessibility_colorgradient %}#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 ColorGradient:
20+
21+
```HtmlHelper
22+
<div class="k-d-flex k-justify-content-center">
23+
<div class="example-config">
24+
Try to apply different colors to the text on right side. Notice how the
25+
text becomes gradually harder for reading when the contrast ratio
26+
becomes smaller.
27+
</div>
28+
<div class="row">
29+
<div class="column">
30+
@(Html.Kendo().ColorGradient()
31+
.Name("colorGradient")
32+
.Opacity(true)
33+
.Value("#d13838ff")
34+
.ContrastTool(tool => tool.BackgroundColor("#ffffff"))
35+
.Events(ev => ev.Change("onChange"))
36+
)
37+
</div>
38+
<div class="column">
39+
<p class="text-wrapper">
40+
Lorem Ipsum is simply dummy text of the printing and typesetting
41+
industry. Lorem Ipsum has been the industry's standard dummy text
42+
ever since the 1500s, when an unknown printer took a galley of type
43+
and scrambled it to make a type specimen book. It has survived not
44+
only five centuries, but also the leap into electronic typesetting,
45+
remaining essentially unchanged. It was popularised in the 1960s
46+
with the release of Letraset sheets containing Lorem Ipsum passages,
47+
and more recently with desktop publishing software like Aldus
48+
PageMaker including versions of Lorem Ipsum.
49+
</p>
50+
</div>
51+
</div>
52+
</div>
53+
```
54+
{% if site.core %}
55+
```TagHelper
56+
<div class="k-d-flex k-justify-content-center">
57+
<div class="example-config">
58+
Try to apply different colors to the text on right side. Notice how the
59+
text becomes gradually harder for reading when the contrast ratio
60+
becomes smaller.
61+
</div>
62+
<div class="row">
63+
<div class="column">
64+
<kendo-colorgradient name="colorgradient" on-change="onChange"
65+
opacity="true"
66+
value="#d13838ff">
67+
<contrast-tool enabled="true" background-color="#ffffff"/>
68+
</kendo-colorgradient>
69+
</div>
70+
<div class="column">
71+
<p class="text-wrapper">
72+
Lorem Ipsum is simply dummy text of the printing and typesetting
73+
industry. Lorem Ipsum has been the industry's standard dummy text
74+
ever since the 1500s, when an unknown printer took a galley of type
75+
and scrambled it to make a type specimen book. It has survived not
76+
only five centuries, but also the leap into electronic typesetting,
77+
remaining essentially unchanged. It was popularised in the 1960s
78+
with the release of Letraset sheets containing Lorem Ipsum passages,
79+
and more recently with desktop publishing software like Aldus
80+
PageMaker including versions of Lorem Ipsum.
81+
</p>
82+
</div>
83+
</div>
84+
</div>
85+
```
86+
{% endif %}
87+
```Scripts
88+
<script type="text/javascript">
89+
function onChange(e) {
90+
$(".text-wrapper").css("color", e.value);
91+
}
92+
</script>
93+
```
94+
```Styles
95+
<style>
96+
.row {
97+
display: flex;
98+
}
99+
.example-config {
100+
margin: 0 0 20px;
101+
padding: 20px;
102+
background-color: rgba(0,0,0,.03);
103+
border: 1px solid rgba(0,0,0,.08);
104+
}
105+
.column {
106+
padding-right: 20px;
107+
padding-bottom: 20px;
108+
}
109+
.k-colorpicker {
110+
vertical-align: top;
111+
margin: 20px 0;
112+
}
113+
.text-wrapper {
114+
border: 1px solid rgba(0, 0, 0, 0.08);
115+
padding: 10px;
116+
font-size: 16px;
117+
}
118+
</style>
119+
```
120+
121+
## See Also
122+
123+
* [Contrast Tool of the ColorGradient (Demo)](https://demos.telerik.com/{{ site.platform }}/colorgradient/contrast-tool)
124+
* [Server-Side API](/api/colorgradient)
125+
* [Client-Side API](https://docs.telerik.com/kendo-ui/api/javascript/ui/colorgradient)

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

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
---
2+
title: Overview
3+
page_title: Overview
4+
description: "Learn the basics when working with the Telerik UI ColorGradient component for {{ site.framework }}."
5+
slug: htmlhelpers_overview_colorgradient
6+
position: 1
7+
---
8+
9+
# ColorGradient Overview
10+
11+
{% if site.core %}
12+
The Telerik UI ColorGradient TagHelper and HtmlHelper for {{ site.framework }} are server-side wrappers for the [Kendo UI ColorGradient](https://docs.telerik.com/kendo-ui/controls/editors/colorgradient/overview) widget.
13+
{% else %}
14+
The Telerik UI ColorGradient HtmlHelper for {{ site.framework }} is a server-side wrapper for the [Kendo UI ColorGradient](https://docs.telerik.com/kendo-ui/controls/editors/colorgradient/overview) widget.
15+
{% endif %}
16+
17+
The ColorGradient is a component that renders a gradient color palette. It has a hue and an alpha slider and provides an input that allows you to enter a color or copy the selected one.
18+
19+
{% if site.has_cta_panels == true %}
20+
{% include cta-panel-introduction.html %}
21+
{% endif %}
22+
23+
* [Demo page for the ColorGradient](https://demos.telerik.com/{{ site.platform }}/colorgradient/index)
24+
25+
## Initializing the ColorGradient
26+
27+
The ColorGradient is usually used as a color editor. The following example demonstrates how to define the ColorGradient.
28+
29+
```HtmlHelper
30+
@(Html.Kendo().ColorGradient()
31+
.Name("colorGradient") // The name of the ColorGradient is mandatory. It specifies the "id" attribute.
32+
.Value("#ff0000")
33+
)
34+
```
35+
{% if site.core %}
36+
```TagHelper
37+
<kendo-colorgradient name="colorgradient"
38+
value="#ff0000">
39+
</kendo-colorgradient>
40+
```
41+
{% endif %}
42+
43+
## Basic Configuration
44+
45+
The ColorGradient provides default configuration options such as input, format, opacity, and so on.
46+
47+
The following example shows a basic implementation of the control.
48+
49+
```HtmlHelper
50+
@(Html.Kendo().ColorGradient()
51+
.Name("colorGradient")
52+
.Input(true)
53+
.Format(ColorGradientFormat.Hex)
54+
.Opacity(true)
55+
.Value("#f16e0aff")
56+
)
57+
```
58+
{% if site.core %}
59+
```TagHelper
60+
<kendo-colorgradient name="colorgradient"
61+
input="true"
62+
format="ColorGradientFormat.Hex"
63+
opacity="true"
64+
value="#f16e0aff">
65+
</kendo-colorgradient>
66+
```
67+
{% endif %}
68+
69+
## Functionality and Features
70+
71+
* [Formats]({% slug htmlhelpers_rgb_hex_formats_colorgradient %})
72+
* [Contrast Tool]({% slug htmlhelpers_contrast_tool_colorgradient %})
73+
* [Accessibility]({% slug htmlhelpers_accessibility_colorgradient %})
74+
75+
## Events
76+
77+
You can subscribe to the `change` [ColorGradient event](https://docs.telerik.com/kendo-ui/api/javascript/ui/colorgradient#events), as is demonstrated in the following example.
78+
79+
```HtmlHelper
80+
@(Html.Kendo().ColorGradient()
81+
.Name("colorGradient")
82+
.Events(ev => ev.Change("colorgradient_change"))
83+
)
84+
<script>
85+
function colorgradient_change(e) {
86+
console.log("The newly selected color is ", e.value);
87+
}
88+
</script>
89+
```
90+
{% if site.core %}
91+
```TagHelper
92+
<kendo-colorgradient name="colorgradient" on-change="colorgradient_change">
93+
</kendo-colorgradient>
94+
95+
<script>
96+
function colorgradient_change(e) {
97+
console.log("The newly selected color is ", e.value);
98+
}
99+
</script>
100+
```
101+
{% endif %}
102+
103+
For a complete example, refer to the [demo on using the events of the ColorGradient](https://demos.telerik.com/{{ site.platform }}/colorgradient/events).
104+
105+
## Referencing Existing Instances
106+
107+
To reference an existing Telerik UI ColorGradient instance, use the [`jQuery.data()`](https://api.jquery.com/jQuery.data/) configuration option. Once a reference is established, use the [ColorGradient client-side API](https://docs.telerik.com/kendo-ui/api/javascript/ui/colorgradient#methods) to control its behavior.
108+
109+
```HtmlHelper
110+
@(Html.Kendo().ColorGradient()
111+
.Name("colorGradient")
112+
)
113+
114+
//Get an instance of the ColorGradient by using its Name().
115+
<script>
116+
$(function() {
117+
var colorGradientControl = $("#colorGradient").data("kendoColorGradient");
118+
});
119+
</script>
120+
```
121+
{% if site.core %}
122+
```TagHelper
123+
<kendo-colorgradient name="colorgradient">
124+
</kendo-colorgradient>
125+
126+
//Get an instance of the ColorGradient by using its Name().
127+
<script>
128+
$(function() {
129+
var colorGradientControl = $("#colorgradient").data("kendoColorGradient");
130+
});
131+
```
132+
{% endif %}
133+
134+
## See Also
135+
136+
* [Basic Usage of the ColorGradient HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/colorgradient/index)
137+
* [Server-Side API](/api/colorgradient)
138+
* [Client-Side API](https://docs.telerik.com/kendo-ui/api/javascript/ui/colorgradient)

0 commit comments

Comments
 (0)