Skip to content

958831: Update Ug for SEO #6031

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 13 commits into
base: development
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions blazor/diagram/accessibility.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
layout: post
title: Accessibility in Blazor Diagram Component | Syncfusion
title: Controlling Accessibility in Blazor Diagrams | Syncfusion
description: Checkout and Learn all about accessibility in Syncfusion Blazor Diagram component and many more details.
platform: Blazor
control: Diagram
documentation: ug
---

# Accessibility in Blazor Diagram Component
# Controlling Accessibility in Blazor Diagrams

Accessibility in the Blazor diagram component is achieved through compliance with the [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), and [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, as well as [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) and support for keyboard navigation. This ensures that users can effectively interact with the diagram features using assistive technologies such as screen readers.

Expand Down Expand Up @@ -37,7 +37,7 @@ The accessibility compliance for the Blazor diagram component is outlined below:

<div><img src="https://cdn.syncfusion.com/content/images/documentation/not-supported.png" alt="No"> - The component does not meet the requirement.</div>

## WAI-ARIA attributes
## WAI-ARIA Attributes

The Blazor Diagram component followed the WAI-ARIA patterns to meet the accessibility. The following ARIA attributes are used in the Blazor Diagram component:

Expand Down Expand Up @@ -157,7 +157,7 @@ The Blazor Diagram component followed the [keyboard interaction](https://www.w3.

N> You can download a complete working sample for keyboard navigation from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Accessibility/KeyBoardNavigation)

## Ensuring accessibility
## Ensuring Accessibility

The Blazor diagram component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests.

Expand Down
26 changes: 13 additions & 13 deletions blazor/diagram/annotations/appearance.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
---
layout: post
title: Appearance in Blazor Diagram Component | Syncfusion
title: Controlling Annotation Appearance in Blazor Diagrams | Syncfusion
description: Checkout and learn here all about Appearance in Syncfusion Blazor Diagram component and much more details.
platform: Blazor
control: Diagram Component
documentation: ug
---

# Appearance in Blazor Diagram Component
# Controlling Annotation Appearance in Blazor Diagrams

## How to update size of an annotation
## How to Update Size of an Annotation

The diagram allows you to set size for annotations by using the Height and Width properties. The default value of the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Height) properties is 0, and it takes the node or connector size as default. The following code example shows how the annotation size is customized.

Expand Down Expand Up @@ -48,7 +48,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync

![Changing Annotation Size in Blazor Diagram](../images/blazor-diagram-annotation-size.png)

## How to add hyperlink to an annotation
## How to Add Hyperlink to an Annotation

The diagram provides support to add a [Hyperlink](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Hyperlink) to the node's or connector's annotation. It can also be customized.

Expand Down Expand Up @@ -94,7 +94,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync

![Annotation with Hyperlink in Blazor Diagram](../images/blazor-diagram-annotation-with-hyperlink.png)

### How to update hyperlink with content
### How to Update Hyperlink Content in Annotations

```cshtml
@using Syncfusion.Blazor.Diagram
Expand Down Expand Up @@ -139,7 +139,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync

![HyperLink with Content in Blazor Diagram](../images/blazor-diagram-hyperlink-content.png)

## How to change text wrapping
## How to Change Text Wrapping

The [TextWrapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextWrapping) property of an annotation defines how the text should be wrapped. When text overflows node boundaries, you can control it by using the `TextWrapping`. So, it is wrapped into multiple lines. The following code explains how to wrap a text in a node.

Expand Down Expand Up @@ -190,7 +190,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
| Wrap | Text-wrapping occurs, when the text overflows beyond the available node width. | ![Text Wrapping in Blazor Diagram](../images/blazor-diagram-text-wrapping.png) |
| WrapWithOverflow (Default) | Text-wrapping occurs, when the text overflows beyond the available node width. However, the text may overflow beyond the node width in the case of a very long word. | ![Blazor Diagram Text Wrapping with Overflow](../images/blazor-diagram-text-wrap-with-overflow.png) |

### How to update text overflow
### How to Update Text Overflow

The [TextOverflow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextOverflow) property specifies how the overflowed content that is not displayed should be signaled to the user. The TextOverflow property can have the following values.

Expand Down Expand Up @@ -256,7 +256,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync

N>**Note :** All the customization over the overflow is also applicable to connector’s annotation.

## How to customize the appearance of an annotation
## How to Customize the Appearance of an Annotation

You can change the font style of the annotations with the font specific properties such as FontSize, FontFamily, and Color. The following code explains how to customize the appearance of the annotation.

Expand Down Expand Up @@ -316,7 +316,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync

![Blazor Diagram Label with Custom Annotation](../images/blazor-diagram-label-with-custom-annotation.png)

## How to update the annotation style at runtime
## How to Update the Annotation Style at Runtime

You can change the font style of the annotations with the font specific properties such as [FontSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_FontSize), [FontFamily](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_FontFamily), and [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_Color). The following code explains how to update the font style of the annotation.

Expand Down Expand Up @@ -382,7 +382,7 @@ You can change the font style of the annotations with the font specific properti
```
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/AnnotationStyleatRunTime)

