You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: blazor/in-place-editor/accessibility.md
+17-17Lines changed: 17 additions & 17 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,47 +9,47 @@ documentation: ug
9
9
10
10
# Accessibility in Blazor In-place editor component
11
11
12
-
The [Blazor In-place editor](https://www.syncfusion.com/blazor-components/blazor-in-place-editor) component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
12
+
The [Blazor In-place editor](https://www.syncfusion.com/blazor-components/blazor-in-place-editor) component follows accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
13
13
14
-
The accessibility compliance for the Blazor In-place editor component is outlined below.
14
+
The accessibility compliance for the Blazor In-place Editor component is outlined below.
<div><imgsrc="https://cdn.syncfusion.com/content/images/documentation/full.png"alt="Yes"> - All features of the component meet the requirement.</div>
33
+
<div><imgsrc="https://cdn.syncfusion.com/content/images/documentation/full.png"alt="Meets all requirements"> - All features of the component meet the requirement.</div>
34
34
35
-
<div><imgsrc="https://cdn.syncfusion.com/content/images/documentation/partial.png"alt="Intermediate"> - Some features of the component do not meet the requirement.</div>
35
+
<div><imgsrc="https://cdn.syncfusion.com/content/images/documentation/partial.png"alt="Partially meets requirements"> - Some features of the component do not meet the requirement.</div>
36
36
37
-
<div><imgsrc="https://cdn.syncfusion.com/content/images/documentation/not-supported.png"alt="No"> - The component does not meet the requirement.</div>
37
+
<div><imgsrc="https://cdn.syncfusion.com/content/images/documentation/not-supported.png"alt="Does not meet requirements"> - The component does not meet the requirement.</div>
38
38
39
39
## Keyboard interaction
40
40
41
-
You can use the following key shortcuts to access the Blazor In-place editor without interruptions:
41
+
Use the following key shortcuts to operate the Blazor In-place Editor efficiently with a keyboard:
42
42
43
43
| Windows | Mac | Actions |
44
44
| --- | --- | --- |
45
-
| <kbd>Tab</kbd> | <kbd>Tab</kbd> |Helps in focusing the Inplace editor on the page and switching between the consecutive Inplace editor bars. |
46
-
| <kbd>Shift</kbd> + <kbd>Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> |Helps in focusing the previous Inplace editor bar element on the Inplace editor. |
45
+
| <kbd>Tab</kbd> | <kbd>Tab</kbd> |Move focus to the In-place Editor on the page and navigate forward between consecutive In-place Editor instances. |
46
+
| <kbd>Shift</kbd> + <kbd>Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> |Move focus to the previous In-place Editor instance or to the previous focusable element. |
47
47
48
48
## Ensuring accessibility
49
49
50
50
The Blazor In-place editor component's accessibility levels are ensured through an [axe-core](https://www.npmjs.com/package/axe-core) software tool during automated testing.
51
51
52
-
The accessibility compliance of the Inplace editor component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/inplace-editor) in a new window to evaluate the accessibility of the Inplace editor component with accessibility tools.
52
+
The accessibility compliance of the In-place Editor component is shown in the following sample. Open the sample(https://blazor.syncfusion.com/accessibility/inplace-editor) in a new window to evaluate the accessibility of the In-place Editor component with accessibility tools.
Copy file name to clipboardExpand all lines: blazor/in-place-editor/configuration.md
+22-24Lines changed: 22 additions & 24 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,26 +3,25 @@ layout: post
3
3
title: Configuration in Blazor In-place Editor Component | Syncfusion
4
4
description: Checkout and learn here all about Configuration in Syncfusion Blazor In-place Editor component and more.
5
5
platform: Blazor
6
-
control: In Place Editor
6
+
control: In-place Editor
7
7
documentation: ug
8
8
---
9
9
10
10
# Configuration in Blazor In-place Editor Component
11
11
12
12
## Rendering modes
13
13
14
-
This section explains the supported rendering modes of the In-place Editor. The possible Rendering modes are:
14
+
This section explains the supported rendering modes of the In-place Editor. Supported rendering modes:
15
15
16
-
* Popup
17
-
* Inline
16
+
- Popup
17
+
- Inline
18
18
19
-
N> By default, `Inline` mode will be rendered when opening an editor.
19
+
N> Inline mode is the default when the editor opens.
20
20
21
-
* For `Popup` mode, the editable container displays as like tooltip or popover above the element.
21
+
- Popup mode displays the editable container like a tooltip or popover above the target element.
22
+
- Inline mode replaces the element with the editable container. To open the editor in Inline mode, set Mode to Inline.
22
23
23
-
* For `Inline` mode, the editable container displays instead of the element. To render `Inline` mode while opening the editor, specify `Mode` as `Inline`.
24
-
25
-
In the following code block, the In-place Editor renders with `Inline` mode. You can dynamically switch into another mode by changing the drop-down item value.
24
+
In the following example, the In-place Editor renders in Inline mode. The rendering mode can be switched dynamically by changing the drop-down value.
26
25
27
26
```cshtml
28
27
@@ -96,11 +95,11 @@ In the following code block, the In-place Editor renders with `Inline` mode. You
96
95
97
96
```
98
97
99
-
### Pop-up customization
98
+
### Popup customization
100
99
101
-
In-place Editor popup mode can be customized by using the `InPlaceEditorPopupSettings` tag.
100
+
Popup mode can be customized by using the `InPlaceEditorPopupSettings` tag.
102
101
103
-
Popup mode is rendered by using the Blazor Tooltip component, so you can use the tooltip properties and events to customize the behavior of popup via the`InPlaceEditorPopupSettings` by configuring tooltip properties.
102
+
Popup mode is rendered using the Blazor Tooltip component, so tooltip properties and events can be used to customize popup behavior through`InPlaceEditorPopupSettings` by configuring tooltip properties
104
103
105
104
N> For more details, refer to the tooltip documentation [section](../tooltip/getting-started-webapp).
106
105
@@ -109,11 +108,11 @@ N> For more details, refer to the tooltip documentation [section](../tooltip/get
109
108
The event action of the editor will be enabled in the edit mode based on the `EditableOn` property. By default, `Click` is enabled.
110
109
The following options are also supported:
111
110
112
-
***Click**: The editor will be opened on single-click actions.
113
-
***DoubleClick**: The editor will be opened on double-click actions and it is not applicable for the edit icon.
114
-
***EditIconClick**: Disables the editing of event action of input and allows the users to edit only through edit icon.
111
+
***Click**: Opens the editor on a single click.
112
+
***DoubleClick**: Opens the editor on a doubleclick. This option does not apply to the edit icon.
113
+
***EditIconClick**: Disables input-triggered editing and allows editing only through the edit icon.
115
114
116
-
N> In-place Editor gets focus by pressing the `tab` key from the previous focusable DOM element. The editor can be opened by pressing the `enter` key.
115
+
N> The In-place Editor receives focus by pressing the Tab key from the previous focusable element. Press `Enter`to open the editor.
117
116
118
117
In the following code block, when switching the drop-down item, the selected value is assigned to the `EditableOn` property. The editor will be opened when you double click on the input.
119
118
@@ -206,14 +205,13 @@ In the following code block, when switching the drop-down item, the selected val
206
205
207
206
## Action on focus out
208
207
209
-
Action will be performed when the user clicks outside the container. That means, focusing out of the editable content can be handled by the `ActionOnBlur` property. By default, `Submit` is enabled.
210
-
It also has the following options.
208
+
An action can be performed when clicking outside the editor container. This is controlled by the ActionOnBlur property. By default, Submit is enabled. The following options are supported:
211
209
212
-
***Cancel**: Cancels the editing and resets the old content.
213
-
***Submit**: Submits the edited content to the server.
214
-
***Ignore**: No action will be performed with this type.
210
+
-Cancel: Cancels editing and restores the previous content.
211
+
-Submit: Saves the edited content.
212
+
-Ignore: Performs no action.
215
213
216
-
In the following code block, when switching drop-down items, the selected value is assigned to the `ActionOnBlur` property.
214
+
In the following example, the selected drop-down value is assigned to ActionOnBlur.
217
215
218
216
```cshtml
219
217
@using Syncfusion.Blazor.InPlaceEditor
@@ -301,7 +299,7 @@ In the following code block, when switching drop-down items, the selected value
301
299
302
300
By default, the In-place Editor input element is highlighted with a dotted underline. To remove dotted underline from input element, add `{"data-underline", "false" }` attribute at In-place Editor root element.
303
301
304
-
The following code block indicates the intractable and normal display modes with different examples.
302
+
The following example shows interactive and normal display modes.
305
303
306
304
```cshtml
307
305
@@ -365,7 +363,7 @@ The following code block indicates the intractable and normal display modes with
365
363
366
364
```
367
365
368
-
366
+
Copy file name to clipboardExpand all lines: blazor/in-place-editor/controls.md
+3-3Lines changed: 3 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,15 +3,15 @@ layout: post
3
3
title: List of Components in Blazor In-place Editor Component | Syncfusion
4
4
description: Checkout and learn here all about List of Components in Syncfusion Blazor In-place Editor component and more.
5
5
platform: Blazor
6
-
control: In Place Editor
6
+
control: In-place Editor
7
7
documentation: ug
8
8
---
9
9
10
10
# List of Components in Blazor In-place Editor Component
11
11
12
-
In-place Editor renders various components based on the `Type` property and the Editor components should be rendered inside the In-place Editor. Also, the two-way binding between the In-place Editor and its EditorComponent needs to be configured. It is used to update the EditorComponent value into the In-place Editor component.
12
+
The In-place Editor renders different editor components based on the `Type` property. Each editor component must be placed inside the In-place Editor and configured with two-way data binding between the In-place Editor and the embedded editor component to keep values in sync.
13
13
14
-
The following table explains Editor components name and their configurations.
14
+
The following table lists the supported editor components and their corresponding Type values.
Copy file name to clipboardExpand all lines: blazor/in-place-editor/events.md
+8-8Lines changed: 8 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,17 +3,17 @@ layout: post
3
3
title: Events in Blazor In-place Editor Component | Syncfusion
4
4
description: Checkout and learn here all about Events in Syncfusion Blazor In-place Editor component and much more.
5
5
platform: Blazor
6
-
control: In Place Editor
6
+
control: In-place Editor
7
7
documentation: ug
8
8
---
9
9
10
10
# Events in Blazor In-place Editor Component
11
11
12
-
This section explains the list of events of the In-place Editor's component which will be triggered for appropriate In-place Editor's actions.
12
+
This section describes the events available in the In-place Editor component and when they are raised during typical actions. The events include: Created, OnActionBegin, OnActionSuccess, OnActionFailure, ValueChange, and Destroyed.
13
13
14
14
## Created
15
15
16
-
`Created` event triggers once the component rendering is completed.
16
+
`Created` event is raised after the component has completed rendering.
17
17
18
18
```cshtml
19
19
@@ -34,7 +34,7 @@ This section explains the list of events of the In-place Editor's component whic
34
34
35
35
## OnActionBegin
36
36
37
-
`OnActionBegin` event triggers before the data submitted to the server.
37
+
`OnActionBegin` event is raised before data is submitted to the server as part of a save/update action. Use this event for preprocessing tasks such as validation or modifying the request.
38
38
39
39
```cshtml
40
40
@@ -55,7 +55,7 @@ This section explains the list of events of the In-place Editor's component whic
55
55
56
56
## OnActionSuccess
57
57
58
-
`OnActionSuccess` event triggers when data is submitted successfully to the server.
58
+
`OnActionSuccess` event is raised when data is successfully submitted to the server and a successful response is received.
59
59
60
60
```cshtml
61
61
@@ -76,7 +76,7 @@ This section explains the list of events of the In-place Editor's component whic
76
76
77
77
## OnActionFailure
78
78
79
-
`OnActionFailure` event triggers when data submission failed.
79
+
`OnActionFailure` event is raised when a data submission fails.
80
80
81
81
```cshtml
82
82
@@ -97,7 +97,7 @@ This section explains the list of events of the In-place Editor's component whic
97
97
98
98
## ValueChange
99
99
100
-
`ValueChange` event triggers when the integrated component value has changed that render based on the `type` property in the In-place editor.
100
+
`ValueChange` event is raised when the value of the integrated editor changes, regardless of the editor rendered via the `Type` property.
101
101
102
102
```cshtml
103
103
@@ -118,7 +118,7 @@ This section explains the list of events of the In-place Editor's component whic
118
118
119
119
## Destroyed
120
120
121
-
`Destroyed` event triggers when the component gets destroyed.
121
+
`Destroyed` event is raised when the component is disposed.
0 commit comments