Skip to content

Commit 2ae9e22

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent 0ff1857 commit 2ae9e22

File tree

24 files changed

+1119
-18
lines changed

24 files changed

+1119
-18
lines changed

‎docs-aspnet/_config-mvc.yml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -234,6 +234,11 @@ defaults:
234234
path: "html-helpers/editors/flatcolorpicker"
235235
values:
236236
title_prefix: "MVC FlatColorPicker Component"
237+
-
238+
scope:
239+
path: "html-helpers/editors/imageeditor"
240+
values:
241+
title_prefix: "MVC Image Editor Component"
237242
-
238243
scope:
239244
path: "html-helpers/editors/listbox"

‎docs-aspnet/_config.yml‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -214,6 +214,8 @@ navigation:
214214
title: "PivotGrid"
215215
"tag-helpers/editors":
216216
title: "Editors"
217+
"tag-helpers/editors/imageeditor":
218+
title: "Image Editor"
217219
"tag-helpers/charts":
218220
title: "Charts"
219221
"tag-helpers/charts/treemap":
@@ -309,6 +311,8 @@ navigation:
309311
position: 2
310312
"html-helpers/editors/flatcolorpicker":
311313
title: "FlatColorPicker"
314+
"html-helpers/editors/imageeditor":
315+
title: "Image Editor"
312316
"html-helpers/charts":
313317
title: "Charts"
314318
"html-helpers/charts/chart":
@@ -472,6 +476,8 @@ navigation:
472476
title: "Form"
473477
"*gantt":
474478
title: "Gantt"
479+
"*imageeditor":
480+
title: "Image Editor"
475481
"*lineargauge":
476482
title: "LinearGauge"
477483
"*listbox":
@@ -737,6 +743,11 @@ defaults:
737743
path: "html-helpers/editors/flatcolorpicker"
738744
values:
739745
title_prefix: "Core FlatColorPicker Component"
746+
-
747+
scope:
748+
path: "html-helpers/editors/imageeditor"
749+
values:
750+
title_prefix: "Core Image Editor Component"
740751
-
741752
scope:
742753
path: "html-helpers/editors/listbox"
@@ -1107,6 +1118,11 @@ defaults:
11071118
path: "tag-helpers/editors/flatcolorpicker"
11081119
values:
11091120
title_prefix: "Core FlatColorPicker Component"
1121+
-
1122+
scope:
1123+
path: "tag-helpers/editors/imageeditor"
1124+
values:
1125+
title_prefix: "Core Image Editor Component"
11101126
-
11111127
scope:
11121128
path: "tag-helpers/editors/listbox"

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
---
2+
title: Keyboard Navigation
3+
page_title: Keyboard Navigation
4+
description: "Get started with the {{ site.product }} Image Editor and learn about the accessibility support it provides through its keyboard navigation functionality."
5+
slug: keynav_aspnetcore_imageeditor
6+
position: 2
7+
---
8+
9+
# Keyboard Navigation
10+
11+
The keyboard navigation of the Image Editor is always available.
12+
13+
For a complete example, refer to the [demo on keyboard navigation of the Image Editor](https://demos.telerik.com/{{ site.platform }}/imageeditor/keyboard-navigation).
14+
15+
## See Also
16+
17+
* [Keyboard Navigation in the Image Editor HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/imageeditor/keyboard-navigation)
18+
* [Accessibility in the Image Editor HtmlHelper for {{ site.framework }}]({% slug accessibility_aspnetcore_imageeditor %})

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
---
2+
title: Overview
3+
page_title: Accessibility
4+
description: "Get started with the {{ site.product }} Image Editor and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.1."
5+
slug: accessibility_aspnetcore_imageeditor
6+
position: 1
7+
---
8+
9+
# Image Editor Accessibility
10+
11+
The Image Editor 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 Image Editor]({% slug keynav_aspnetcore_imageeditor %})
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 Image Editor 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).
24+
25+
## WCAG 2.1
26+
27+
The Image Editor 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_short }} ]({% slug overview_accessibility %}#wcag-21)
28+
29+
## See Also
30+
31+
* [Keyboard Navigation by the Image Editor HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/imageeditor/keyboard-navigation)
32+
* [Keyboard Navigation by the Image Editor HtmlHelper for {{ site.framework }}]({% slug keynav_aspnetcore_imageeditor %})
33+
* [Accessibility in {{ site.product }}]({% slug compliance_accessibility %})

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

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
---
2+
title: Overview
3+
page_title: Overview
4+
description: "Learn the basics when working with the Telerik UI Image Editor HtmlHelper for {{ site.framework }}."
5+
previous_url: /helpers/html-helpers/editor, /helpers/editors/editor/overview
6+
slug: htmlhelpers_imageeditor_aspnetcore
7+
position: 1
8+
---
9+
10+
# Image Editor HtmlHelper Overview
11+
12+
The Telerik UI Image Editor HtmlHelper for {{ site.framework }} is a server-side wrapper for the Kendo UI Image Editor widget.
13+
14+
The Image Editor utilizes a canvas element and enables image editing. It allows you to open, edit and save edited images.
15+
16+
* [Demo page for the Image Editor](https://demos.telerik.com/{{ site.platform }}/imageeditor/index)
17+
18+
## Initializing the Image Editor
19+
20+
The following example demonstrates how to define the Image Editor by using the Image Editor HtmlHelper.
21+
22+
```
23+
@(Html.Kendo().ImageEditor()
24+
.Name("imageEditor")
25+
.Width(500)
26+
.Height(500)
27+
.SaveAs(saveas => saveas.FileName("image.png"))
28+
)
29+
```
30+
31+
## Functionality and Features
32+
33+
* [Tools]({% slug htmlhelpers_imageeditor_tools_aspnetcore %})
34+
35+
## Events
36+
37+
The following example demonstrates how to handle Image Editor HTML helper events on the client-side. For a complete example on basic Image Editor events, refer to the [demo on using the events of the Image Editor](https://demos.telerik.com/{{ site.platform }}/imageeditor/events).
38+
39+
```
40+
@(Html.Kendo().ImageEditor()
41+
.Name("imageEditor")
42+
.Events(e => e
43+
.ImageLoaded("onImageLoaded")
44+
)
45+
)
46+
47+
<script>
48+
function onImageLoaded(e) {
49+
console.log("Image loaded");
50+
}
51+
</script>
52+
```
53+
54+
## See Also
55+
56+
* [Basic Usage of the Image Editor HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/imageeditor)
57+
* [Using the API of the Image Editor HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/imageeditor/api)
58+
* [Server-Side API](/api/imageeditor)

‎docs-aspnet/html-helpers/editors/imageeditor/tools.md‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
---
2+
title: Tools
3+
page_title: Tools
4+
description: "Learn which tools are available in the Telerik UI Image Editor HtmlHelper for {{ site.framework }}."
5+
slug: htmlhelpers_imageeditor_tools_aspnetcore
6+
position: 2
7+
---
8+
9+
# Tools
10+
11+
The Image Editor provides a predefined collection of tools that are used to interact with the control.
12+
13+
You can enable any of these tools by using the `Tools()` HtmlHelper method and configure it with the specific tool method.
14+
15+
## Default Tools
16+
17+
The default tools in the Image Editor are included in the toolbar of the Image Editor upon setting the respective tool method.
18+
19+
The following example demonstrates how to instantiate an Image Editor with predefined set of tools.
20+
21+
```
22+
@(Html.Kendo().ImageEditor()
23+
.Name("imageEditor")
24+
.Tools(tools => tools
25+
.Open()
26+
.Save()
27+
.Crop()
28+
.Resize()
29+
)
30+
)
31+
```
32+
33+
## See Also
34+
35+
* [Overview of the Image Editor HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/imageeditor/index)
36+
* [Server-Side API](/api/imageeditor)

‎docs-aspnet/html-helpers/interactivity/loader/accessibility/overview.md‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
---
2+
title: Overview
3+
page_title: Accessibility
4+
description: "Get started with the Telerik UI Loader HtmlHelper for {{ site.framework }} and learn about its accessibility support for WAI-ARIA, Section 508 and WCAG 2.1."
5+
slug: htmlhelpers_loader_aspnetcore_accessibility
6+
position: 1
7+
---
8+
9+
# Loader Accessibility
10+
11+
The Loader is accessible by screen readers and provides WAI-ARIA, Section 508 and WCAG 2.1.
12+
13+
For more information, refer to:
14+
* [Accessibility in {{ site.product }}]({% slug compliance_accessibility %})
15+
16+
## WAI-ARIA
17+
18+
The component follows the WAI-ARIA Authoring Practices 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).
19+
20+
If the component is initially visible, you can add `aria-busy="true"` to the container so that its aria-label text would be read:
21+
22+
```Razor
23+
<div id="test" aria-busy="true">
24+
@(Html.Kendo().Loader()
25+
.Name("loader")
26+
)
27+
</div>
28+
```
29+
30+
If the text should be read while dynamically showing/hiding the loader, you can add `aria-live="polite"`:
31+
32+
```dojo
33+
<div id="test" aria-live="polite">
34+
@(Html.Kendo().Loader()
35+
.Name("loader")
36+
)
37+
</div>
38+
```
39+
40+
## Section 508
41+
42+
The Loader 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).
43+
44+
## WCAG 2.1
45+
46+
The Loader 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_short }} ]({% slug overview_accessibility %}#wcag-21).
47+
48+
##
49+
50+
## See Also
51+
52+
* [Accessibility in {{ site.product }}]({% slug compliance_accessibility %})

0 commit comments

Comments
 (0)