## How to change the editing mode
## How to Change the Editing Mode

The diagram provides support to edit an annotation at runtime, either programmatically or interactively. By default, the annotation is in view mode. However, it can be brought into edit mode in two ways.

Expand All @@ -393,7 +393,7 @@ The diagram provides support to edit an annotation at runtime, either programmat

Double-clicking any annotation will enable the editing and the node enables first annotation editing. When the focus of editor is lost, the annotation for the node is updated.

## How to set read only constraints for annotation
## How to Set Read Only Constraints for Annotation

The diagram allows you to create read-only annotations. You have to set the read-only property of annotation to enable or disable the [ReadOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html#Syncfusion_Blazor_Diagram_AnnotationConstraints_ReadOnly) constraints. The following code explains how to enable read-only mode.

Expand Down Expand Up @@ -434,7 +434,7 @@ The diagram allows you to create read-only annotations. You have to set the read
```
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/ReaonlyConstraints)

## How to create multiple annotations
## How to Create Multiple Annotations

You can add any number of annotations to a node or connector. The following code example shows how to add multiple annotations to a node.

Expand Down Expand Up @@ -522,7 +522,7 @@ N>* Type of the annotation’s property of the node or connector is ObservableCo
<br/>* All the same customization can be applicable for the annotations.
<br/>* Text Editing can be started only the first annotation of the annotation collection when you double click the node or connector.

## How to update annotation constraints
## How to Update Annotation Constraints

[AnnotationConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html) are used to enable or disable certain behaviors of the annotation. Constraints are provided as flagged enumerations, so that multiple behaviors can be enabled or disabled with bitwise operators.

Expand Down
12 changes: 6 additions & 6 deletions blazor/diagram/annotations/connector-annotation.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
layout: post
title: Annotation for Connector in Blazor Diagram Component | Syncfusion
title: Controlling Connector Annotation in Blazor Diagrams | Syncfusion
description: Checkout and learn here all about Annotation for Connector in Syncfusion Blazor Diagram component and more.
platform: Blazor
control: Diagram Component
documentation: ug
---

# How to position connector’s annotation
# Controlling Connector Annotation in Blazor Diagrams

Annotations of a connector can be positioned using the following properties of Annotation class.

Expand All @@ -19,7 +19,7 @@ Annotations of a connector can be positioned using the following properties of A
* VerticalAlignment
* Margin

## How to update offset for annotations
## How to Update the Offset for Annotations

The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PathAnnotation.html#Syncfusion_Blazor_Diagram_PathAnnotation_Offset) property of an annotation is used to align the annotations based on fractions. A value of 0 represents Top-Left corner, 1 represents Bottom-Right corner, and 0.5 represents half of Width/Height.

Expand Down Expand Up @@ -78,7 +78,7 @@ The following image shows the relationship between the annotation position and o
> * By default, offset value of the connector annotation is 0.5.
> * Connector annotation's Id should not start with numbers or special characters and should not contain special characters such as underscores(_) or spaces.

## How to change the alignment of an annotation
## How to Change the Alignment of an Annotation

The connector’s annotation can be aligned over its segment path using the [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PathAnnotation.html#Syncfusion_Blazor_Diagram_PathAnnotation_Alignment) property of the annotation.

Expand Down Expand Up @@ -129,7 +129,7 @@ The following screenshot shows how the annotation of the connector aligned over

N> By default, Alignment value of the connector annotation is `Center`.

## How to change the displacement of an annotation
## How to Change the Displacement of an Annotation

The [Displacement](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PathAnnotation.html#Syncfusion_Blazor_Diagram_PathAnnotation_Displacement) property is used to dislocate the annotation by the value given. By default, annotation will be in centered on the connector path. When you assign a value to the Displacement property, the annotation will be displaced from its position by displacement value.

Expand Down Expand Up @@ -173,7 +173,7 @@ The [Displacement](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagr
```
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfConnector/DisplacementOfAnnotation)

## How to update the segment angle of an annotation
## How to Update the Segment Angle of an Annotation

The [SegmentAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PathAnnotation.html#Syncfusion_Blazor_Diagram_PathAnnotation_SegmentAngle) property is used to rotate the annotation based on the connectors segment direction. By default, the annotation will be rotated in the connector path. When you assign a value to the SegmentPath property, the annotation will be rotated from its position based on the connector segment direction.

Expand Down
8 changes: 4 additions & 4 deletions blazor/diagram/annotations/events.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
---
layout: post
title: Events in Blazor Diagram Component | Syncfusion
title: Controlling Annotation Events in Blazor Diagrams | Syncfusion
description: Checkout and learn here all about Events in Syncfusion Blazor Diagram component and much more details.
platform: Blazor
control: Diagram Component
documentation: ug
---

# Events in Blazor Diagram Component
# Controlling Annotation Events in Blazor Diagrams

## Text Change event
## Text Change Event

* While editing a node's or connector's annotation, the following event can be used to do the customization.
* When a node's or connector's annotation is changed in the diagram, this event is getting triggered.
Expand Down Expand Up @@ -65,7 +65,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync

## See also

* [How to add or remove annotation constraints](../constraints/#annotation-constraints)
* [How to add or remove annotation constraints](../constraints#annotation-constraints)

* [How to customize the annotation](./appearance)

Expand Down
4 changes: 2 additions & 2 deletions blazor/diagram/annotations/interactions.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
layout: post
title: Interaction in Blazor Diagram Component | Syncfusion
title: Controlling Annotation Interaction in Blazor Diagrams | Syncfusion
description: Checkout and learn here all about Interaction in Syncfusion Blazor Diagram component and much more details.
platform: Blazor
control: Diagram Component
documentation: ug
---

# Annotation Interaction in Blazor Diagram Component
# Controlling Annotation Interaction in Blazor Diagrams

Diagram provides the support to the annotations rotation interactively.

Expand Down
12 changes: 6 additions & 6 deletions blazor/diagram/annotations/labels.md
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
---
layout: post
title: Actions of Annotation in Blazor Diagram Component | Syncfusion
title: Controlling Annotation in Blazor Diagrams | Syncfusion
description: Checkout and learn here all about actions of annotation in Syncfusion Blazor Diagram component and more.
platform: Blazor
control: Diagram Component
documentation: ug
---

# Annotation in Blazor Diagram Component
# Controlling Annotation in Blazor Diagrams

The [Annotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html) is a block of text that can be displayed over a node or connector and it is used to textually represent an object with a string that can be edited at run time. Multiple annotations can be added to a node or connector.

## How to create annotation
## How to Create Annotation

An annotation can be added to a node or connector by defining the annotation object and adding it to the annotation collection of the node or connector. The [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Content) property of the annotation defines the text to be displayed.

Expand Down Expand Up @@ -78,7 +78,7 @@ N>* [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotat
<br/>* By default, connector’s path annotation positioned in center point of its path.
>**Note:** Do not use underscores(_) for annotation's id.

## How to add annotation at runtime
## How to Add Annotation at Runtime

You can add an annotation at runtime to the Annotations collection of the node/connector in the diagram component by using the `Add` method.

Expand Down Expand Up @@ -140,7 +140,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync

![Adding Annotation in Blazor Diagram](../images/blazor-diagram-add-annotation.png)

## How to remove annotations at runtime
## How to Remove Annotations at Runtime

A collection of annotations can be removed from a node by using the `RemoveAt` method. The following code explains how to remove an annotation from a node.

Expand Down Expand Up @@ -202,7 +202,7 @@ Also, a collection of annotations can be removed from the node by using the `Rem
N>* You can delete multiple annotations from a node to pass the collection of annotation objects as argument.
<br/>* The `Add`, `Remove`, and `RemoveAt` methods are applicable for connectors too.

## How to update annotation at runtime
## How to Update Annotation at Runtime

You can get the annotation directly from the node’s annotations collection property and you can change any annotation properties at runtime.

Expand Down
Loading