From abda375f448aab01e5d7ba2de964b2fd25eb3863 Mon Sep 17 00:00:00 2001 From: Ramya Date: Mon, 22 Sep 2025 18:40:51 +0530 Subject: [PATCH 01/30] Revamping the Ug --- blazor/diagram/annotations/appearance.md | 101 +++++++++--------- .../annotations/connector-annotation.md | 26 ++--- blazor/diagram/annotations/events.md | 16 +-- blazor/diagram/annotations/interactions.md | 18 ++-- blazor/diagram/annotations/labels.md | 50 ++++----- blazor/diagram/annotations/node-annotation.md | 28 ++--- blazor/diagram/bpmn-shapes/bpmn-activity.md | 28 ++--- blazor/diagram/bpmn-shapes/bpmn-connectors.md | 36 ++++--- .../diagram/bpmn-shapes/bpmn-data-object.md | 6 +- blazor/diagram/bpmn-shapes/bpmn-data-store.md | 4 +- blazor/diagram/bpmn-shapes/bpmn-event.md | 4 +- .../bpmn-shapes/bpmn-expanded-sub-process.md | 35 +++--- blazor/diagram/bpmn-shapes/bpmn-gateway.md | 6 +- blazor/diagram/bpmn-shapes/bpmn-shapes.md | 6 +- .../bpmn-shapes/bpmn-text-annotation.md | 7 +- 15 files changed, 194 insertions(+), 177 deletions(-) diff --git a/blazor/diagram/annotations/appearance.md b/blazor/diagram/annotations/appearance.md index 5927de5974..c551a449a4 100644 --- a/blazor/diagram/annotations/appearance.md +++ b/blazor/diagram/annotations/appearance.md @@ -1,7 +1,7 @@ --- layout: post title: Annotation Appearance in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Appearance in Syncfusion Blazor Diagram component and much more details. +description: Checkout and Learn how to customize the appearance of annotation in the Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug @@ -11,7 +11,7 @@ documentation: ug ## How to Customize Annotation Size -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. +The annotation size can be customized using the `Height` and `Width` properties. By default, 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 are 0, which means the annotation inherits the size of its parent node or connector. The following code example demonstrates how to customize the annotation size. ```cshtml @using Syncfusion.Blazor.Diagram @@ -44,13 +44,13 @@ The diagram allows you to set size for annotations by using the Height and Width } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/SizeOfAnnotation) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/SizeOfAnnotation) ![Changing Annotation Size in Blazor Diagram](../images/blazor-diagram-annotation-size.png) -## How to Add Hyper Link to Annotation +## How to Add a 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. +A [Hyperlink](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Hyperlink) can be added to the node's or connector's annotation. It can also be customized. ```cshtml @using Syncfusion.Blazor.Diagram @@ -90,11 +90,13 @@ The diagram provides support to add a [Hyperlink](https://help.syncfusion.com/cr } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/HyperlinktoAnnotation) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/HyperlinktoAnnotation) ![Annotation with Hyperlink in Blazor Diagram](../images/blazor-diagram-annotation-with-hyperlink.png) -### How to Display Text in Annotation Hyper Links +### How to Display Text in Annotation Hyperlinks + +The Content property of the Hyperlink can be set to display custom text for the link. ```cshtml @using Syncfusion.Blazor.Diagram @@ -135,13 +137,13 @@ You can download a complete working sample from [GitHub](https://github.com/Sync } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/HyperlinkWithContent) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/HyperlinkWithContent) ![HyperLink with Content in Blazor Diagram](../images/blazor-diagram-hyperlink-content.png) ## How to Wrap Text Using 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. +The [TextWrapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextWrapping) property of an annotation's style defines the wrapping behavior for its text content. 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. ```cshtml @using Syncfusion.Blazor.Diagram @@ -182,7 +184,7 @@ The [TextWrapping](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/Appearance/AnnotationWithTextWrapping) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/AnnotationWithTextWrapping) | TextWrapping | Description | Image | | -------- | -------- | -------- | @@ -194,11 +196,11 @@ You can download a complete working sample from [GitHub](https://github.com/Sync 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. -* **Wrap**: Wraps the text to next line, when it exceeds its bounds. -* **Ellipsis**: It truncates the overflown text and renders an ellipsis ("...") to represent the clipped text. -* **Clip**: Clips the text, and the overflow text will not be shown. +* **Wrap**: Wraps the text to the next line when it exceeds its bounds. +* **Ellipsis**: Truncates the overflown text and renders an ellipsis ("...") to represent the clipped text. +* **Clip**: Clips the text, and the overflowed text will not be visible. -The following code sample shows how the different types of overflow property working for the different types of text wrapping. +The following code sample demonstrates how the TextOverflow property works with different TextWrapping settings. ```cshtml @using Syncfusion.Blazor.Diagram @@ -240,7 +242,7 @@ The following code sample shows how the different types of overflow property wor } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/AnnotationWithTextOverflow) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/AnnotationWithTextOverflow) | TextOverflow | Wrapping | Image | | -------- | -------- | -------- | @@ -254,19 +256,21 @@ You can download a complete working sample from [GitHub](https://github.com/Sync | Clip| Wrap | ![Blazor Diagram With Text Wrap in TextClipOverflow](../images/blazor-diagram-flowclip-wrap.png) | | Clip | WrapWithOverflow | ![Blazor Diagram Text Wrap with Overflow in TextClipOverflow](../images/blazor-diagram-flowclip-wrapwithoverflow.png) | -N>**Note :** All the customization over the overflow is also applicable to connector’s annotation. +N>**Note :** All overflow customizations are also applicable to connector annotations. ## 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. +The appearance of an annotation can be customized using various style properties. + +* The text style can be modified using properties like [Bold](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_Bold), [Italic](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_Italic), and [TextDecoration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextDecoration). -* The annotation’s [Bold](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_Bold), [Italic](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_Italic), and [TextDecoration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextDecoration) properties are used to style the annotation’s text. +* The annotation's background and border color can be defined with the [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_Fill), [StrokeColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_StrokeColor), and [StrokeWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_StrokeWidth) properties. -* The annotation’s [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_Fill), [StrokeColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_StrokeColor), and [StrokeWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_StrokeWidth) properties are used to define the background color and border color of the annotation and the [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_Opacity) property is used to define the transparency of the annotations. +* The transparency of the annotation is controlled by the [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_Opacity) property. * The [Visibility](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Visibility) property of the annotation enables or disables the visibility of annotation. -The Fill, Border, and Opacity appearances of the text can also be customized with appearance specific properties of the annotation. The following code explains how to customize the appearance of the annotation. +The following code explains how to customize the visual appearance of an annotation. ```cshtml @using Syncfusion.Blazor.Diagram @@ -312,13 +316,13 @@ The Fill, Border, and Opacity appearances of the text can also be customized wit } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/Appearance) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/Appearance) ![Blazor Diagram Label with Custom Annotation](../images/blazor-diagram-label-with-custom-annotation.png) ## How to Update Annotation Font 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. +The font style of annotations can be changed dynamically at runtime by modifying 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 demonstrates how to update the font style of the annotation. ```cshtml @using Syncfusion.Blazor.Diagram @@ -380,22 +384,22 @@ 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) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/AnnotationStyleatRunTime) ## How to Edit Annotations at Runtime -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. +Annotations can be edited at runtime either programmatically or interactively. By default, annotations are in view mode. Edit mode can be enabled in the following ways: -* You can edit the annotation programmatically by using the [StartTextEdit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_StartTextEdit_Syncfusion_Blazor_Diagram_IDiagramObject_System_String_) method. -* Also, you can edit the annotation interactively. -* By double-clicking the annotation. -* By selecting the item and pressing the F2 key. +* Programmatically: Invoke the [StartTextEdit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_StartTextEdit_Syncfusion_Blazor_Diagram_IDiagramObject_System_String_) method of the diagram component. +* Interactively: + * Double-click the annotation. + * Select the parent and press the F2 key. -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. +Double-clicking an annotation enables edit mode. For a object with multiple annotations, double-clicking the object itself will start the edit for the first annotation in its collection. When the focus of editor is lost, the annotation content is updated. -## How to Set Read Only Mode for Annotations +## How to Set Read-Only Mode for Annotations -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. +Annotations can be set to read-only mode by configuring their Constraints. Setting the [ReadOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html#Syncfusion_Blazor_Diagram_AnnotationConstraints_ReadOnly) constraints prevents user interaction and modification. The following code explains how to enable read-only mode. ```cshtml @using Syncfusion.Blazor.Diagram @@ -432,11 +436,11 @@ 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) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/ReaonlyConstraints) ## 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. +Multiple annotations can be added to a single node or connector. The following code example shows how to add multiple annotations to both a node and a connector. ```cshtml @using Syncfusion.Blazor.Diagram @@ -513,18 +517,18 @@ You can add any number of annotations to a node or connector. The following code } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/MultipleAnnotation) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/MultipleAnnotation) ![Blazor Diagram with Multiple Annotations](../images/blazor-diagram-multiple-annotations.png) N>* Type of the annotation’s property of the node or connector is ObservableCollection.
* Default value of the annotation will be null. -
* All the same customization can be applicable for the annotations. -
* Text Editing can be started only the first annotation of the annotation collection when you double click the node or connector. +
* All customization options are applicable to each annotation in the collection. +
* When double-clicking a node or connector, text editing is initiated only for the first annotation in the collection. ## How to Control 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. +[AnnotationConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html) are used to enable or disable certain behaviors of an annotation. Constraints are provided as flag enumerations, allowing multiple behaviors to be combined using bitwise operators. AnnotationConstraints may have multiple behaviors as follows: @@ -534,14 +538,15 @@ AnnotationConstraints may have multiple behaviors as follows: | [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html#Syncfusion_Blazor_Diagram_AnnotationConstraints_None) | Disables all behaviors of Annotation. | |[InheritReadOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html#Syncfusion_Blazor_Diagram_AnnotationConstraints_InheritReadOnly) |Enables or disables to inherit the ReadOnly option from the parent object.| -N> The default value is [InheritReadOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html#Syncfusion_Blazor_Diagram_AnnotationConstraints_InheritReadOnly) for constraints property of the annotation. +N> The default value for an annotation's Constraints property is [InheritReadOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html#Syncfusion_Blazor_Diagram_AnnotationConstraints_InheritReadOnly). -Refer to [Constraints](https://blazor.syncfusion.com/documentation/diagram/constraints) to learn about how to enable or disable the annotation constraints. +Refer to [Constraints](https://blazor.syncfusion.com/documentation/diagram/constraints) to learn more about how to enable or disable the annotation constraints. ## How to Define Templates in Annotations -The Diagram provides support for templates in annotations. You can define HTML content at the tag level and specify the use of a template using the [UseTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_UseTemplate) property. If you need to define separate templates for each annotation, you can differentiate them by using the ID property. -The following code illustrates how to define a template for a node's annotation. Similarly, you can define templates for connectors. +The Diagram component supports using templates for annotations. HTML content can be defined within a Diagram Templates tag and associated with an annotation by setting its [UseTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_UseTemplate) property to true. If you need to define separate templates for each annotation, you can differentiate using the ID property. + +The following code illustrates how to define a template for both a node's and a connector's annotation. ```cshtml @using Syncfusion.Blazor.Diagram @@ -635,14 +640,14 @@ The following code illustrates how to define a template for a node's annotation. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/TemplateSupportforAnnotation) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/TemplateSupportforAnnotation) ![Blazor Diagram with Template Annotations](../images/TemplateSupportforAnnotation.png) ## How to Add Additional Information for an Annotation -The [AdditionalInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_AdditionalInfo) property of an annotation allows you to store extra information associated with the annotation in a flexible way. This can be useful for maintaining metadata or additional details that you may need to access programmatically. +The [AdditionalInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_AdditionalInfo) property of an annotation allows you to store extra information associated with the annotation in a flexible way. This can be useful for maintaining metadata or additional details that need to be accessed programmatically. -The following code shows how to set the AdditionalInfo value. +The following code demonstrates how to set a value for the AdditionalInfo property. ```cshtml @using Syncfusion.Blazor.Diagram @@ -683,17 +688,17 @@ The following code shows how to set the AdditionalInfo value. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AdditionalInfoProperty) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AdditionalInfoProperty) -**Note:** You can set any type of value for the AdditionalInfo property. +**Note:** The AdditionalInfo property can accept any type of object as its value. ## See also * [How to add or remove annotation constraints](../constraints#annotation-constraints) -* [How to add annotation for Node](./node-annotation) +* [How to add an annotation for a Node](./node-annotation) -* [How to add annotation for Connector](./connector-annotation) +* [How to add an annotation for a Connector](./connector-annotation) * [How to Prevent Text Overflow and Display Excess Content on Hover in a Diagram](https://support.syncfusion.com/kb/article/18726/how-to-prevent-text-overflow-and-display-excess-content-on-hover-in-a-diagram) \ No newline at end of file diff --git a/blazor/diagram/annotations/connector-annotation.md b/blazor/diagram/annotations/connector-annotation.md index 8dfeafc11e..82b83c5732 100644 --- a/blazor/diagram/annotations/connector-annotation.md +++ b/blazor/diagram/annotations/connector-annotation.md @@ -1,7 +1,7 @@ --- layout: post title: Connector Annotation Position in Blazor Diagram | Syncfusion -description: Checkout and learn here all about Annotation for Connector in Syncfusion Blazor Diagram component and more. +description: Checkout and Learn how to position and align annotations on connectors in the Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Connector Annotation Position in Blazor Diagram -Annotations of a connector can be positioned using the following properties of Annotation class. +Connector annotations can be precisely positioned using several properties of the `PathAnnotation` class, including: * Offset * Alignment @@ -21,7 +21,7 @@ Annotations of a connector can be positioned using the following properties of A ## How to Update Offset Position 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. +The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PathAnnotation.html#Syncfusion_Blazor_Diagram_PathAnnotation_Offset) property positions an annotation along the length of the connector segment. It accepts a fractional value from 0 to 1, where 0 represents the beginning of the segment, 1 represents the end, and 0.5 represents the center. ```cshtml @using Syncfusion.Blazor.Diagram @@ -68,19 +68,19 @@ The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Pat } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfConnector/UpdateOffsetofAnnotation) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfConnector/UpdateOffsetofAnnotation) The following image shows the relationship between the annotation position and offset (fraction values). ![Displaying Annotation based on Offset in Blazor Diagram](../images/blazor-diagram-annotation-basedon-offset.png) >**Note:** -> * 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. +> * By default, the Offset value of a connector annotation is 0.5. +> * An annotation's ID must not start with a number or special character and must not contain underscores(_) or spaces. ## How to Change Annotation Alignment -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. +The [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PathAnnotation.html#Syncfusion_Blazor_Diagram_PathAnnotation_Alignment) property aligns an annotation relative to the connector's path. ```cshtml @using Syncfusion.Blazor.Diagram @@ -121,7 +121,7 @@ The connector’s annotation can be aligned over its segment path using the [Ali } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfConnector/AlignmentOfAnnotation) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfConnector/AlignmentOfAnnotation) The following screenshot shows how the annotation of the connector aligned over its path. @@ -131,7 +131,7 @@ N> By default, Alignment value of the connector annotation is `Center`. ## How to Change Annotation Displacement -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. +The [Displacement](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PathAnnotation.html#Syncfusion_Blazor_Diagram_PathAnnotation_Displacement) property moves an annotation from its default position along the connector path. By default, annotation will be in centered on the connector path. It accepts a DiagramPoint object that specifies the horizontal (X) and vertical (Y) distance to move the annotation. ```cshtml @using Syncfusion.Blazor.Diagram @@ -171,7 +171,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) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfConnector/DisplacementOfAnnotation) ## How to Update Annotation Segment Angle @@ -213,20 +213,20 @@ The following code example shows how the connector annotation rotated in its pat } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfConnector/SegmentAngleOfAnnotation) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfConnector/SegmentAngleOfAnnotation) | SegmentAngle | Output | |---|---| | True | ![Blazor Diagram Annotation in Vertical Position](../images/blazor-diagram-annotation-in-vertical-position.png) | | False | ![Blazor Diagram Annotation in Horizontal Position](../images/blazor-diagram-annotation-in-horizontal-position.png) | -N> By default, the SegmentAngle will be disabled. +N> By default, the SegmentAngle property is disabled (false). The `HorizontalAlignment`, `VerticalAlignment` and `Margin` properties were explained in the [NodeAnnotation](./node-annotation). ## See also -* [How to add annotation for Node](./node-annotation) +* [How to add an annotation for a Node](./node-annotation) * [How to add or remove annotation constraints](../constraints#annotation-constraints) diff --git a/blazor/diagram/annotations/events.md b/blazor/diagram/annotations/events.md index 0346bf033b..9d31839410 100644 --- a/blazor/diagram/annotations/events.md +++ b/blazor/diagram/annotations/events.md @@ -1,7 +1,7 @@ --- layout: post title: Annotation Events in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Events in Syncfusion Blazor Diagram component and much more details. +description: Checkout and Learn how to use annotation events in the Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug @@ -9,17 +9,17 @@ documentation: ug # Annotation Events in Blazor Diagram Component -## How to Handle Text Change event +## How to Handle 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. |Event Name|Arguments|Description| |------------|-----------|------------------------| -|[TextChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_TextChanged)|[TextChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextChangeEventArgs.html)|Triggers when the node’s/connector's label is changed in the diagram.| -|[TextChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_TextChanging)|[TextChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextChangeEventArgs.html)|An event that is raised when the node and connector's label is changing in the diagram.| +|[TextChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_TextChanged)|[TextChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextChangeEventArgs.html)|Triggers after a node or connector's annotation text has been changed in the diagram.| +|[TextChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_TextChanging)|[TextChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextChangeEventArgs.html)|An event that is raised when the node and connector's annotation text is changing in the diagram.| -The following code example shows how to register and get notifications from the TextChanged and TextChanging events. +The following code example shows how to register and get notifications from the `TextChanged` and `TextChanging` events. ```cshtml @using Syncfusion.Blazor.Diagram @@ -61,7 +61,7 @@ The following code example shows how to register and get notifications from the } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Events/TextChangedEvent) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Events/TextChangedEvent) ## See also @@ -69,6 +69,6 @@ You can download a complete working sample from [GitHub](https://github.com/Sync * [How to customize the annotation](./appearance) -* [How to add annotation for Node](./node-annotation) +* [How to add an annotation for a Node](./node-annotation) -* [How to add annotation for Connector](./connector-annotation) +* [How to add an annotation for a Connector](./connector-annotation) diff --git a/blazor/diagram/annotations/interactions.md b/blazor/diagram/annotations/interactions.md index 2beddf9b66..20bd0ad901 100644 --- a/blazor/diagram/annotations/interactions.md +++ b/blazor/diagram/annotations/interactions.md @@ -1,7 +1,7 @@ --- layout: post title: Annotation Interaction in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Interaction in Syncfusion Blazor Diagram component and much more details. +description: Checkout and Learn how to interact with annotations in the Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug @@ -12,7 +12,7 @@ documentation: ug Diagram provides the support to the annotations rotation interactively. ## How to Rotate Annotations -The [RotationReference](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeAnnotation.html#Syncfusion_Blazor_Diagram_ShapeAnnotation_RotationReference) property of an annotation allows you to control whether the text should rotate relative to its parent node or the Page. The following code examples illustrate how to configure RotationReference for an annotation. +The [RotationReference](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeAnnotation.html#Syncfusion_Blazor_Diagram_ShapeAnnotation_RotationReference) property of an annotation allows you to control whether the text should rotate relative to its parent node or the Page. The following code examples illustrate how to configure `RotationReference` for an annotation. ```cshtml @@ -72,16 +72,16 @@ The [RotationReference](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. Value | Description | Image | | -------- | -------- | -------- | | Page | When this option is set, the annotation remains fixed in its original orientation even if its parent node is rotated. | ![Blazor Diagram RotationReference page](../images/rotationReferencePage.gif) | -| Parent | In this case, the annotation rotates along with its parent node. | ![Blazor Diagram RotationReference Parent](../images/rotationReferenceParent.gif) | +| Parent | When this option is set, the annotation rotates along with its parent node. | ![Blazor Diagram RotationReference Parent](../images/rotationReferenceParent.gif) | -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Interactions/RotationReference) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Interactions/RotationReference) ## How to rotate a Annotation using the RotationAngle property -The [RotationAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_RotationAngle) property for an annotation gets or sets the rotation angle in degrees. This determines how much the annotation text is tilted from its normal position. The default value is 0. +The [RotationAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_RotationAngle) property sets the rotation angle of an annotation in degrees. This determines how much the annotation text is tilted from its normal position. The default value is 0. -The following code examples illustrate how to configure RotationAngle for an annotation. +The following code examples illustrate how to configure `RotationAngle` for an annotation. ```cshtml @using Syncfusion.Blazor.Diagram @@ -112,7 +112,7 @@ The following code examples illustrate how to configure RotationAngle for an ann } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/RotationAngleProperty) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/RotationAngleProperty) ![Annotation Rotation in Blazor Diagram](../images/RotationAngleAnnotation.png) @@ -120,8 +120,8 @@ You can download a complete working sample from [GitHub](https://github.com/Sync * [How to add or remove annotation constraints](../constraints#annotation-constraints) -* [How to add annotation for Node](./node-annotation) +* [How to add an annotation for a Node](./node-annotation) -* [How to add annotation for Connector](./connector-annotation) +* [How to add an annotation for a Connector](./connector-annotation) * [How to animate connectors using annotationtemplate in angular diagram](https://support.syncfusion.com/kb/article/20265/how-to-animate-connectors-using-annotationtemplate-in-angular-diagram ) \ No newline at end of file diff --git a/blazor/diagram/annotations/labels.md b/blazor/diagram/annotations/labels.md index 25fc1063fe..755366ee05 100644 --- a/blazor/diagram/annotations/labels.md +++ b/blazor/diagram/annotations/labels.md @@ -1,7 +1,7 @@ --- layout: post title: Annotation in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about actions of annotation in Syncfusion Blazor Diagram component and more. +description: Checkout and Learn how to create, add, remove, and update annotation for nodes and connectors in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug @@ -9,18 +9,18 @@ documentation: ug # Annotation in Blazor Diagram Component -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. +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 single node or connector. -## How to Create Annotation +## How to Create an 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. +An annotation can be added to a node or connector by defining the annotation object and adding it to the `Annotation` collection of the parent object. 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. -To create and add annotation to Nodes and Connectors using the Blazor Diagram, refer to the below video link, +To create and add annotations to nodes and connectors using the Blazor Diagram, refer to the following video: {% youtube "youtube:https://www.youtube.com/watch?v=f7Jnl5hSy7I" %} -The following code explains how to create an annotation. +The following code example demonstrates how to create an annotation for a node and a connector. ```cshtml @using Syncfusion.Blazor.Diagram @@ -69,18 +69,18 @@ The following code explains how to create an annotation. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/CreateAnnotation/CreateAnnotation) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/CreateAnnotation/CreateAnnotation) ![Blazor Diagram Node with Annotation](../images/blazor-diagram-node-with-annotation.png) -N>* [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_ID) for each annotation should be unique and so it is further used to find the annotation at runtime and do any customization. -
* By default, node’s annotation positioned in center point of the shape. -
* By default, connector’s path annotation positioned in center point of its path. +N>* Each annotation's [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_ID) should be unique. It can be used to find and customize the annotation at runtime. +
* By default, a node's annotation is positioned at the center of the shape. +
* By default, a connector’s path annotation positioned at the center of its path. >**Note:** Do not use underscores(_) for annotation's id. -## How to Add Annotation at Runtime +## How to Add an 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. +An annotation can be added to the Annotations collection of a node or connector at runtime by using the `Add` methods. The following code explains how to add an annotation to a node at runtime by using `Add` method. @@ -122,7 +122,7 @@ The following code explains how to add an annotation to a node at runtime by usi } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AddAnnotationAtRunTime) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AddAnnotationAtRunTime) Also, the annotations can be added at runtime by using the [AddAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramObjectCollection-1.html#Syncfusion_Blazor_Diagram_DiagramObjectCollection_1_AddAsync__0_) method. The `await` operator suspends the evaluation of the enclosing async method until the asynchronous operation represented by its operand completes. @@ -136,13 +136,13 @@ public async void AddLabel() await(diagram.Nodes[0].Annotations as DiagramObjectCollection).AddAsync(annotation); } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations) ![Adding Annotation in Blazor Diagram](../images/blazor-diagram-add-annotation.png) -## How to Remove Annotation at Runtime +## How to Remove an Annotation 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. +An annotation can be removed from a node or connector's Annotations collection by using the `RemoveAt` method. The following code explains how to remove an annotation from a node. ```cshtml @using Syncfusion.Blazor.Diagram @@ -186,9 +186,9 @@ A collection of annotations can be removed from a node by using the `RemoveAt` m } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/RemoveAnnotation/RemoveAnnotation) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/RemoveAnnotation/RemoveAnnotation) -Also, a collection of annotations can be removed from the node by using the `Remove` method. +Also, The `Remove` method can also be used to remove a specific annotation object. ```cshtml // Method to remove annotation at runtime using Remove method. @@ -200,13 +200,13 @@ 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. -
* The `Add`, `Remove`, and `RemoveAt` methods are applicable for connectors too. +
* The `Add`, `AddAsync`, `Remove`, and `RemoveAt` methods are applicable for connectors too. -## How to Update Annotation at Runtime +## How to Update an 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. +An annotation can be updated at runtime by retrieving it from the node or connector's Annotations collection and modifying its properties. -The following code sample shows how the annotation of the node changed at runtime. +The following code sample shows how to change the content of a node's annotation at runtime. ```cshtml @using Syncfusion.Blazor.Diagram @@ -250,7 +250,7 @@ The following code sample shows how the annotation of the node changed at runtim } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/UpdateAnnotation/UpdateAnnotation) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/UpdateAnnotation/UpdateAnnotation) ## See also @@ -261,6 +261,6 @@ You can download a complete working sample from [GitHub](https://github.com/Sync * [How to animate connectors using annotationtemplate in angular diagram](https://support.syncfusion.com/kb/article/20265/how-to-animate-connectors-using-annotationtemplate-in-angular-diagram ) * [How to dynamically create and connect diagram nodes with annotations via ports in syncfusion® blazor diagram](https://support.syncfusion.com/kb/article/19001/how-to-dynamically-create-and-connect-diagram-nodes-with-annotations-via-ports-in-syncfusion-blazor-diagram)  -* [How to Prevent Text Overflow and Display Excess Content on Hover in a Diagram?](https://support.syncfusion.com/kb/article/18726/how-to-prevent-text-overflow-and-display-excess-content-on-hover-in-a-diagram) +* [How to Prevent text Overflow and display excess Content on hover in a diagram](https://support.syncfusion.com/kb/article/18726/how-to-prevent-text-overflow-and-display-excess-content-on-hover-in-a-diagram) -* [How to generate a hierarchical layout with annotation at runtime?](https://support.syncfusion.com/kb/article/17884/how-to-generate-a-hierarchical-layout-with-annotation-at-runtime) \ No newline at end of file +* [How to generate a hierarchical layout with annotations at runtime](https://support.syncfusion.com/kb/article/17884/how-to-generate-a-hierarchical-layout-with-annotation-at-runtime) \ No newline at end of file diff --git a/blazor/diagram/annotations/node-annotation.md b/blazor/diagram/annotations/node-annotation.md index 90f46e74d6..6a89005441 100644 --- a/blazor/diagram/annotations/node-annotation.md +++ b/blazor/diagram/annotations/node-annotation.md @@ -1,7 +1,7 @@ --- layout: post title: Node Annotation Position in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about annotation for node in Syncfusion Blazor Diagram component and more. +description: Checkout and Learn how to position annotations on nodes in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug @@ -9,7 +9,9 @@ documentation: ug # Node Annotation Position in Blazor Diagram Component -The diagram allows you to customize the position and appearance of the annotation efficiently. Annotations can be aligned relative to the node boundaries. It has Margin, Offset, Horizontal, and Vertical alignment settings. It is quite tricky when all four alignments are used together but gives more control over alignments properties of the [ShapeAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeAnnotation.html) class. Annotations of a node can be positioned using the following properties of `ShapeAnnotation`. +The diagram allows you to customize the position and appearance of the annotation efficiently. Annotations can be aligned relative to the node boundaries. It has Margin, Offset, Horizontal, and Vertical alignment settings. It is quite tricky when all four alignments are used together but gives more control over alignments properties of the [ShapeAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeAnnotation.html) class. + + Annotations of a node can be positioned using the following properties of `ShapeAnnotation`. * Offset * HorizontalAlignment @@ -18,9 +20,9 @@ The diagram allows you to customize the position and appearance of the annotatio ## How to Change Annotation Offset Position -The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeAnnotation.html#Syncfusion_Blazor_Diagram_ShapeAnnotation_Offset) property of an annotation is used to align the annotations based on fractions. 0 represents top/left corner, 1 represents bottom/right corner, and 0.5 represents half of width/height. +The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeAnnotation.html#Syncfusion_Blazor_Diagram_ShapeAnnotation_Offset) property of an annotation is used to align the annotations based on fractions. It is defined by a `DiagramPoint` where the X and Y values are fractions of the node's width and height, respectively. A value of 0 represents the top or left edge, 1 represents the bottom or right edge, and 0.5 represents the center. -The following code shows the relationship between the shape annotation position and the path annotation offset (fraction values). +The following code demonstrates how to set an annotation's `Offset`. ```cshtml @using Syncfusion.Blazor.Diagram @@ -56,7 +58,7 @@ The following code shows the relationship between the shape annotation position } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfNode/OffsetofAnnotation) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfNode/OffsetofAnnotation) | Offset values | Output | @@ -81,7 +83,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync The [HorizontalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_HorizontalAlignment) property of an annotation is used to set how the annotation is horizontally aligned at the annotation position determined from the fraction values. The [VerticalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_VerticalAlignment) property is used to set how the annotation is vertically aligned at the annotation position. -The following table shows all the possible alignments visually with 'offset (0, 0)'. +The following table shows all the possible alignments visually with an 'offset of (0, 0)'. | Horizontal Alignment | Vertical Alignment | Output with Offset(0,0) | | -------- | -------- | -------- | @@ -95,7 +97,7 @@ The following table shows all the possible alignments visually with 'offset (0, | Center | Bottom | ![Blazor Diagram Label in Center Bottom Position](../images/blazor-diagram-label-in-centerbottom-position.png) | | Right |Bottom |![Blazor Diagram Label in Right Bottom Position](../images/blazor-diagram-label-in-rightbottom-position.png) | -The following code explains how to align annotations. +The following code demonstrates how to align an annotation. ```cshtml @using Syncfusion.Blazor.Diagram @@ -133,7 +135,7 @@ The following code explains how to align annotations. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfNode/AlignmentOfAnnotation) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfNode/AlignmentOfAnnotation) N>* The value of the `HorizontalAlignment` is [Center](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.HorizontalAlignment.html#Syncfusion_Blazor_Diagram_HorizontalAlignment_Center) by default. @@ -142,7 +144,7 @@ N>* The value of the `HorizontalAlignment` is [Center](https://help.syncfusion.c ## How to Change Annotation Margin -[Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Margin) is an absolute value used to add some blank space to any one of its four sides. The annotations can be displaced with the margin property. The following code example explains how to align an annotation based on its Offset, HorizontalAlignment, VerticalAlignment, and Margin values. +The [Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Margin) property adds space around the annotation. The annotations can be displaced with the margin property. The following code example explains how to align an annotation based on its Offset, HorizontalAlignment, VerticalAlignment, and Margin values. ```cshtml @using Syncfusion.Blazor.Diagram @@ -182,12 +184,12 @@ N>* The value of the `HorizontalAlignment` is [Center](https://help.syncfusion.c } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfNode/MarginOfAnnotation) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfNode/MarginOfAnnotation) ## How to Align the Text -The [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextAlign) property of an annotation allows you to set how the text should be aligned (Left, Right, Center, or Justify) inside the text block. The following code explains how to set TextAlign for an annotation. +The [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextAlign) property of an annotation's Style allows you to set how the text should be aligned (Left, Right, Center, or Justify) inside the text block. The following code explains how to set TextAlign for an annotation. ```cshtml @using Syncfusion.Blazor.Diagram @@ -228,11 +230,11 @@ The [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram. } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfNode/AlignText) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfNode/AlignText) ## See also -* [How to add annotation for Connector](./connector-annotation) +* [How to add an annotation for a Connector](./connector-annotation) * [How to add or remove annotation constraints](../constraints#annotation-constraints) diff --git a/blazor/diagram/bpmn-shapes/bpmn-activity.md b/blazor/diagram/bpmn-shapes/bpmn-activity.md index bec15c2b7b..d1b36835b3 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-activity.md +++ b/blazor/diagram/bpmn-shapes/bpmn-activity.md @@ -11,7 +11,7 @@ documentation: ug The [Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html) is the task that is performed in a business process. It is represented by a rounded rectangle. -There are two types of activities. They are listed as follows: +There are two primary types of activities. They are listed as follows: * [Task](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_Task): It occurs within a process and is not broken down to a finer level of detail. * [Collapsed Sub-Process](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_CollapsedSubProcess): It occurs within a process and is broken down to a finer level of detail. @@ -52,13 +52,15 @@ You can specify the any one of the above activity type using the [ActivityType]( } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/BpmnActivity) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/BpmnActivity) ![Send Task BPMN Shape](../images/Task.png) ## How to Create a BPMN Activity Task -The [TaskType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_TaskType) property of the [Bpmn Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html) allows you to define the type of task such as sending, receiving, user-based task, etc. By default, the value of [TaskType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_TaskType) property is set to **None.** This is shown by a small event symbol in the top of the corner. The following code explains how to create different types of BPMN tasks. +The [TaskType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_TaskType) property of the [Bpmn Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html) allows you to define the type of task such as sending, receiving, user-based task, etc. By default, the value of [TaskType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_TaskType) property is set to **None.** This is shown by a small event symbol in the top of the corner. + +The following code explains how to create different types of BPMN tasks. ```cshtml @using Syncfusion.Blazor.Diagram @@ -95,12 +97,12 @@ The [TaskType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.B } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/BpmnActivityTask) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/BpmnActivityTask) ![Send Task BPMN Shape](../images/Send.png) -The various types of BPMN tasks are tabulated as follows. +The available BPMN task types are described below. | Shape | Image | Description| | -------- | -------- | -------- | @@ -152,7 +154,7 @@ A [Collapsed Sub-Process](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/BpmnActivityCollapsedSubProcess) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/BpmnActivityCollapsedSubProcess) ![Collapsed Subprocess BPMN Shape](../images/Bpmn-CollapsedSub-Process-Loop-None.png) @@ -198,12 +200,12 @@ You can define the `Loop` property in BPMN Activity, as shown in the following c } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/Loop) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/Loop) ![Standard Task BPMN Shape](../images/Bpmn-Task-Loop-Standard.png) -The following table contains various types of BPMN loops. +The available loop types are described below. | LoopActivity | Task | Subprocess | Description| | -------- | -------- | --------| --------| @@ -252,7 +254,7 @@ The following table contains various types of BPMN loops. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/Compensation) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/Compensation) ![IsCompensationActivity Task BPMN Shape](../images/Bpmn-Task-Compensation.png) @@ -347,14 +349,14 @@ N>* By default, the [IsAdhoc](https://help.syncfusion.com/cr/blazor/Syncfusion.B } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/Adhoc) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/Adhoc) ![IsAdHocActivity CollapsedSub-Process BPMN Shape](../images/Bpmn-CollapsedSub-Process-AdHocpng.png) ### How to Set Sub-Process Type -SubProcessType represents the type of task that is being processed. The [SubProcessType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_SubProcessType) property of subprocess allows you to define the type of SubProcessType. By default, it is set to [Default](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnSubProcessType.html#Syncfusion_Blazor_Diagram_BpmnSubProcessType_Default). +The `SubProcessType` property represents the type of task that is being processed. The [SubProcessType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_SubProcessType) property of subprocess allows you to define the type of SubProcessType. By default, it is set to [Default](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnSubProcessType.html#Syncfusion_Blazor_Diagram_BpmnSubProcessType_Default). ```cshtml @using Syncfusion.Blazor.Diagram @@ -391,11 +393,11 @@ SubProcessType represents the type of task that is being processed. The [SubProc } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/SubProcessType) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/SubProcessType) ![Event Boundary BPMN Shape](../images/Bpmn-CollapsedSub-Process-Event.png) -The following table contains various types of BPMN boundaries. +The available sub-process types are described below. | SubProcessType | Image | Description| | -------- | -------- | -------- | diff --git a/blazor/diagram/bpmn-shapes/bpmn-connectors.md b/blazor/diagram/bpmn-shapes/bpmn-connectors.md index ecb451a1da..1d642f73af 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-connectors.md +++ b/blazor/diagram/bpmn-shapes/bpmn-connectors.md @@ -11,19 +11,21 @@ documentation: ug The `BPMN Connectors` are lines that connect BPMN flow objects. -They are classified as follows. +They are primarily classified into three categories: * Association * Sequence * Message -## How to Create a Association +## How to Create an Association -The `BPMN Association` flow is used to link flow objects with their corresponding text or artifact. An association is represented as a dotted graphical line with an opened arrow. -To create an Association, the [Flow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html#Syncfusion_Blazor_Diagram_BpmnFlow_Flow) property of the [BpmnFlowShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html) should be set to [AssociationFlow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlowType.html#Syncfusion_Blazor_Diagram_BpmnFlowType_AssociationFlow). The types of association are as follows: +An `BPMN Association` flow is used to link flow objects with their corresponding text or artifact. It is represented as a dotted graphical line with an opened arrow. +To create an Association, set the [Flow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html#Syncfusion_Blazor_Diagram_BpmnFlow_Flow) property of the [BpmnFlowShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html) should be set to one of the association types. -* DirectionalAssociationFlow: Represented as a dotted graphical line with one side arrow. -* BiDirectionalAssociationFlow: Represented as a dotted graphical line with double side arrow. -* AssociationFlow: An Association is represented as a dotted graphical line with an opened arrow. +The available association types are: + +* DirectionalAssociationFlow: A dotted graphical line with one side arrow. +* BiDirectionalAssociationFlow: A dotted graphical line with double side arrow. +* AssociationFlow: A dotted graphical line with an opened arrow. The following code example explains how to create an association. @@ -58,7 +60,7 @@ The following code example explains how to create an association. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnConnectors/Association) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnConnectors/Association) ![Default BPMN FlowShapes](../images/Bpmn-AssociationFlow.png) @@ -72,7 +74,9 @@ The following table shows the visual representation of association flows. ## How to Create a Sequence -A `Sequence` flow shows the order that the activities are performed in a BPMN process and is represented by a solid graphical line. To create a SequenceFlow, [Flow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html#Syncfusion_Blazor_Diagram_BpmnFlow_Flow) property of the [BpmnFlowShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html) should be set to [SequenceFlow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlowType.html#Syncfusion_Blazor_Diagram_BpmnFlowType_SequenceFlow). The types of sequence are as follows: +A `Sequence` flow shows the order that the activities are performed in a BPMN process and is represented by a solid graphical line. To create a SequenceFlow,set the [Flow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html#Syncfusion_Blazor_Diagram_BpmnFlow_Flow) property of the [BpmnFlowShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html) shape to one of the sequence types. + +The available sequence types are: * SequenceFlow: Sequence flows represent the typical path between the two flow objects. * ConditionalSequenceFlow: Conditional sequence flows are used to control the flow of a process based on certain conditions. @@ -111,11 +115,11 @@ The following code example explains how to create a sequence flow. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnConnectors/Sequence) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnConnectors/Sequence) ![Normal Sequence BPMN Shape](../images/Bpmn-SequenceFlow.png) -The following table contains various representation of sequence flows. +The following table shows the different representations of sequence flows. | Sequence | Image | | -------- | -------- | @@ -127,7 +131,9 @@ N> The default value for the property `Sequence` is **Normal.** ## How to Create a Message -`Message` flows are used when two separately controlled processes communicate and collaborate with one another. An activity or event in one pool can initiate a message to the another pool. Message Flows are depicted as lines with an empty circle indicating where the message originates and an empty arrowhead where the message terminates. To create a MessageFlow, the [Flow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html#Syncfusion_Blazor_Diagram_BpmnFlow_Flow) property of the [BpmnFlowShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html) should be set to [MessageFlow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlowType.html#Syncfusion_Blazor_Diagram_BpmnFlowType_MessageFlow). The types of message flows are as follows: +A `Message` flows are used when two separately controlled processes communicate and collaborate with one another. An activity or event in one pool can initiate a message to the another pool. Message Flows are depicted as lines with an empty circle indicating where the message originates and an empty arrowhead where the message terminates. To create a MessageFlow, the [Flow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html#Syncfusion_Blazor_Diagram_BpmnFlow_Flow) property of the [BpmnFlowShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html) should be set to one of the message types. + +The available message flow types are: * InitiatingMessageFlow: An activity or event in one pool can initiate a message to another pool. * NonInitiatingMessageFlow: An activity or event in one pool cannot initiate a message to another pool. @@ -166,11 +172,11 @@ The following code example explains how to define a message flow. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnConnectors/Message) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnConnectors/Message) ![Default Message BPMN Shape](../images/Bpmn-MessageFlow.png) -The following table contains various representation of message flows. +The following table shows the different representations of message flows. | Message | Image | | -------- | -------- | @@ -178,4 +184,4 @@ The following table contains various representation of message flows. | [InitiatingMessageFlow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlowType.html#Syncfusion_Blazor_Diagram_BpmnFlowType_InitiatingMessageFlow) | ![InitiatingMessage Message BPMN Shape](../images/Bpmn-NonInitiatingMessageFlow.png) | | [NonInitiatingMessageFlow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlowType.html#Syncfusion_Blazor_Diagram_BpmnFlowType_NonInitiatingMessageFlow) | ![NonInitiatingMessage Message BPMN Shape](../images/Bpmn-InitiatingMessageFlow.png) | -N> The default value for the property `Flow` is **SequenceFlow.** +N> The default value for the property `Flow` property of a `BpmnFlow` shape is **SequenceFlow.** diff --git a/blazor/diagram/bpmn-shapes/bpmn-data-object.md b/blazor/diagram/bpmn-shapes/bpmn-data-object.md index fc0e34822e..644ee9cece 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-data-object.md +++ b/blazor/diagram/bpmn-shapes/bpmn-data-object.md @@ -9,7 +9,7 @@ documentation: ug # BPMN Data Object in Blazor Diagram Component -A data object represents information flowing through the process, such as data placed into the process, data resulting from the process, data that needs to be collected, or data that must be stored. To define a [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html), the node property [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shape.html) should be set as [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html), and the [DataObjectType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html#Syncfusion_Blazor_Diagram_BpmnDataObject_DataObjectType) property defines whether data is an input or output. You can indicate the collection of data object by setting the [IsCollectiveData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html#Syncfusion_Blazor_Diagram_BpmnDataObject_IsCollectiveData) property of [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html) as **True.** +A `BPMN Data Object` represents information flowing through the process, such as data placed into the process, data resulting from the process, data that needs to be collected, or data that must be stored. To define a [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html), the node property [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shape.html) should be set as [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html), and the [DataObjectType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html#Syncfusion_Blazor_Diagram_BpmnDataObject_DataObjectType) property defines whether data is an input or output. You can indicate the collection of data object by setting the [IsCollectiveData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html#Syncfusion_Blazor_Diagram_BpmnDataObject_IsCollectiveData) property of [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html) as **True.** ```cshtml @using Syncfusion.Blazor.Diagram @@ -46,11 +46,11 @@ A data object represents information flowing through the process, such as data p } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnDataObject/BpmnDataObject) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnDataObject/BpmnDataObject) ![ Data BPMN Shape](../images/Bpmn-DataObject-Collective-None.png) -The following table contains various representation of the BPMN data object. +The following table describes the different types of BPMN Data Objects. | DataObjectType | Symbol |IsCollectiveData| Description| | -------- | -------- |-------- | -------- | diff --git a/blazor/diagram/bpmn-shapes/bpmn-data-store.md b/blazor/diagram/bpmn-shapes/bpmn-data-store.md index 459dc80831..ac992e958e 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-data-store.md +++ b/blazor/diagram/bpmn-shapes/bpmn-data-store.md @@ -9,7 +9,7 @@ documentation: ug # BPMN Data Store in Blazor Diagram Component -A DataStore is used to store or access data associated with a business process. To create a dataStore, the node property [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shape.html) should be set to [BpmnDataStore](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataStore.html). The following code example explains how to create a data source. +A DataStore is used to store or access data associated with a business process. To create a `Data Store` shape, the node property [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shape.html) should be set to [BpmnDataStore](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataStore.html). The following code example explains how to create a data source. ```cshtml @using Syncfusion.Blazor.Diagram @@ -42,6 +42,6 @@ A DataStore is used to store or access data associated with a business process. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnDataStore/BpmnDataStore) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnDataStore/BpmnDataStore) ![BPMN Datasource](../images/Bpmn-DataStore.png) diff --git a/blazor/diagram/bpmn-shapes/bpmn-event.md b/blazor/diagram/bpmn-shapes/bpmn-event.md index 5d5212d551..4e809c8dc2 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-event.md +++ b/blazor/diagram/bpmn-shapes/bpmn-event.md @@ -52,7 +52,7 @@ The [EventType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnEvent/BpmnEventType) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnEvent/BpmnEventType) ![None Trigger End event event BPMNShape](../images/Bpmn-Event-End.png) @@ -97,7 +97,7 @@ Event triggers are notated as icons inside the circle and they represent the spe } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnEvent/BpmnEventType) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnEvent/BpmnEventType) ![Message Trigger Start Event BPMN Shape](../images/Bpmn-Event-Message-Start.png) diff --git a/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md b/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md index 99fb043502..d520b96466 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md +++ b/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md @@ -9,10 +9,10 @@ documentation: ug # BPMN Expanded Sub-Process in Blazor Diagram Component -An ExpandedSubProcess is used to frame a part of the diagram, shows that elements included in it logically belong together, and has no other semantics other than organizing elements. It is represented by a rounded rectangle. +An `BPMN Expanded Sub-Process` is used to frame a part of the diagram, shows that elements included in it logically belong together, and has no other semantics other than organizing elements. It is represented by a rounded rectangle. -## How to Create BPMN Expanded Sub-Process -To create a ExpandedSubProcess, define the `Shape` property of the node as [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html) and enable allow drop property of the node. +## How to Create an Expanded Sub-Process +To create an `Expanded Sub-Process`, define the `Shape` property of the node as [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html) and enable allow drop property of the node. The following code example explains how to create a BPMN Expanded Sub-Process. @@ -47,14 +47,15 @@ The following code example explains how to create a BPMN Expanded Sub-Process. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/BpmnExpandedSubProcess) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/BpmnExpandedSubProcess) -![BPMN Expanded Sub-Process](../images/Bpmn-ExpandedSubProcess.png) +![BPMN Expanded Sub-Process shape in Blazor Diagram.](../images/Bpmn-ExpandedSubProcess.png) + +## How to Add BPMN Nodes into a BPMN Expanded Sub-Process -## How to Add BPMN Nodes into BPMN Expanded Sub-Process To add a BpmnNode into [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html), define the BpmnNodeViewModel object and add it to the [Children](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_Children) collection of the [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html). -The following code example explains how to add a BPMN node to a BPMN Expanded Sub-Process using `Children` property. +The following code example explains how to add a BPMN node to an BPMN Expanded Sub-Process using the `Children` property. ```cshtml @using Syncfusion.Blazor.Diagram @@ -97,7 +98,7 @@ The following code example explains how to add a BPMN node to a BPMN Expanded Su } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/AddChildren) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/AddChildren) ![ExpandedSubProcess BPMN Shape](../images/Bpmn-ExpandedSubProcess-WithChildren.png) @@ -116,7 +117,7 @@ The following image shows how to add BPMN node into the BPMN ExpandedSubProcess ### How to Set Loop Type -[Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_Loop) is a task that is internally being looped. The [Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_Loop) property of [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html) allows you to define the type of loop. The default value for [Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_Loop) is [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnLoopCharacteristic.html#Syncfusion_Blazor_Diagram_BpmnLoopCharacteristic_None). You can define the `Loop` property in [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html), as shown in the following code. +The [Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_Loop) is a task that is internally being looped. The [Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_Loop) property of [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html) allows you to define the type of loop. The default value for [Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_Loop) is [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnLoopCharacteristic.html#Syncfusion_Blazor_Diagram_BpmnLoopCharacteristic_None). You can define the `Loop` property in [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html), as shown in the following code. ```cshtml @using Syncfusion.Blazor.Diagram @@ -152,11 +153,11 @@ The following image shows how to add BPMN node into the BPMN ExpandedSubProcess } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessLoop) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessLoop) ![Standard ExpandedSubProcess BPMN Shape](../images/Bpmn-Task-Loop-Standard.png) -The following table contains various types of BPMN loops. +The following table describes the available loop types for an Expanded Sub-Process. | LoopActivity | Task | Description| @@ -204,14 +205,14 @@ The following table contains various types of BPMN loops. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessCompensation) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessCompensation) ![IsCompensationActivity ExpandedSub-Process BPMN Shape](../images/Bpmn-Task-Compensation.png) ### How to Enable Ad-Hoc -An ad-hoc ExpandedSubProcess is a group of tasks that are executed in any order or skipped in order to fulfill the end condition and can be set with the [IsAdhoc](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_IsAdhoc) property of [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html). +An `Ad-Hoc` Expanded Sub-Process is a group of tasks that are executed in any order or skipped in order to fulfill the end condition and can be set with the [IsAdhoc](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_IsAdhoc) property of [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html). ```cshtml @using Syncfusion.Blazor.Diagram @@ -247,14 +248,14 @@ An ad-hoc ExpandedSubProcess is a group of tasks that are executed in any order } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessAdhoc) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessAdhoc) ![IsAdHocActivity ExpandedSub-Process BPMN Shape](../images/Bpmn-ExpandedSub-Process-Adhoc.png) ### How to Set Sub-Process Type -SubProcessType represents the type of task that is being processed. The [SubProcessType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_SubProcessType) property of [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html) allows you to define the type of SubProcessType. By default, it is set to [Default](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnSubProcessType.html#Syncfusion_Blazor_Diagram_BpmnSubProcessType_Default). +The `SubProcessType` represents the type of task that is being processed. The [SubProcessType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_SubProcessType) property of [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html) allows you to define the type of SubProcessType. By default, it is set to [Default](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnSubProcessType.html#Syncfusion_Blazor_Diagram_BpmnSubProcessType_Default). ```cshtml @using Syncfusion.Blazor.Diagram @@ -290,11 +291,11 @@ SubProcessType represents the type of task that is being processed. The [SubProc } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessType) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessType) ![Event Boundary BPMN Shape](../images/Bpmn-ExpandedSub-Process-Event.png) -The following table contains various types of BPMN SubProcess. +The following table describes the available sub-process types. | SubProcessType | Image | Description| | -------- | -------- | -------- | diff --git a/blazor/diagram/bpmn-shapes/bpmn-gateway.md b/blazor/diagram/bpmn-shapes/bpmn-gateway.md index 9c08db8259..69cab3c37b 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-gateway.md +++ b/blazor/diagram/bpmn-shapes/bpmn-gateway.md @@ -9,7 +9,7 @@ documentation: ug # BPMN Gateway in Blazor Diagram Component -A Gateway is used to control the flow of a process and it is represented in diamond shape. The [GatewayType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html#Syncfusion_Blazor_Diagram_BpmnGateway_GatewayType) property of the [BpmnGateway](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html) can be set with any of the appropriate gateways. By default, the value of [GatewayType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html#Syncfusion_Blazor_Diagram_BpmnGateway_GatewayType) is [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGatewayType.html#Syncfusion_Blazor_Diagram_BpmnGatewayType_None). The following code example explains how to create a BPMN Gateway. +A `BPMN Gateway` is used to control the flow of a process and it is represented in diamond shape. The [GatewayType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html#Syncfusion_Blazor_Diagram_BpmnGateway_GatewayType) property of the [BpmnGateway](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html) can be set with any of the appropriate gateways. By default, the value of [GatewayType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html#Syncfusion_Blazor_Diagram_BpmnGateway_GatewayType) is [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGatewayType.html#Syncfusion_Blazor_Diagram_BpmnGatewayType_None). The following code example explains how to create a BPMN Gateway. ```cshtml @using Syncfusion.Blazor.Diagram @@ -45,14 +45,14 @@ A Gateway is used to control the flow of a process and it is represented in diam } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnGateway/BpmnGateway) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnGateway/BpmnGateway) ![GateWay BPMN Shape](../images/bpmn-gataway-none.png) N> By default, the `GatewayType` will be set to **None.** -There are several types of gateways as follows: +The following table describes the available gateway types. | Shape | Image | Description| | -------- | -------- | -------- | diff --git a/blazor/diagram/bpmn-shapes/bpmn-shapes.md b/blazor/diagram/bpmn-shapes/bpmn-shapes.md index 3fb0b35515..f072dff140 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-shapes.md +++ b/blazor/diagram/bpmn-shapes/bpmn-shapes.md @@ -11,7 +11,7 @@ documentation: ug BPMN (Business Process Model and Notation) shapes are used to represent the internal business procedure in a graphical notation and enable you to communicate the procedures in a standard manner. To create a BPMN shape, the node property [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shape.html) should be set as any one of the built-in shapes. -The following code example explains how to create a simple business process. +The following code example demonstrates how to create a simple BPMN Task shape. ```cshtml @using Syncfusion.Blazor.Diagram @@ -47,14 +47,14 @@ The following code example explains how to create a simple business process. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnShape/BpmnShape) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnShape/BpmnShape) >**Note:** Node's Id should not start with numbers or special characters and should not contain special characters such as underscore(_) or space. ![Activity Shape](../images/Task.png) -The list of supported BPMN shapes are as follows: +The following table describes the available BPMN shapes. | Shape | Image | Description| | -------- | -------- | -------- | diff --git a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md index 954f284ffb..06882fd354 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md +++ b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md @@ -15,7 +15,7 @@ documentation: ug * The annotation element can be switched from a BPMN node to another BPMN node simply by dragging the source end of the annotation connector into the other BPMN node. -* By default, the TextAnnotation shape has a connection. +* By default, the `TextAnnotation` shape has a connection. * The [TextAnnotationDirection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTextAnnotation.html#Syncfusion_Blazor_Diagram_BpmnTextAnnotation_TextAnnotationDirection) property is used to set the shape direction of the text annotation. @@ -68,7 +68,7 @@ documentation: ug } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnTextAnnotation/BpmnTextAnnotation) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnTextAnnotation/BpmnTextAnnotation) ![Auto BPMN Shape](../images/Bpmn-TextAnnotation-Auto.png) @@ -139,13 +139,14 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Auto BPMN Shape](../images/bpmn-text-annotation_WithTarget.png) ## How to Connect a Text Annotation to a BPMN Node + Drag and drop any bpmn shapes from the palette to the diagram and connect the BPMN Node and TextAnnotation. The following image shows how to drag a symbol from the palette and connect the TextAnnotation to the BPMNNode with interaction. ![Auto BPMN Shape](../images/Bpmn-TextAnnotationTarget-Connect.gif) -There are several types of Text annotation directions as follows: +The following table describes the available Text annotation directions | Direction | Image | | -------- | -------- | From f12e33f75af6241615ebc074c1e9ba684ecc98b1 Mon Sep 17 00:00:00 2001 From: Ramya Date: Wed, 24 Sep 2025 14:54:39 +0530 Subject: [PATCH 02/30] Revamping the Ug --- blazor/diagram/annotations/appearance.md | 2 +- blazor/diagram/annotations/labels.md | 2 +- blazor/diagram/bpmn-shapes/bpmn-activity.md | 6 +++--- blazor/diagram/bpmn-shapes/bpmn-connectors.md | 2 +- blazor/diagram/bpmn-shapes/bpmn-data-object.md | 2 +- blazor/diagram/bpmn-shapes/bpmn-event.md | 2 +- blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md | 5 +++-- blazor/diagram/bpmn-shapes/bpmn-gateway.md | 2 +- blazor/diagram/bpmn-shapes/bpmn-shapes.md | 2 +- blazor/diagram/bpmn-shapes/bpmn-text-annotation.md | 2 +- 10 files changed, 14 insertions(+), 13 deletions(-) diff --git a/blazor/diagram/annotations/appearance.md b/blazor/diagram/annotations/appearance.md index c551a449a4..5ed356a4ae 100644 --- a/blazor/diagram/annotations/appearance.md +++ b/blazor/diagram/annotations/appearance.md @@ -544,7 +544,7 @@ Refer to [Constraints](https://blazor.syncfusion.com/documentation/diagram/const ## How to Define Templates in Annotations -The Diagram component supports using templates for annotations. HTML content can be defined within a Diagram Templates tag and associated with an annotation by setting its [UseTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_UseTemplate) property to true. If you need to define separate templates for each annotation, you can differentiate using the ID property. +The Diagram component supports templating for annotations. HTML content can be defined within the DiagramTemplates tag and linked to an annotation by setting the [UseTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_UseTemplate) property to true. To define separate templates for individual annotations, use the ID property to differentiate them. The following code illustrates how to define a template for both a node's and a connector's annotation. ```cshtml diff --git a/blazor/diagram/annotations/labels.md b/blazor/diagram/annotations/labels.md index 755366ee05..d48dc00270 100644 --- a/blazor/diagram/annotations/labels.md +++ b/blazor/diagram/annotations/labels.md @@ -258,7 +258,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn * [How to customize the annotation](./appearance) -* [How to animate connectors using annotationtemplate in angular diagram](https://support.syncfusion.com/kb/article/20265/how-to-animate-connectors-using-annotationtemplate-in-angular-diagram ) +* [How to animate connectors using annotationtemplate in angular diagram](https://support.syncfusion.com/kb/article/20265/how-to-animate-connectors-using-annotation template-in-angular-diagram ) * [How to dynamically create and connect diagram nodes with annotations via ports in syncfusion® blazor diagram](https://support.syncfusion.com/kb/article/19001/how-to-dynamically-create-and-connect-diagram-nodes-with-annotations-via-ports-in-syncfusion-blazor-diagram)  * [How to Prevent text Overflow and display excess Content on hover in a diagram](https://support.syncfusion.com/kb/article/18726/how-to-prevent-text-overflow-and-display-excess-content-on-hover-in-a-diagram) diff --git a/blazor/diagram/bpmn-shapes/bpmn-activity.md b/blazor/diagram/bpmn-shapes/bpmn-activity.md index d1b36835b3..c56bef9f86 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-activity.md +++ b/blazor/diagram/bpmn-shapes/bpmn-activity.md @@ -1,6 +1,6 @@ --- layout: post -title: BPMN Activity in Blazor Diagram Component | Syncfusion +title: BPMN Activity in Syncfusion Blazor Diagram Component | Syncfusion description: Learn here all about BPMN activity such as task, sub-process in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component @@ -58,7 +58,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ## How to Create a BPMN Activity Task -The [TaskType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_TaskType) property of the [Bpmn Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html) allows you to define the type of task such as sending, receiving, user-based task, etc. By default, the value of [TaskType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_TaskType) property is set to **None.** This is shown by a small event symbol in the top of the corner. +The [TaskType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_TaskType) property of the [Bpmn Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html) allows specification of the task type, such as sending, receiving, or user-based tasks. By default, the TaskType property is set to None, which is visually represented by a small event symbol in the top corner of the activity shape. The following code explains how to create different types of BPMN tasks. @@ -356,7 +356,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ### How to Set Sub-Process Type -The `SubProcessType` property represents the type of task that is being processed. The [SubProcessType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_SubProcessType) property of subprocess allows you to define the type of SubProcessType. By default, it is set to [Default](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnSubProcessType.html#Syncfusion_Blazor_Diagram_BpmnSubProcessType_Default). +The `SubProcessType` property represents the type of task being processed within a BPMN subprocess. The [SubProcessType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_SubProcessType) property of the subprocess allows specification of the subprocess type. By default, it is set to Default. ```cshtml @using Syncfusion.Blazor.Diagram diff --git a/blazor/diagram/bpmn-shapes/bpmn-connectors.md b/blazor/diagram/bpmn-shapes/bpmn-connectors.md index 1d642f73af..79b15cae41 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-connectors.md +++ b/blazor/diagram/bpmn-shapes/bpmn-connectors.md @@ -1,6 +1,6 @@ --- layout: post -title: BPMN Connectors in Blazor Diagram Component | Syncfusion +title: BPMN Connectors in Syncfusion Blazor Diagram Component | Syncfusion description: Learn here all about BPMN Connectors such as association, sequence, message in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component diff --git a/blazor/diagram/bpmn-shapes/bpmn-data-object.md b/blazor/diagram/bpmn-shapes/bpmn-data-object.md index 644ee9cece..5b72669643 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-data-object.md +++ b/blazor/diagram/bpmn-shapes/bpmn-data-object.md @@ -1,6 +1,6 @@ --- layout: post -title: BPMN Data Object in Blazor Diagram Component | Syncfusion +title: BPMN Data Object in Syncfusion Blazor Diagram Component | Syncfusion description: Learn here all about how to create BPMN data object in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component diff --git a/blazor/diagram/bpmn-shapes/bpmn-event.md b/blazor/diagram/bpmn-shapes/bpmn-event.md index 4e809c8dc2..abde0cbe45 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-event.md +++ b/blazor/diagram/bpmn-shapes/bpmn-event.md @@ -1,6 +1,6 @@ --- layout: post -title: BPMN Event in Blazor Diagram Component | Syncfusion +title: BPMN Event in Syncfusion Blazor Diagram Component | Syncfusion description: Learn here all about how to create the BPMN event and event trigger in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component diff --git a/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md b/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md index d520b96466..e86a9011c9 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md +++ b/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md @@ -117,7 +117,8 @@ The following image shows how to add BPMN node into the BPMN ExpandedSubProcess ### How to Set Loop Type -The [Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_Loop) is a task that is internally being looped. The [Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_Loop) property of [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html) allows you to define the type of loop. The default value for [Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_Loop) is [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnLoopCharacteristic.html#Syncfusion_Blazor_Diagram_BpmnLoopCharacteristic_None). You can define the `Loop` property in [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html), as shown in the following code. + The [Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_Loop) property in the [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html) component defines the type of loop behavior for a task that is internally repeated. By default, the Loop property is set to [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnLoopCharacteristic.html#Syncfusion_Blazor_Diagram_BpmnLoopCharacteristic_None). + The Loop property can be configured within the BpmnExpandedSubProcess component, as demonstrated in the following example. ```cshtml @using Syncfusion.Blazor.Diagram @@ -255,7 +256,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ### How to Set Sub-Process Type -The `SubProcessType` represents the type of task that is being processed. The [SubProcessType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_SubProcessType) property of [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html) allows you to define the type of SubProcessType. By default, it is set to [Default](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnSubProcessType.html#Syncfusion_Blazor_Diagram_BpmnSubProcessType_Default). +The `SubProcessType` represents the type of task being processed within a BPMN expanded subprocess. The [SubProcessType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_SubProcessType) property of the [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html) component allows specification of the subprocess type. By default, it is set to [Default](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnSubProcessType.html#Syncfusion_Blazor_Diagram_BpmnSubProcessType_Default). ```cshtml @using Syncfusion.Blazor.Diagram diff --git a/blazor/diagram/bpmn-shapes/bpmn-gateway.md b/blazor/diagram/bpmn-shapes/bpmn-gateway.md index 69cab3c37b..0101d2b3f0 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-gateway.md +++ b/blazor/diagram/bpmn-shapes/bpmn-gateway.md @@ -1,6 +1,6 @@ --- layout: post -title: BPMN Gateway in Blazor Diagram Component | Syncfusion +title: BPMN Gateway in Syncfusion Blazor Diagram Component | Syncfusion description: Learn here all about how to create the BPMN gateway in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component diff --git a/blazor/diagram/bpmn-shapes/bpmn-shapes.md b/blazor/diagram/bpmn-shapes/bpmn-shapes.md index f072dff140..a3822a3a2a 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-shapes.md +++ b/blazor/diagram/bpmn-shapes/bpmn-shapes.md @@ -1,6 +1,6 @@ --- layout: post -title: BPMN Shapes in Blazor Diagram Component | Syncfusion +title: BPMN Shapes in Syncfusion Blazor Diagram Component | Syncfusion description: Learn here all about how to create various BPMN Shapes in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component diff --git a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md index 06882fd354..eb366c5d49 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md +++ b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md @@ -1,6 +1,6 @@ --- layout: post -title: BPMN Text Annotation in Blazor Diagram Component | Syncfusion +title: BPMN Text Annotation in Syncfusion Blazor Diagram Component | Syncfusion description: Learn here all about how to create BPMN text annotation in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component From 6827e093aadfbd55b128f56bfdf7805dd47e2b9b Mon Sep 17 00:00:00 2001 From: Ramya Date: Wed, 24 Sep 2025 15:18:48 +0530 Subject: [PATCH 03/30] Revamping the Ug --- blazor/diagram/annotations/labels.md | 2 +- blazor/diagram/bpmn-shapes/bpmn-activity.md | 4 ++-- blazor/diagram/bpmn-shapes/bpmn-connectors.md | 4 ++-- blazor/diagram/bpmn-shapes/bpmn-data-object.md | 4 ++-- blazor/diagram/bpmn-shapes/bpmn-event.md | 4 ++-- blazor/diagram/bpmn-shapes/bpmn-gateway.md | 4 ++-- blazor/diagram/bpmn-shapes/bpmn-shapes.md | 4 ++-- blazor/diagram/bpmn-shapes/bpmn-text-annotation.md | 4 ++-- 8 files changed, 15 insertions(+), 15 deletions(-) diff --git a/blazor/diagram/annotations/labels.md b/blazor/diagram/annotations/labels.md index d48dc00270..8f92d36736 100644 --- a/blazor/diagram/annotations/labels.md +++ b/blazor/diagram/annotations/labels.md @@ -258,7 +258,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn * [How to customize the annotation](./appearance) -* [How to animate connectors using annotationtemplate in angular diagram](https://support.syncfusion.com/kb/article/20265/how-to-animate-connectors-using-annotation template-in-angular-diagram ) +* [How to animate connectors using annotation template in angular diagram](https://support.syncfusion.com/kb/article/20265/how-to-animate-connectors-using-annotation template-in-angular-diagram ) * [How to dynamically create and connect diagram nodes with annotations via ports in syncfusion® blazor diagram](https://support.syncfusion.com/kb/article/19001/how-to-dynamically-create-and-connect-diagram-nodes-with-annotations-via-ports-in-syncfusion-blazor-diagram)  * [How to Prevent text Overflow and display excess Content on hover in a diagram](https://support.syncfusion.com/kb/article/18726/how-to-prevent-text-overflow-and-display-excess-content-on-hover-in-a-diagram) diff --git a/blazor/diagram/bpmn-shapes/bpmn-activity.md b/blazor/diagram/bpmn-shapes/bpmn-activity.md index c56bef9f86..067fca86d1 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-activity.md +++ b/blazor/diagram/bpmn-shapes/bpmn-activity.md @@ -1,13 +1,13 @@ --- layout: post -title: BPMN Activity in Syncfusion Blazor Diagram Component | Syncfusion +title: BPMN Activity in Blazor Diagram Component | Syncfusion description: Learn here all about BPMN activity such as task, sub-process in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Activity in Blazor Diagram Component +# BPMN Activity in Syncfusion Blazor Diagram Component The [Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html) is the task that is performed in a business process. It is represented by a rounded rectangle. diff --git a/blazor/diagram/bpmn-shapes/bpmn-connectors.md b/blazor/diagram/bpmn-shapes/bpmn-connectors.md index 79b15cae41..e09159db05 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-connectors.md +++ b/blazor/diagram/bpmn-shapes/bpmn-connectors.md @@ -1,13 +1,13 @@ --- layout: post -title: BPMN Connectors in Syncfusion Blazor Diagram Component | Syncfusion +title: BPMN Connectors in Blazor Diagram Component | Syncfusion description: Learn here all about BPMN Connectors such as association, sequence, message in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Connectors in Blazor Diagram Component +# BPMN Connectors in Syncfusion Blazor Diagram Component The `BPMN Connectors` are lines that connect BPMN flow objects. diff --git a/blazor/diagram/bpmn-shapes/bpmn-data-object.md b/blazor/diagram/bpmn-shapes/bpmn-data-object.md index 5b72669643..8505b38cc3 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-data-object.md +++ b/blazor/diagram/bpmn-shapes/bpmn-data-object.md @@ -1,13 +1,13 @@ --- layout: post -title: BPMN Data Object in Syncfusion Blazor Diagram Component | Syncfusion +title: BPMN Data Object in Blazor Diagram Component | Syncfusion description: Learn here all about how to create BPMN data object in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Data Object in Blazor Diagram Component +# BPMN Data Object in Syncfusion Blazor Diagram Component A `BPMN Data Object` represents information flowing through the process, such as data placed into the process, data resulting from the process, data that needs to be collected, or data that must be stored. To define a [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html), the node property [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shape.html) should be set as [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html), and the [DataObjectType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html#Syncfusion_Blazor_Diagram_BpmnDataObject_DataObjectType) property defines whether data is an input or output. You can indicate the collection of data object by setting the [IsCollectiveData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html#Syncfusion_Blazor_Diagram_BpmnDataObject_IsCollectiveData) property of [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html) as **True.** diff --git a/blazor/diagram/bpmn-shapes/bpmn-event.md b/blazor/diagram/bpmn-shapes/bpmn-event.md index abde0cbe45..282df8a245 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-event.md +++ b/blazor/diagram/bpmn-shapes/bpmn-event.md @@ -1,13 +1,13 @@ --- layout: post -title: BPMN Event in Syncfusion Blazor Diagram Component | Syncfusion +title: BPMN Event in Blazor Diagram Component | Syncfusion description: Learn here all about how to create the BPMN event and event trigger in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Event in Blazor Diagram Component +# BPMN Event in Syncfusion Blazor Diagram Component An [Event](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnEvent.html) is a common BPMN process model element that represents something that happens during a business process and is notated with a circle. The type of events are as follows: diff --git a/blazor/diagram/bpmn-shapes/bpmn-gateway.md b/blazor/diagram/bpmn-shapes/bpmn-gateway.md index 0101d2b3f0..ffeac5a3d9 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-gateway.md +++ b/blazor/diagram/bpmn-shapes/bpmn-gateway.md @@ -1,13 +1,13 @@ --- layout: post -title: BPMN Gateway in Syncfusion Blazor Diagram Component | Syncfusion +title: BPMN Gateway in Blazor Diagram Component | Syncfusion description: Learn here all about how to create the BPMN gateway in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Gateway in Blazor Diagram Component +# BPMN Gateway in Syncfusion Blazor Diagram Component A `BPMN Gateway` is used to control the flow of a process and it is represented in diamond shape. The [GatewayType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html#Syncfusion_Blazor_Diagram_BpmnGateway_GatewayType) property of the [BpmnGateway](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html) can be set with any of the appropriate gateways. By default, the value of [GatewayType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html#Syncfusion_Blazor_Diagram_BpmnGateway_GatewayType) is [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGatewayType.html#Syncfusion_Blazor_Diagram_BpmnGatewayType_None). The following code example explains how to create a BPMN Gateway. diff --git a/blazor/diagram/bpmn-shapes/bpmn-shapes.md b/blazor/diagram/bpmn-shapes/bpmn-shapes.md index a3822a3a2a..f6f76e8150 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-shapes.md +++ b/blazor/diagram/bpmn-shapes/bpmn-shapes.md @@ -1,13 +1,13 @@ --- layout: post -title: BPMN Shapes in Syncfusion Blazor Diagram Component | Syncfusion +title: BPMN Shapes in Blazor Diagram Component | Syncfusion description: Learn here all about how to create various BPMN Shapes in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Shapes in Blazor Diagram Component +# BPMN Shapes in Syncfusion Blazor Diagram Component BPMN (Business Process Model and Notation) shapes are used to represent the internal business procedure in a graphical notation and enable you to communicate the procedures in a standard manner. To create a BPMN shape, the node property [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shape.html) should be set as any one of the built-in shapes. diff --git a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md index eb366c5d49..80d695d8ba 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md +++ b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md @@ -1,13 +1,13 @@ --- layout: post -title: BPMN Text Annotation in Syncfusion Blazor Diagram Component | Syncfusion +title: BPMN Text Annotation in Blazor Diagram Component | Syncfusion description: Learn here all about how to create BPMN text annotation in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Text Annotation in Blazor Diagram Component +# BPMN Text Annotation in Syncfusion Blazor Diagram Component * A BPMN object can be associated with a text annotation that does not affect the flow but provides information about objects within a flow. From 2c330d5a62e2ce5f39e0c26b7ce129c84b1d06a8 Mon Sep 17 00:00:00 2001 From: Ramya Date: Wed, 24 Sep 2025 17:54:34 +0530 Subject: [PATCH 04/30] Revamping the Ug --- blazor/diagram/bpmn-shapes/bpmn-activity.md | 4 ++-- blazor/diagram/bpmn-shapes/bpmn-connectors.md | 4 ++-- blazor/diagram/bpmn-shapes/bpmn-data-object.md | 4 ++-- blazor/diagram/bpmn-shapes/bpmn-event.md | 4 ++-- blazor/diagram/bpmn-shapes/bpmn-gateway.md | 4 ++-- blazor/diagram/bpmn-shapes/bpmn-shapes.md | 4 ++-- blazor/diagram/bpmn-shapes/bpmn-text-annotation.md | 4 ++-- 7 files changed, 14 insertions(+), 14 deletions(-) diff --git a/blazor/diagram/bpmn-shapes/bpmn-activity.md b/blazor/diagram/bpmn-shapes/bpmn-activity.md index 067fca86d1..08f39aba5d 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-activity.md +++ b/blazor/diagram/bpmn-shapes/bpmn-activity.md @@ -1,13 +1,13 @@ --- layout: post -title: BPMN Activity in Blazor Diagram Component | Syncfusion +title: BPMN Activity in Syncfusion Blazor Diagram Component | Syncfusion description: Learn here all about BPMN activity such as task, sub-process in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Activity in Syncfusion Blazor Diagram Component +# BPMN Activity in Diagram Component The [Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html) is the task that is performed in a business process. It is represented by a rounded rectangle. diff --git a/blazor/diagram/bpmn-shapes/bpmn-connectors.md b/blazor/diagram/bpmn-shapes/bpmn-connectors.md index e09159db05..cd9cdbae9f 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-connectors.md +++ b/blazor/diagram/bpmn-shapes/bpmn-connectors.md @@ -1,13 +1,13 @@ --- layout: post -title: BPMN Connectors in Blazor Diagram Component | Syncfusion +title: BPMN Connectors in Syncfusion Blazor Diagram Component | Syncfusion description: Learn here all about BPMN Connectors such as association, sequence, message in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Connectors in Syncfusion Blazor Diagram Component +# BPMN Connectors in Diagram Component The `BPMN Connectors` are lines that connect BPMN flow objects. diff --git a/blazor/diagram/bpmn-shapes/bpmn-data-object.md b/blazor/diagram/bpmn-shapes/bpmn-data-object.md index 8505b38cc3..cff8637d18 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-data-object.md +++ b/blazor/diagram/bpmn-shapes/bpmn-data-object.md @@ -1,13 +1,13 @@ --- layout: post -title: BPMN Data Object in Blazor Diagram Component | Syncfusion +title: BPMN Data Object in Syncfusion Blazor Diagram Component | Syncfusion description: Learn here all about how to create BPMN data object in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Data Object in Syncfusion Blazor Diagram Component +# BPMN Data Object in Diagram Component A `BPMN Data Object` represents information flowing through the process, such as data placed into the process, data resulting from the process, data that needs to be collected, or data that must be stored. To define a [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html), the node property [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shape.html) should be set as [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html), and the [DataObjectType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html#Syncfusion_Blazor_Diagram_BpmnDataObject_DataObjectType) property defines whether data is an input or output. You can indicate the collection of data object by setting the [IsCollectiveData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html#Syncfusion_Blazor_Diagram_BpmnDataObject_IsCollectiveData) property of [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html) as **True.** diff --git a/blazor/diagram/bpmn-shapes/bpmn-event.md b/blazor/diagram/bpmn-shapes/bpmn-event.md index 282df8a245..65b065df03 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-event.md +++ b/blazor/diagram/bpmn-shapes/bpmn-event.md @@ -1,13 +1,13 @@ --- layout: post -title: BPMN Event in Blazor Diagram Component | Syncfusion +title: BPMN Event in Syncfusion Blazor Diagram Component | Syncfusion description: Learn here all about how to create the BPMN event and event trigger in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Event in Syncfusion Blazor Diagram Component +# BPMN Event in Diagram Component An [Event](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnEvent.html) is a common BPMN process model element that represents something that happens during a business process and is notated with a circle. The type of events are as follows: diff --git a/blazor/diagram/bpmn-shapes/bpmn-gateway.md b/blazor/diagram/bpmn-shapes/bpmn-gateway.md index ffeac5a3d9..e1c323193d 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-gateway.md +++ b/blazor/diagram/bpmn-shapes/bpmn-gateway.md @@ -1,13 +1,13 @@ --- layout: post -title: BPMN Gateway in Blazor Diagram Component | Syncfusion +title: BPMN Gateway in Syncfusion Blazor Diagram Component | Syncfusion description: Learn here all about how to create the BPMN gateway in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Gateway in Syncfusion Blazor Diagram Component +# BPMN Gateway in Diagram Component A `BPMN Gateway` is used to control the flow of a process and it is represented in diamond shape. The [GatewayType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html#Syncfusion_Blazor_Diagram_BpmnGateway_GatewayType) property of the [BpmnGateway](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html) can be set with any of the appropriate gateways. By default, the value of [GatewayType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html#Syncfusion_Blazor_Diagram_BpmnGateway_GatewayType) is [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGatewayType.html#Syncfusion_Blazor_Diagram_BpmnGatewayType_None). The following code example explains how to create a BPMN Gateway. diff --git a/blazor/diagram/bpmn-shapes/bpmn-shapes.md b/blazor/diagram/bpmn-shapes/bpmn-shapes.md index f6f76e8150..174758c767 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-shapes.md +++ b/blazor/diagram/bpmn-shapes/bpmn-shapes.md @@ -1,13 +1,13 @@ --- layout: post -title: BPMN Shapes in Blazor Diagram Component | Syncfusion +title: BPMN Shapes in Syncfusion Blazor Diagram Component | Syncfusion description: Learn here all about how to create various BPMN Shapes in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Shapes in Syncfusion Blazor Diagram Component +# BPMN Shapes in Diagram Component BPMN (Business Process Model and Notation) shapes are used to represent the internal business procedure in a graphical notation and enable you to communicate the procedures in a standard manner. To create a BPMN shape, the node property [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shape.html) should be set as any one of the built-in shapes. diff --git a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md index 80d695d8ba..65f4c994c5 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md +++ b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md @@ -1,13 +1,13 @@ --- layout: post -title: BPMN Text Annotation in Blazor Diagram Component | Syncfusion +title: BPMN Text Annotation in Syncfusion Blazor Diagram Component | Syncfusion description: Learn here all about how to create BPMN text annotation in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Text Annotation in Syncfusion Blazor Diagram Component +# BPMN Text Annotation in Diagram Component * A BPMN object can be associated with a text annotation that does not affect the flow but provides information about objects within a flow. From b0a9101c5f83d7ffaefa2f40f8c4b2c308768a44 Mon Sep 17 00:00:00 2001 From: Ramya Date: Wed, 24 Sep 2025 18:22:49 +0530 Subject: [PATCH 05/30] Revamping the Ug --- blazor/diagram/bpmn-shapes/bpmn-text-annotation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md index 65f4c994c5..456523b657 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md +++ b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md @@ -1,6 +1,6 @@ --- layout: post -title: BPMN Text Annotation in Syncfusion Blazor Diagram Component | Syncfusion +title: BPMN Text Annotation in Blazor Diagram Component | Syncfusion description: Learn here all about how to create BPMN text annotation in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component From f9333a0939f292181426a9d36e46937f25d58961 Mon Sep 17 00:00:00 2001 From: Ramya Date: Thu, 25 Sep 2025 09:44:11 +0530 Subject: [PATCH 06/30] Revamping the Ug --- blazor/diagram/bpmn-shapes/bpmn-text-annotation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md index 456523b657..65f4c994c5 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md +++ b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md @@ -1,6 +1,6 @@ --- layout: post -title: BPMN Text Annotation in Blazor Diagram Component | Syncfusion +title: BPMN Text Annotation in Syncfusion Blazor Diagram Component | Syncfusion description: Learn here all about how to create BPMN text annotation in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component From 542cbc0db8911da33e7e60ff57c9cda5d9349992 Mon Sep 17 00:00:00 2001 From: Ramya Date: Thu, 25 Sep 2025 10:06:47 +0530 Subject: [PATCH 07/30] Revamping the Ug using AI. --- blazor/diagram/bpmn-shapes/bpmn-text-annotation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md index 65f4c994c5..456523b657 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md +++ b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md @@ -1,6 +1,6 @@ --- layout: post -title: BPMN Text Annotation in Syncfusion Blazor Diagram Component | Syncfusion +title: BPMN Text Annotation in Blazor Diagram Component | Syncfusion description: Learn here all about how to create BPMN text annotation in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component From 8f3c424c501b7879ceb40141fb66e28426ea268f Mon Sep 17 00:00:00 2001 From: Ramya Date: Thu, 25 Sep 2025 10:12:51 +0530 Subject: [PATCH 08/30] Revamping the Ug using AI. --- blazor/diagram/bpmn-shapes/bpmn-text-annotation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md index 456523b657..387ac1e6bc 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md +++ b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md @@ -1,6 +1,6 @@ --- layout: post -title: BPMN Text Annotation in Blazor Diagram Component | Syncfusion +title: BPMN Text Annotation in Diagram | Syncfusion description: Learn here all about how to create BPMN text annotation in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component From d5177076686deeeaba7b8b846989c5fd0f0ebf9c Mon Sep 17 00:00:00 2001 From: Ramya Date: Mon, 6 Oct 2025 16:41:45 +0530 Subject: [PATCH 09/30] Revamping the Ug --- blazor/diagram/annotations/appearance.md | 22 ++++++++++++++++++ .../annotations/connector-annotation.md | 8 +++++++ blazor/diagram/annotations/events.md | 2 ++ blazor/diagram/annotations/labels.md | 8 +++++++ blazor/diagram/annotations/node-annotation.md | 7 ++++++ blazor/diagram/bpmn-shapes/bpmn-activity.md | 23 +++++++++++++++---- blazor/diagram/bpmn-shapes/bpmn-connectors.md | 6 +++++ .../diagram/bpmn-shapes/bpmn-data-object.md | 2 ++ blazor/diagram/bpmn-shapes/bpmn-data-store.md | 2 ++ blazor/diagram/bpmn-shapes/bpmn-event.md | 4 ++++ .../bpmn-shapes/bpmn-expanded-sub-process.md | 14 ++++++++++- blazor/diagram/bpmn-shapes/bpmn-gateway.md | 2 ++ blazor/diagram/bpmn-shapes/bpmn-shapes.md | 2 ++ .../bpmn-shapes/bpmn-text-annotation.md | 4 ++++ 14 files changed, 101 insertions(+), 5 deletions(-) diff --git a/blazor/diagram/annotations/appearance.md b/blazor/diagram/annotations/appearance.md index 5ed356a4ae..f34faeabe3 100644 --- a/blazor/diagram/annotations/appearance.md +++ b/blazor/diagram/annotations/appearance.md @@ -44,6 +44,8 @@ The annotation size can be customized using the `Height` and `Width` properties. } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXByCtXxVTAfPZsm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/SizeOfAnnotation) ![Changing Annotation Size in Blazor Diagram](../images/blazor-diagram-annotation-size.png) @@ -90,6 +92,8 @@ A [Hyperlink](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.An } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBIWtDRBTaSnpxq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/HyperlinktoAnnotation) ![Annotation with Hyperlink in Blazor Diagram](../images/blazor-diagram-annotation-with-hyperlink.png) @@ -137,6 +141,8 @@ The Content property of the Hyperlink can be set to display custom text for the } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLoMXNRrIZKmISV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/HyperlinkWithContent) ![HyperLink with Content in Blazor Diagram](../images/blazor-diagram-hyperlink-content.png) @@ -184,6 +190,8 @@ The [TextWrapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagr } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rthoiXDdVIsShZlW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/AnnotationWithTextWrapping) | TextWrapping | Description | Image | @@ -242,6 +250,8 @@ The following code sample demonstrates how the TextOverflow property works with } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVoCXtHLSBncEEM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/AnnotationWithTextOverflow) | TextOverflow | Wrapping | Image | @@ -316,6 +326,8 @@ The following code explains how to customize the visual appearance of an annotat } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBSMtXHByUvlGFt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/Appearance) ![Blazor Diagram Label with Custom Annotation](../images/blazor-diagram-label-with-custom-annotation.png) @@ -384,6 +396,8 @@ The font style of annotations can be changed dynamically at runtime by modifying } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLSMXXHLypEIAGt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/AnnotationStyleatRunTime) ## How to Edit Annotations at Runtime @@ -436,6 +450,8 @@ Annotations can be set to read-only mode by configuring their Constraints. Setti } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrIWjtxBeoSmkMG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/ReaonlyConstraints) ## How to Create Multiple Annotations @@ -517,6 +533,8 @@ Multiple annotations can be added to a single node or connector. The following c } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLoMZtHrSEKMWRQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/MultipleAnnotation) ![Blazor Diagram with Multiple Annotations](../images/blazor-diagram-multiple-annotations.png) @@ -640,6 +658,8 @@ The following code illustrates how to define a template for both a node's and a } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVoMDtHVnZBKrQG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/TemplateSupportforAnnotation) ![Blazor Diagram with Template Annotations](../images/TemplateSupportforAnnotation.png) @@ -688,6 +708,8 @@ The following code demonstrates how to set a value for the AdditionalInfo proper } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtreCDDHBnjOUXBB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AdditionalInfoProperty) **Note:** The AdditionalInfo property can accept any type of object as its value. diff --git a/blazor/diagram/annotations/connector-annotation.md b/blazor/diagram/annotations/connector-annotation.md index 82b83c5732..58c0c81082 100644 --- a/blazor/diagram/annotations/connector-annotation.md +++ b/blazor/diagram/annotations/connector-annotation.md @@ -68,6 +68,8 @@ The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Pat } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLSsDtHrxzCiyfQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfConnector/UpdateOffsetofAnnotation) The following image shows the relationship between the annotation position and offset (fraction values). @@ -121,6 +123,8 @@ The [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram. } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZLIWNNdhRHwmmwP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfConnector/AlignmentOfAnnotation) The following screenshot shows how the annotation of the connector aligned over its path. @@ -171,6 +175,8 @@ The [Displacement](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagr } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhSiDjdhHmyHgYP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfConnector/DisplacementOfAnnotation) ## How to Update Annotation Segment Angle @@ -213,6 +219,8 @@ The following code example shows how the connector annotation rotated in its pat } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLIWtDnBRPnqaBj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfConnector/SegmentAngleOfAnnotation) | SegmentAngle | Output | diff --git a/blazor/diagram/annotations/events.md b/blazor/diagram/annotations/events.md index 9d31839410..a4a6bd9347 100644 --- a/blazor/diagram/annotations/events.md +++ b/blazor/diagram/annotations/events.md @@ -61,6 +61,8 @@ The following code example shows how to register and get notifications from the } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVoijjnBnkUtSTH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Events/TextChangedEvent) ## See also diff --git a/blazor/diagram/annotations/labels.md b/blazor/diagram/annotations/labels.md index 8f92d36736..e34685446f 100644 --- a/blazor/diagram/annotations/labels.md +++ b/blazor/diagram/annotations/labels.md @@ -69,6 +69,8 @@ The following code example demonstrates how to create an annotation for a node a } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjroijNRrQAsIOIt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/CreateAnnotation/CreateAnnotation) ![Blazor Diagram Node with Annotation](../images/blazor-diagram-node-with-annotation.png) @@ -122,6 +124,8 @@ The following code explains how to add an annotation to a node at runtime by usi } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLIMjtxrwUyoCqW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AddAnnotationAtRunTime) Also, the annotations can be added at runtime by using the [AddAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramObjectCollection-1.html#Syncfusion_Blazor_Diagram_DiagramObjectCollection_1_AddAsync__0_) method. The `await` operator suspends the evaluation of the enclosing async method until the asynchronous operation represented by its operand completes. @@ -186,6 +190,8 @@ An annotation can be removed from a node or connector's Annotations collection b } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjByiXZHBwzKleyR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/RemoveAnnotation/RemoveAnnotation) Also, The `Remove` method can also be used to remove a specific annotation object. @@ -250,6 +256,8 @@ The following code sample shows how to change the content of a node's annotation } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBIitZxBcSXRxWo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/UpdateAnnotation/UpdateAnnotation) ## See also diff --git a/blazor/diagram/annotations/node-annotation.md b/blazor/diagram/annotations/node-annotation.md index 6a89005441..7c5151434a 100644 --- a/blazor/diagram/annotations/node-annotation.md +++ b/blazor/diagram/annotations/node-annotation.md @@ -58,6 +58,8 @@ The following code demonstrates how to set an annotation's `Offset`. } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBeiZDnBmmdikgL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfNode/OffsetofAnnotation) @@ -135,6 +137,8 @@ The following code demonstrates how to align an annotation. } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDByMjDHhGlBwFTP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfNode/AlignmentOfAnnotation) @@ -184,6 +188,8 @@ The [Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Ann } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhoWjDnBcbmFJCD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfNode/MarginOfAnnotation) @@ -229,6 +235,7 @@ The [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram. } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDhSWDjdVvthJdOl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfNode/AlignText) diff --git a/blazor/diagram/bpmn-shapes/bpmn-activity.md b/blazor/diagram/bpmn-shapes/bpmn-activity.md index 08f39aba5d..ab5609bdf3 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-activity.md +++ b/blazor/diagram/bpmn-shapes/bpmn-activity.md @@ -52,6 +52,8 @@ You can specify the any one of the above activity type using the [ActivityType]( } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrIsXNHrvVrSjlR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/BpmnActivity) ![Send Task BPMN Shape](../images/Task.png) @@ -71,11 +73,11 @@ The following code explains how to create different types of BPMN tasks. @code { // Initialize the node collection with node. - DiagramObjectCollection nodes; + DiagramObjectCollection nodes = new DiagramObjectCollection(); protected override void OnInitialized() { - nodes = new DiagramObjectCollection(); + Node node = new Node() { // Position of the node. OffsetX = 100, @@ -97,6 +99,8 @@ The following code explains how to create different types of BPMN tasks. } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLeCtDxBvEwTETe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/BpmnActivityTask) @@ -154,6 +158,8 @@ A [Collapsed Sub-Process](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhoCNjHLuiTiOoy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/BpmnActivityCollapsedSubProcess) @@ -200,6 +206,8 @@ You can define the `Loop` property in BPMN Activity, as shown in the following c } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXhSCZDxBkiYnGrJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/Loop) @@ -250,10 +258,12 @@ The available loop types are described below. IsCompensation = true, } }; - nodes.Add(node1); + nodes.Add(node); } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLoWZtRLYBpywwx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/Compensation) @@ -302,6 +312,8 @@ N>* By default, the [IsCall](https://help.syncfusion.com/cr/blazor/Syncfusion.Bl } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDByWDNnVYBkymiU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/Call) @@ -349,8 +361,9 @@ N>* By default, the [IsAdhoc](https://help.syncfusion.com/cr/blazor/Syncfusion.B } } ``` -A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/Adhoc) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrosNXRhkKyQthF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/Adhoc) ![IsAdHocActivity CollapsedSub-Process BPMN Shape](../images/Bpmn-CollapsedSub-Process-AdHocpng.png) @@ -393,6 +406,8 @@ The `SubProcessType` property represents the type of task being processed within } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjhSCZXxLkpZmobl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/SubProcessType) ![Event Boundary BPMN Shape](../images/Bpmn-CollapsedSub-Process-Event.png) diff --git a/blazor/diagram/bpmn-shapes/bpmn-connectors.md b/blazor/diagram/bpmn-shapes/bpmn-connectors.md index cd9cdbae9f..57cfe83f18 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-connectors.md +++ b/blazor/diagram/bpmn-shapes/bpmn-connectors.md @@ -60,6 +60,8 @@ The following code example explains how to create an association. } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBeitNHVuzaWWAu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnConnectors/Association) ![Default BPMN FlowShapes](../images/Bpmn-AssociationFlow.png) @@ -115,6 +117,8 @@ The following code example explains how to create a sequence flow. } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXVIsDjHBuSBuntI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnConnectors/Sequence) ![Normal Sequence BPMN Shape](../images/Bpmn-SequenceFlow.png) @@ -172,6 +176,8 @@ The following code example explains how to define a message flow. } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtVSittnhOeEgbiL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnConnectors/Message) ![Default Message BPMN Shape](../images/Bpmn-MessageFlow.png) diff --git a/blazor/diagram/bpmn-shapes/bpmn-data-object.md b/blazor/diagram/bpmn-shapes/bpmn-data-object.md index cff8637d18..c4ef6c2c6e 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-data-object.md +++ b/blazor/diagram/bpmn-shapes/bpmn-data-object.md @@ -46,6 +46,8 @@ A `BPMN Data Object` represents information flowing through the process, such as } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBeiXjxVORwXwCi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnDataObject/BpmnDataObject) ![ Data BPMN Shape](../images/Bpmn-DataObject-Collective-None.png) diff --git a/blazor/diagram/bpmn-shapes/bpmn-data-store.md b/blazor/diagram/bpmn-shapes/bpmn-data-store.md index ac992e958e..a63567cb55 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-data-store.md +++ b/blazor/diagram/bpmn-shapes/bpmn-data-store.md @@ -42,6 +42,8 @@ A DataStore is used to store or access data associated with a business process. } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNryCNtxhaGiAiQN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnDataStore/BpmnDataStore) ![BPMN Datasource](../images/Bpmn-DataStore.png) diff --git a/blazor/diagram/bpmn-shapes/bpmn-event.md b/blazor/diagram/bpmn-shapes/bpmn-event.md index 65b065df03..6dfa0d17ef 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-event.md +++ b/blazor/diagram/bpmn-shapes/bpmn-event.md @@ -52,6 +52,8 @@ The [EventType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram. } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLoWZZdracaAiTe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnEvent/BpmnEventType) ![None Trigger End event event BPMNShape](../images/Bpmn-Event-End.png) @@ -97,6 +99,8 @@ Event triggers are notated as icons inside the circle and they represent the spe } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtresttdBOFpnepH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnEvent/BpmnEventType) ![Message Trigger Start Event BPMN Shape](../images/Bpmn-Event-Message-Start.png) diff --git a/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md b/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md index e86a9011c9..9b76b67a25 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md +++ b/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md @@ -47,6 +47,8 @@ The following code example explains how to create a BPMN Expanded Sub-Process. } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDLIiXXdLYuCAIfE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/BpmnExpandedSubProcess) ![BPMN Expanded Sub-Process shape in Blazor Diagram.](../images/Bpmn-ExpandedSubProcess.png) @@ -98,6 +100,8 @@ The following code example explains how to add a BPMN node to an BPMN Expanded S } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjBoitNxAtXgsIWc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/AddChildren) @@ -154,6 +158,8 @@ The following image shows how to add BPMN node into the BPMN ExpandedSubProcess } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLSCXtnAjCCJzPT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessLoop) ![Standard ExpandedSubProcess BPMN Shape](../images/Bpmn-Task-Loop-Standard.png) @@ -202,10 +208,12 @@ The following table describes the available loop types for an Expanded Sub-Proce IsCompensation = true, } }; - nodes.Add(node1); + nodes.Add(node); } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBystZxqXilLbOk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessCompensation) @@ -249,6 +257,8 @@ An `Ad-Hoc` Expanded Sub-Process is a group of tasks that are executed in any or } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXBSsXjnKTCBmLLc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessAdhoc) @@ -292,6 +302,8 @@ The `SubProcessType` represents the type of task being processed within a BPMN e } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/htVoCZjRAziQIRel?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessType) ![Event Boundary BPMN Shape](../images/Bpmn-ExpandedSub-Process-Event.png) diff --git a/blazor/diagram/bpmn-shapes/bpmn-gateway.md b/blazor/diagram/bpmn-shapes/bpmn-gateway.md index e1c323193d..1dd2cb098d 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-gateway.md +++ b/blazor/diagram/bpmn-shapes/bpmn-gateway.md @@ -45,6 +45,8 @@ A `BPMN Gateway` is used to control the flow of a process and it is represented } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjrIWZtdKJhVMLXv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnGateway/BpmnGateway) diff --git a/blazor/diagram/bpmn-shapes/bpmn-shapes.md b/blazor/diagram/bpmn-shapes/bpmn-shapes.md index 174758c767..bcfb0455f4 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-shapes.md +++ b/blazor/diagram/bpmn-shapes/bpmn-shapes.md @@ -47,6 +47,8 @@ The following code example demonstrates how to create a simple BPMN Task shape. } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLIMZDRqphwEgmr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnShape/BpmnShape) diff --git a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md index 387ac1e6bc..d065f592da 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md +++ b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md @@ -68,6 +68,8 @@ documentation: ug } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDrIsXNxgTgIKWVj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnTextAnnotation/BpmnTextAnnotation) ![Auto BPMN Shape](../images/Bpmn-TextAnnotation-Auto.png) @@ -134,6 +136,8 @@ The following code example represents how to create a TextAnnotation and connect } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNrIWNXnKpTiBXyn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnTextAnnotation/TextAnnotationTarget) ![Auto BPMN Shape](../images/bpmn-text-annotation_WithTarget.png) From d1f4524b4f3a73e9f9a9fe214e237bc07cca111c Mon Sep 17 00:00:00 2001 From: Ramya Date: Mon, 6 Oct 2025 18:06:17 +0530 Subject: [PATCH 10/30] Revamping the Ug --- blazor/diagram/annotations/interactions.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/blazor/diagram/annotations/interactions.md b/blazor/diagram/annotations/interactions.md index 20bd0ad901..1e6771aab9 100644 --- a/blazor/diagram/annotations/interactions.md +++ b/blazor/diagram/annotations/interactions.md @@ -67,7 +67,7 @@ The [RotationReference](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. } } ``` - +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVesNXxpShYJhRa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} Value | Description | Image | | -------- | -------- | -------- | @@ -112,6 +112,8 @@ The following code examples illustrate how to configure `RotationAngle` for an a } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLIiZDRTogIAqku?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/RotationAngleProperty) ![Annotation Rotation in Blazor Diagram](../images/RotationAngleAnnotation.png) From 660d569afb9bb03908dbec39cbf00467bceddb6c Mon Sep 17 00:00:00 2001 From: Ramya Date: Wed, 8 Oct 2025 15:38:18 +0530 Subject: [PATCH 11/30] Revamping the Ug --- blazor/diagram/bpmn-shapes/bpmn-activity.md | 2 +- blazor/diagram/bpmn-shapes/bpmn-text-annotation.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/blazor/diagram/bpmn-shapes/bpmn-activity.md b/blazor/diagram/bpmn-shapes/bpmn-activity.md index ab5609bdf3..9a88ccb3dc 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-activity.md +++ b/blazor/diagram/bpmn-shapes/bpmn-activity.md @@ -314,7 +314,7 @@ N>* By default, the [IsCall](https://help.syncfusion.com/cr/blazor/Syncfusion.Bl ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/rDByWDNnVYBkymiU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/Call) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/Call) ![IsAdHocActivity CollapsedSub-Process BPMN Shape](../images/Bpmn-Task-Call.png) diff --git a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md index d065f592da..98411851e3 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md +++ b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md @@ -138,7 +138,7 @@ The following code example represents how to create a TextAnnotation and connect ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/VNrIWNXnKpTiBXyn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnTextAnnotation/TextAnnotationTarget) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnTextAnnotation/TextAnnotationTarget) ![Auto BPMN Shape](../images/bpmn-text-annotation_WithTarget.png) From d6d1c2a178b989fd8c52df17ac0ac31fe6335bd9 Mon Sep 17 00:00:00 2001 From: Ashwini-SF5049 Date: Thu, 9 Oct 2025 16:10:14 +0530 Subject: [PATCH 12/30] 983104: Updated the UG Documentation for the Toast and TextBox --- blazor/textarea/events.md | 17 +++---- blazor/textarea/floating-label.md | 10 ++-- blazor/textarea/form-support.md | 8 ++- blazor/textarea/getting-started-webapp.md | 50 +++++++++---------- blazor/textarea/getting-started.md | 31 ++++++------ blazor/textarea/max-length.md | 9 ++-- blazor/textarea/methods.md | 16 +++--- blazor/textarea/resize.md | 20 ++++---- blazor/textarea/rows-columns.md | 8 ++- blazor/textarea/styles-appearance.md | 24 ++++----- blazor/toast/accessibility.md | 16 +++--- blazor/toast/action-buttons.md | 4 +- blazor/toast/animation.md | 4 +- blazor/toast/config.md | 25 +++++----- blazor/toast/events.md | 12 ++--- blazor/toast/getting-started-webapp.md | 50 +++++++++---------- blazor/toast/getting-started.md | 34 ++++++------- blazor/toast/how-to/access-specific-toast.md | 4 +- blazor/toast/how-to/add-dynamic-template.md | 2 +- .../change-toast-content-dynamically.md | 2 +- .../how-to/close-the-toast-with-click-tap.md | 4 +- .../prevent-toast-close-with-mobile-swipe.md | 4 +- .../how-to/show-different-types-of-toast.md | 12 +++-- ...ow-multiple-toasts-in-various-positions.md | 2 +- blazor/toast/position.md | 12 ++--- blazor/toast/style.md | 10 ++-- blazor/toast/template.md | 6 +-- blazor/toast/timeout.md | 11 ++-- 28 files changed, 198 insertions(+), 209 deletions(-) diff --git a/blazor/textarea/events.md b/blazor/textarea/events.md index 22b7166517..7a14f5f0c0 100644 --- a/blazor/textarea/events.md +++ b/blazor/textarea/events.md @@ -3,17 +3,17 @@ layout: post title: Events in Blazor TextArea Component | Syncfusion description: Handling events triggered by user interactions or changes of the Syncfusion Blazor Textarea component and much more. platform: Blazor -control: Textarea +control: TextArea documentation: ug --- # Events in Blazor TextArea Component -This section describes the TextArea events that will be triggered when appropriate actions are performed. The following events are available in the TextArea component. +This topic explains the TextArea events that are raised during user interaction and component lifecycle. The following events are available: Created, Input, ValueChange, Focus, Blur, and Destroyed. ## Created event -The TextArea component triggers the [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_Created) event when the TextArea component is created. This event provides users with an opportunity to perform actions immediately after the TextArea has been created and initialized. +The TextArea component triggers the [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_Created) event after the component is created and initialized. Use this event to perform one-time initialization or configuration logic. ```cshtml @using Syncfusion.Blazor.Inputs @@ -48,8 +48,7 @@ The [TextAreaInputEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Bl ## ValueChange event -The TextArea component triggers the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_ValueChange) event when the content of TextArea has changed and gets focus-out. This event provides users with an opportunity to execute specific actions in response to changes made by the user. -The [TextAreaValueChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.TextAreaValueChangeEventArgs.html) passed as an event argument provides the details about the changes in the TextArea's value. +The TextArea component triggers the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_ValueChange) event when the content changes and the component loses focus (blur). Use this event to react to committed value changes. The [TextAreaValueChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.TextAreaValueChangeEventArgs.html) argument provides details about the value change. ```cshtml @using Syncfusion.Blazor.Inputs @@ -65,8 +64,7 @@ The [TextAreaValueChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfus ## Focus event -The TextArea component triggers the [Focus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_Focus ) when the TextArea gains focus. This event allows developers to execute specific actions when the user interacts with the TextArea by focusing on it. -The [TextAreaFocusInEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.TextAreaFocusInEventArgs.html) passed as an argument provides details about the focus event in the TextArea. +The TextArea component triggers the [Focus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_Focus) event when the TextArea gains focus. Use this event to run logic when the user focuses the component. The [TextAreaFocusInEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.TextAreaFocusInEventArgs.html) argument provides details about the focus event. ```cshtml @using Syncfusion.Blazor.Inputs @@ -83,8 +81,7 @@ The [TextAreaFocusInEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion. ## Blur event -The TextArea component triggers the [Blur](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_Blur) when the TextArea loses focus. This event allows users to execute specific actions when the user interacts with the TextArea by moving focus away from it. -The [TextAreaFocusOutEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.TextAreaFocusOutEventArgs.html) passed as an argument provides details about the blur event in the TextArea. +The TextArea component triggers the [Blur](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_Blur) event when the TextArea loses focus. Use this event to handle actions when focus moves away from the component. The [TextAreaFocusOutEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextAreaFocusOutEventArgs.html) argument provides details about the blur event. ```cshtml @using Syncfusion.Blazor.Inputs @@ -101,7 +98,7 @@ The [TextAreaFocusOutEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion ## Destroyed event -The TextArea component triggers the [Destroyed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_Destroyed) when the TextArea component is destroyed. +The TextArea component triggers the [Destroyed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_Destroyed) event when the component is disposed. Use this lifecycle event to release resources or perform cleanup. ```cshtml @using Syncfusion.Blazor.Inputs diff --git a/blazor/textarea/floating-label.md b/blazor/textarea/floating-label.md index c243654704..b719b3f5e6 100644 --- a/blazor/textarea/floating-label.md +++ b/blazor/textarea/floating-label.md @@ -3,18 +3,20 @@ layout: post title: Floating Label in Blazor TextArea Component | Syncfusion description: Checkout and learn about the Floating Label of the Syncfusion Blazor Textarea component and much more. platform: Blazor -control: Textarea +control: TextArea documentation: ug --- # Floating Label in Blazor TextArea Component -The floating label functionality in the TextArea Component allows the placeholder text to float above the TextArea while the user interacts with it, providing a more intuitive user experience. This feature can be achieved using the [FloatLabelType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_FloatLabelType) API, which offers various options for defining the floating behavior: +The floating label functionality in the TextArea component displays the placeholder as a floating label above the TextArea while the user interacts with it, improving readability and conserving space in forms. Use the [FloatLabelType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_FloatLabelType) property to control this behavior. By default, the floating label is disabled (Never). + +The options below describe when the label floats and typical usage patterns: | Type | Description | | -- | -- | -| Auto | The label floats above the TextArea when it receives focus or input, returning to its initial position when the TextArea loses focus and contains no value. | -| Always | The label always remains floating above the TextArea, regardless of user interaction. | +| Auto | The label floats above the TextArea when it receives focus or input. If a value is present, the label remains floated after blur; if empty, it returns to its initial position. | +| Always | The label always remains floating above the TextArea, regardless of user interaction or value. | | Never | The label never floats; it remains in its default position within the TextArea. | {% tabs %} diff --git a/blazor/textarea/form-support.md b/blazor/textarea/form-support.md index 664988d103..f5c20b68da 100644 --- a/blazor/textarea/form-support.md +++ b/blazor/textarea/form-support.md @@ -3,15 +3,13 @@ layout: post title: Form Support in Blazor TextArea Component | Syncfusion description: Checkout and learn about the Form support of the Syncfusion Blazor Textarea component and much more. platform: Blazor -control: Textarea +control: TextArea documentation: ug --- # Form Support in Blazor TextArea Component -The TextArea component seamlessly integrates with HTML forms, enabling efficient submission of longer text data. By including TextArea inputs within HTML forms, users can conveniently input multiline text content and submit it as part of form submissions. - -This integration enhances the usability of forms, allowing users to provide detailed feedback, enter lengthy descriptions, or input other multiline text data seamlessly. Please find the demo link [here](https://blazor.syncfusion.com/demos/textarea/formsvalidation?theme=fluent). +The TextArea component integrates with HTML forms and Blazor’s EditForm to capture and submit multiline text efficiently. Typical scenarios include collecting detailed feedback, descriptions, and other long-form inputs as part of a form submission. See the TextArea forms and validation demo for a working example: TextArea forms and validation demo. {% tabs %} {% highlight razor %} @@ -51,4 +49,4 @@ This integration enhances the usability of forms, allowing users to provide deta TextArea component seamlessly integrates with the `FormValidator` component, allowing users to incorporate textarea inputs into form validation processes efficiently. -By integrating TextArea component with the `FormValidator` component, users can enforce validation rules specific to text inputs, such as required fields, minimum and maximum length constraints, pattern matching, and more. This ensures that user-submitted text data meets specified criteria and maintains data integrity. +By integrating The TextArea component with the `FormValidator` component, users can enforce validation rules specific to text inputs, such as required fields, minimum and maximum length constraints, pattern matching, and more. This ensures that user-submitted text data meets specified criteria and maintains data integrity. diff --git a/blazor/textarea/getting-started-webapp.md b/blazor/textarea/getting-started-webapp.md index 98ec8f8227..ebe5fc54fd 100644 --- a/blazor/textarea/getting-started-webapp.md +++ b/blazor/textarea/getting-started-webapp.md @@ -9,9 +9,9 @@ documentation: ug # Getting Started with Blazor TextArea in Blazor Web App -This section briefly explains about how to include [Blazor TextArea](https://www.syncfusion.com/blazor-components/blazor-TextArea) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section explains how to include the [Blazor TextArea](https://www.syncfusion.com/blazor-components/blazor-textarea) component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. -To get started quickly with Blazor TextArea component, check on the following video: +To get started quickly with the Blazor TextArea component, watch the following video: {% youtube "youtube:https://www.youtube.com/watch?v=4qrr0FXvzMA" %} @@ -26,17 +26,17 @@ To get started quickly with Blazor TextArea component, check on the following vi ## Create a new Blazor Web App in Visual Studio -You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application. +Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) when creating the Blazor Web App. ## Install Syncfusion® Blazor Inputs and Themes NuGet in the App -To add **Blazor TextArea** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor TextArea** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly` or `Auto` render mode, install the Syncfusion® Blazor component NuGet packages in the client project. -Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, you can use the following Package Manager commands: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -47,7 +47,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on nuget.org. Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. {% endtabcontent %} @@ -59,11 +59,11 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor Web App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application. +Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) when creating the Blazor Web App. -For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. +For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands: {% tabs %} {% highlight c# tabtitle="Blazor Web App" %} @@ -75,11 +75,11 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). +N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this guide: Getting started with Blazor Web App - render interactive modes. ## Install Syncfusion® Blazor Inputs and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly` or `Auto` render mode, install the Syncfusion® Blazor component NuGet packages in the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure you’re in the project root directory where your `.csproj` file is located. @@ -97,7 +97,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on nuget.org. Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. {% endtabcontent %} @@ -107,10 +107,10 @@ N> Syncfusion® Blazor components are availa | Interactive Render Mode | Description | | -- | -- | -| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| -| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| +| WebAssembly or Auto | Open **~/_Imports.razor** from the client project. | +| Server | Open **~/_Imports.razor** in the `Components` folder. | -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace. +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -121,9 +121,9 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace. {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. +Now, register the Syncfusion® Blazor service in the **~/Program.cs** file of your Blazor Web App. -If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. +If the interactive render mode is `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in both **~/Program.cs** files (Server and Client) of your Blazor Web App. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -157,7 +157,7 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion® Blazor Service only in that **~/Program.cs** file. +If the interactive render mode is `Server`, the project contains a single **~/Program.cs** file. In this case, register the Syncfusion® Blazor service only in that file. {% tabs %} {% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} @@ -180,7 +180,7 @@ var app = builder.Build(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: +Theme stylesheets and scripts are provided via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: ```html @@ -194,11 +194,11 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> Learn more in the [Blazor themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic, which covers [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator). For script references, see [Adding script reference](https://blazor.syncfusion.com/documentation/common/adding-script-references). ## Add Syncfusion® Blazor TextArea component -Add the Syncfusion® Blazor TextArea component in the **~Pages/.razor** file. If an interactivity location as `Per page/component` in the web app, define a render mode at the top of the `~Pages/.razor` component, as follows: +Add the Syncfusion® Blazor TextArea component in the **~Pages/.razor** file. If the interactivity location is `Per page/component`, define a render mode at the top of the `~Pages/.razor` component as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | @@ -207,7 +207,7 @@ Add the Syncfusion® Blazor TextArea compone | | Server | @rendermode InteractiveServer | | | None | --- | -N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default. +N> If the **Interactivity location** is set to `Global` and the **Render mode** is `Auto`, `WebAssembly`, or `Server`, the render mode is configured in the `App.razor` file by default. {% tabs %} {% highlight razor %} @@ -230,7 +230,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i ## Floating label -The floating label TextArea floats the label above the TextArea after focusing, or filled with value in the TextArea. The floating label TextArea can be created by using the [FloatLabelType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_FloatLabelType) API. +The floating label displays the placeholder as a label above the TextArea when focused or when a value is present. Configure this behavior using the [FloatLabelType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_FloatLabelType) property. {% tabs %} {% highlight razor %} diff --git a/blazor/textarea/getting-started.md b/blazor/textarea/getting-started.md index 3adf754947..dce202422b 100644 --- a/blazor/textarea/getting-started.md +++ b/blazor/textarea/getting-started.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor TextArea Component -This section briefly explains about how to include [Blazor TextArea](https://www.syncfusion.com/blazor-components/blazor-textarea) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This section explains how to add the [Blazor TextArea](https://www.syncfusion.com/blazor-components/blazor-textarea) component to a Blazor WebAssembly app using Visual Studio or Visual Studio Code. {% tabcontents %} @@ -21,11 +21,11 @@ This section briefly explains about how to include [Blazor TextArea](https://www ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion® Blazor extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ## Install Syncfusion® Blazor Inputs and Themes NuGet in the App -To add **Blazor TextArea** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor TextArea** component, open NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the following Package Manager commands: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -36,7 +36,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. {% endtabcontent %} @@ -48,9 +48,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application using the following commands in the integrated terminal (Ctrl+`). {% tabs %} @@ -66,8 +66,8 @@ cd BlazorApp ## Install Syncfusion® Blazor Inputs and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure you are in the project root directory where the `.csproj` file is located. +* Run the following commands to install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) and restore dependencies. {% tabs %} @@ -81,7 +81,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. {% endtabcontent %} @@ -89,7 +89,7 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace. +Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -100,7 +100,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +Now, register the Syncfusion® Blazor service in the **~/Program.cs** file of your Blazor WebAssembly app. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -122,9 +122,10 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} + ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. +The theme stylesheet and script are available through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Add the stylesheet and script references to the `` section of the **~/index.html** file. ```html @@ -133,7 +134,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> For additional options, see [Blazor themes](https://blazor.syncfusion.com/documentation/appearance/themes), which covers [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator). For script references, see [Adding script reference](https://blazor.syncfusion.com/documentation/common/adding-script-references). ## Add Blazor TextArea component @@ -151,7 +152,7 @@ Add the Syncfusion® Blazor TextArea compone ## Floating label -The floating label TextArea floats the label above the TextArea after focusing, or filled with value in the TextArea. The floating label TextArea can be created by using the [FloatLabelType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_FloatLabelType) API. +The floating label displays the placeholder as a label above the TextArea when focused or when a value is present. Configure this behavior using the [FloatLabelType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_FloatLabelType) property. {% tabs %} {% highlight razor %} @@ -167,4 +168,4 @@ The floating label TextArea floats the label above the TextArea after focusing, * [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](../getting-started/blazor-webassembly-dotnet-cli) * [Getting Started with Syncfusion® Blazor for Server-side in Visual Studio](../getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](../getting-started/blazor-server-side-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](../getting-started/blazor-server-side-dotnet-cli) \ No newline at end of file diff --git a/blazor/textarea/max-length.md b/blazor/textarea/max-length.md index 4ab8e8deec..306a55cad0 100644 --- a/blazor/textarea/max-length.md +++ b/blazor/textarea/max-length.md @@ -3,16 +3,13 @@ layout: post title: Maximum Length in Blazor TextArea Component | Syncfusion description: Limiting the maximum number of characters of the Syncfusion Blazor Textarea component and much more. platform: Blazor -control: Textarea +control: TextArea documentation: ug --- # Maximum Length in Blazor TextArea Component -You can enforce a maximum length limit for the text input in the TextArea using the [MaxLength](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_MaxLength) property. This property allows to define the maximum number of characters that users can input into the TextArea. - - -* By setting the `MaxLength` property, you can control the length of text input, preventing users from exceeding a specified character limit. +Use the [MaxLength](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_MaxLength) property to enforce a maximum character limit in the TextArea. This property defines the highest number of characters that can be entered, helping guide input length and maintain data quality. {% tabs %} {% highlight razor %} @@ -22,6 +19,6 @@ You can enforce a maximum length limit for the text input in the TextArea using {% endhighlight %} {% endtabs %} -When the user reaches the specified limit, the TextArea prevents further input, ensuring compliance with the defined character limit. This feature helps maintain data integrity and provides users with clear feedback on the allowed input length. +When the specified limit is reached, the TextArea prevents further input from typing or pasting. Newline characters count toward the limit. For data integrity, also validate on the server or with model attributes (for example, MaxLength or StringLength). The Input event fires as the user types until the limit is reached, and ValueChange occurs on blur when the value is committed. {% previewsample "https://blazorplayground.syncfusion.com/embed/rthpDRsUCffyeOfE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TextArea with MaxLength](./images/blazor-textarea-maxlength.png)" %} \ No newline at end of file diff --git a/blazor/textarea/methods.md b/blazor/textarea/methods.md index 9b3362b36c..0258749746 100644 --- a/blazor/textarea/methods.md +++ b/blazor/textarea/methods.md @@ -3,19 +3,19 @@ layout: post title: Methods in Blazor TextArea Component | Syncfusion description: Checkout and learn about the list of all available methods in the Syncfusion Blazor TextArea component. platform: Blazor -control: Textarea +control: TextArea documentation: ug --- # Methods in Blazor TextArea Component -This section outlines the methods available for interacting with the TextArea component. +This section describes the methods available for interacting with the TextArea component. ## FocusAsync method -The [FocusAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_FocusAsync) method in the TextArea, is used to set focus to the textarea element, enabling user interaction. +The [FocusAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_FocusAsync) method programmatically moves focus to the TextArea element to enable user input. This asynchronous method should be awaited when used in an async context. -By calling the `FocusAsync` method, you can programmatically set focus to the TextArea component, allowing users to interact with it via keyboard input or other means. +By calling the `FocusAsync` method, focus is set to the TextArea so the user can immediately interact with it using the keyboard or other input methods. Ensure the component reference is available (after initial render) before invoking this method. ```cshtml @using Syncfusion.Blazor.Inputs @@ -36,8 +36,8 @@ By calling the `FocusAsync` method, you can programmatically set focus to the Te ## FocusOutAsync method -The [FocusOutAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_FocusOutAsync) method in the TextArea component is used to remove focus from the textarea element, ending user interaction. -This method is beneficial for scenarios where user need to programmatically remove focus from the TextArea component, such as after completing a specific task or when navigating to another element in the application. +The [FocusOutAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_FocusOutAsync) method programmatically removes focus from the TextArea element, ending direct user interaction. This asynchronous method should be awaited when used in an async context. +This method is useful when focus needs to move away after completing a task or to shift attention to another element in the application. ```cshtml @using Syncfusion.Blazor.Inputs @@ -58,8 +58,8 @@ This method is beneficial for scenarios where user need to programmatically remo ## GetPersistDataAsync method -The [GetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_GetPersistDataAsync) method in the TextArea component retrieves the properties that need to be maintained in the persisted state. -This method returns an object containing the properties to be persisted, which can include various configuration options and state information of the TextArea component. +The [GetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_GetPersistDataAsync) method retrieves the component state that should be maintained for persistence. It returns a serialized representation (typically a JSON string) of the properties to persist. +Use this method to capture configuration and state for storage and later restoration, such as saving user settings between sessions. As an asynchronous method, it should be awaited when called in an async context. ```cshtml @using Syncfusion.Blazor.Inputs diff --git a/blazor/textarea/resize.md b/blazor/textarea/resize.md index 698cc1024a..cb3efb3896 100644 --- a/blazor/textarea/resize.md +++ b/blazor/textarea/resize.md @@ -3,20 +3,22 @@ layout: post title: Resize in Blazor TextArea Component | Syncfusion description: Check out and learn about the Resize feature of the Syncfusion Blazor TextArea component and explore much more functionality. platform: Blazor -control: Textarea +control: TextArea documentation: ug --- # Resize in Blazor TextArea Component -The TextArea allows users to input and edit large amounts of text. Resizing this component effectively can enhance the user experience and accommodate varying content needs. This resizing behavior can be enabled and configured using the [ResizeMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_ResizeMode) API, which offers several options for resizing the TextArea: +The TextArea allows users to input and edit large amounts of text. Resizing can improve usability by accommodating varying content lengths. Configure resizing behavior using the [ResizeMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_ResizeMode) property, which provides these options: | Type | Description | | -- | -- | -| Vertical | Allows users to adjust the height of the TextArea vertically. It is suitable when users want to resize the TextArea only along the vertical axis, accommodating varying amounts of text input. | -| Horizontal | Users can adjust the width of the TextArea horizontally. This option is helpful for accommodating longer lines of text without altering the height of the control. | -| Both | Allows users to adjust both the height and width of the TextArea, offering maximum flexibility in resizing. It is ideal for situations where users need precise control over the dimensions of the TextArea. | -| None | Disables the resizing in the TextArea. This option is ideal for situations where maintaining a consistent layout is critical, and resizing by users is unnecessary. | +| Vertical | Enables vertical resizing to adjust the height of the TextArea. | +| Horizontal | Enables horizontal resizing to adjust the width of the TextArea. | +| Both | Enables both vertical and horizontal resizing for maximum flexibility. | +| None | Disables resizing and hides the resize handle to maintain a fixed layout. | + +N> In Razor, enums are typically referenced with the @ prefix (for example, @Resize.Both). {% tabs %} {% highlight razor %} @@ -26,11 +28,11 @@ The TextArea allows users to input and edit large amounts of text. Resizing this {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXhTjHsgMqknhFJF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TextArea with Floating Label](./images/blazor-textarea-resize.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXhTjHsgMqknhFJF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TextArea with Resize](./images/blazor-textarea-resize.png)" %} ## Width -You can easily customize the width of the TextArea using the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_Width) property. This property allows precise adjustment of the TextArea's width according to the specific layout requirements of the application. +Customize the width of the TextArea using the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_Width) property. This property allows precise adjustment of the TextArea's width according to the specific layout requirements of the application. {% tabs %} {% highlight razor %} @@ -40,4 +42,4 @@ You can easily customize the width of the TextArea using the [Width](https://hel {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLTjRCACTsLJegK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TextArea with Resize](./images/blazor-textarea-resize-width.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLTjRCACTsLJegK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TextArea with Custom Width and Resize](./images/blazor-textarea-resize-width.png)" %} diff --git a/blazor/textarea/rows-columns.md b/blazor/textarea/rows-columns.md index 287db6914a..d6f0f0bb5c 100644 --- a/blazor/textarea/rows-columns.md +++ b/blazor/textarea/rows-columns.md @@ -3,17 +3,15 @@ layout: post title: Rows and Columns count in Blazor TextArea Component | Syncfusion description: Learn about adjusting the rows and columns of the Syncfusion Blazor TextArea component and much more. platform: Blazor -control: Textarea +control: TextArea documentation: ug --- # Rows and Columns in Blazor TextArea Component -Two essential attributes, `rows` and `columns`, play a pivotal role in customizing the TextArea's appearance and layout. -The `rows`attribute determines the initial visible number of lines within the TextArea, controlling its vertical size. Conversely, the `columns` attribute specifies the visible width of the TextArea in characters per line, determining its initial width. +The TextArea size can be tailored for layout and readability using the component properties that map to native textarea behavior. The `rows` value controls the initial visible number of lines (vertical size), and the `columns` value represents the initial visible width in characters per line (approximate, as it depends on font and CSS). These settings affect only the initial visible area; content can still exceed the view and scrollbars may appear based on overflow settings. - -* You can customize the TextArea component by setting the number of rows using the [RowCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_RowCount) property and the number of columns using the [ColumnCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_ColumnCount) property. These properties allow precise control over the dimensions of the TextArea, ensuring it fits seamlessly within the layout of the application. +* Customize the TextArea component by setting the number of rows with the [RowCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_RowCount) property and the number of columns with the [ColumnCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_ColumnCount) property. These properties allow precise control over the dimensions of the TextArea, ensuring it fits seamlessly within the layout of the application. {% tabs %} {% highlight razor %} diff --git a/blazor/textarea/styles-appearance.md b/blazor/textarea/styles-appearance.md index 0fa6f0eb61..6ee7b9516b 100644 --- a/blazor/textarea/styles-appearance.md +++ b/blazor/textarea/styles-appearance.md @@ -3,21 +3,20 @@ layout: post title: Style and appearance in Blazor TextArea Component | Syncfusion description: Learn here all about Style and appearance of the Syncfusion Blazor Textarea component and much more. platform: Blazor -control: Textarea +control: TextArea documentation: ug --- # Sizing in Blazor TextArea Component -you can adjust the size of the TextArea by applying specific classes: +The size of the TextArea can be adjusted by applying the following classes: | Property | Description | | -- | -- | | Small | Add the `e-small` class to the input element or its container to render a smaller-sized TextArea. | | Bigger | Add the `e-bigger` class to the input element or its container to render a larger-sized TextArea. | -By applying these classes, users can easily customize the appearance of the TextArea to better fit their application's design requirements. - +Applying these classes helps align the TextArea with the overall density and visual scale of the application’s design. {% tabs %} {% highlight razor tabtitle="Razor" %} @@ -89,13 +88,13 @@ By adding these classes, users can choose between a filled or outline appearance {% endhighlight %} {% endtabs %} ->Note: Filled and Outline theme customization are available only with Material and Material3 themes. +>Note: Filled and Outline appearances are available only with the Material and Material3 themes. ## Custom styling with CssClass property -The `CssClass` Api provides a powerful way to apply custom styling to the TextArea component, allowing users to customize its appearance and layout according to their design requirements. +The `CssClass` property provides a way to apply custom CSS classes to the TextArea container, enabling customization of color, padding, margins, borders, and other styles to meet design requirements. -By utilizing the `CssClass` API, users can apply custom CSS classes to the TextArea component's container, enabling control over its styling properties such as color, padding, margins, borders, and more. +By applying custom classes, the component’s appearance can be tailored while preserving built-in theme behavior. {% tabs %} {% highlight razor %} @@ -107,7 +106,7 @@ By utilizing the `CssClass` API, users can apply custom CSS classes to the TextA ## Setting the disabled state -To disable the TextArea, you can utilize the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_Disabled) property. When set to `true`, the TextArea becomes disabled, preventing user interaction. Please find the demo link [here](https://blazor.syncfusion.com/demos/textarea/api?theme=fluent). +Disable the TextArea by using the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_Disabled) property. When set to `true`, the TextArea becomes disabled, preventing user interaction. Please find the demo link [here](https://blazor.syncfusion.com/demos/textarea/api?theme=fluent). {% tabs %} {% highlight razor %} @@ -133,9 +132,9 @@ To make the TextArea read-only , you can use the [ReadOnly](https://help.syncfus ## Set the rounded corner -Render the TextArea with `rounded corner` by adding the `e-corner` class to the input parent element. +Render the TextArea with rounded corners by adding the `e-corner` class to the input’s parent element. This style applies to the boxed input wrapper. ->This rounded corner is visible only in box model input component +>This rounded corner is visible only in the box model input component. {% tabs %} {% highlight razor %} @@ -168,7 +167,7 @@ To display a static clear button in the TextArea component, you can add the `e-s ## Customize the TextArea background color and text color -You can customize the TextArea styles such as background-color, text-color and border-color by overriding its default styles to achieve the desired appearance for the TextArea. +Customize background color, text color, and border color by overriding the default wrapper styles. Target the appropriate wrapper classes to ensure consistent appearance across themes. {% tabs %} {% highlight razor tabtitle="Razor" %} @@ -295,7 +294,7 @@ You can change the floating label color of the TextArea for both `success` and ` ## Adding mandatory asterisk to placeholder -To add a mandatory asterisk (*) to the placeholder in the TextArea component, you can utilize CSS to append the asterisk after the placeholder text. +Add a mandatory asterisk (*) to the floating label using CSS to append the symbol after the label text. ```css @@ -307,7 +306,6 @@ To add a mandatory asterisk (*) to the placeholder in the TextArea component, yo ``` - {% tabs %} {% highlight razor tabtitle="Razor" %}
diff --git a/blazor/toast/accessibility.md b/blazor/toast/accessibility.md index 470cae8444..b80a8bc7cf 100644 --- a/blazor/toast/accessibility.md +++ b/blazor/toast/accessibility.md @@ -9,13 +9,9 @@ documentation: ug # Accessibility in Blazor Toast Component -The [Blazor Toast](https://www.syncfusion.com/blazor-components/blazor-toast) component has been designed with [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/practices/) specifications in mind by applying the prompt WAI-ARIA roles, states, and properties with the keyboard support. It helps users who use assistive WAI-ARIA accessibility support, which is achieved using attributes. +The [Blazor Toast](https://www.syncfusion.com/blazor-components/blazor-toast) component is built with [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/practices/) in mind. Appropriate ARIA roles, states, and properties are applied to ensure announcements by assistive technologies. The component is tested with major screen readers and supports accessible usage patterns. -It provides information about the elements in a document for assistive technology. - -The Blazor Toast component implements the keyboard navigation support by using the following [WAI-ARIA practices](https://www.w3.org/WAI/ARIA/apg/practices/) and is tested in major screen readers. - -The Blazor Toast 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. +The Blazor Toast component follows common 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). The accessibility compliance for the Blazor Toast component is outlined below. @@ -51,9 +47,9 @@ The Blazor Toast component implements the keyboard navigation support by using t -| Class | Description | +| Attribute | Description | | -------- | -------- | -| role | alert: Identifies the element as a container when alert content will be added or updated. | +| role | alert: Identifies the element as an assertive live region so that alert content is announced when added or updated. | ```cshtml @@ -80,10 +76,10 @@ The Blazor Toast component implements the keyboard navigation support by using t ## Ensuring accessibility -The Blazor Toast component's accessibility levels are ensured through an [axe-core](https://www.npmjs.com/package/axe-core) software tool during automated testing. +The Blazor Toast component’s accessibility is validated with the [axe-core](https://www.npmjs.com/package/axe-core) tool during automated testing. The accessibility compliance of the Toast component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/toast) in a new window to evaluate the accessibility of the Toast component with accessibility tools. ## See also -* [Accessibility in Syncfusion® components](../common/accessibility) +* [Accessibility in Syncfusion® components](../common/accessibility) \ No newline at end of file diff --git a/blazor/toast/action-buttons.md b/blazor/toast/action-buttons.md index 8e666a881f..7f5730810f 100644 --- a/blazor/toast/action-buttons.md +++ b/blazor/toast/action-buttons.md @@ -9,9 +9,9 @@ documentation: ug # Action Buttons in Blazor Toast Component -Action buttons can be included to the toast control by adding the `ToastButton` property. The click event callback function can also be included for each button. +Add action buttons to the Toast component by defining the ToastButtons collection with one or more ToastButton items. Each button can include its own OnClick callback to perform actions such as dismissing the toast or triggering custom logic. -In the following code, toast buttons are configured using `ToastButton` property. +In the following example, toast buttons are configured using the ToastButtons collection, and both buttons invoke an OnClick handler to hide the toast. ```cshtml diff --git a/blazor/toast/animation.md b/blazor/toast/animation.md index b469d05594..ccf26814c3 100644 --- a/blazor/toast/animation.md +++ b/blazor/toast/animation.md @@ -9,9 +9,9 @@ documentation: ug # Animation in Blazor Toast Component -The toast component supports custom animations for both show and hide actions from the provided `ToastHideAnimationSettings` and `ToastShowAnimationSettings` option of the `Animation` library. The default animation is given as `FadeIn` for showing the toast and `FadeOut` for hiding the toast. +The Blazor Toast component supports configurable animations for both showing and hiding notifications through ToastAnimationSettings, which contains ToastShowAnimationSettings and ToastHideAnimationSettings. Animation effects are selected from the ToastEffect enum. By default, the toast uses FadeIn for showing and FadeOut for hiding. -The following sample demonstrates some types of animations that suit toast. +The following example demonstrates several animation effects that can be applied to the Toast component. ```cshtml diff --git a/blazor/toast/config.md b/blazor/toast/config.md index 7f1fc6194b..f9df575795 100644 --- a/blazor/toast/config.md +++ b/blazor/toast/config.md @@ -9,13 +9,13 @@ documentation: ug # Configuring options in Blazor Toast Component -This section explains the steps required to customize the appearance of the toast using built-in APIs. +This section describes how to customize the appearance and behavior of the Toast component using built-in APIs. ## Title and content template -Toast can be created with the notification message. The message contains `Title` and content of the toasts. The title and contents are adaptable in any resolution. +Create a toast with a notification message that includes a Title and content. These values adapt to different screen sizes. -N> The Title or `Content` property can be given as HTML Element/element ID to a string that can be displayed as a toast. +N> Title and Content can be provided as plain text or HTML markup via string parameters. For richer layouts, use toast templates (for example, ToastTemplates or ContentTemplate) to define custom content. ```cshtml @@ -169,9 +169,9 @@ The dimensions of the toast can be set using the `Width` and `Height` properties By default, the toast can be rendered with `300px` width with `auto` height. -N> In mobile devices, the default width of the toast gets '100%' width of the page. When the toast width is set as '100%', the toast occupies full width and will be displayed at the top or bottom based on the position `Y` property. +N> On mobile devices, the default toast width is 100% of the page. When Width is set to 100%, the toast occupies the full width of the viewport and is displayed at the top or bottom based on the Position Y property. -Both the width and height properties allow setting pixels/numbers/percentage. The number value is considered as pixels. +Both Width and Height accept pixel values, percentages, or numbers. A numeric value is interpreted as pixels. ```cshtml @@ -276,9 +276,9 @@ Both the width and height properties allow setting pixels/numbers/percentage. Th ## Show or hide toast using service -You can initialize single toast instance and use it all over application by creating server. Refer below steps to create service to show toast from any page. +Initialize a single toast instance and reuse it across the application by creating a service. The following steps show how to create a service to display toast notifications from any page. -**Step 1**: Create a toast service to inject in pages to show toast messages from anywhere. Here, title and content can be passed to show the toast message. +**Step 1**: Create a toast service to inject into pages to show toast messages from anywhere. In this example, Title and Content are passed to display the toast message. ```c# public class ToastOption @@ -298,7 +298,7 @@ public class ToastService } ``` -**Step 2**: Add the `ToastService` to services collection in **Program.cs**. +**Step 2**: Add the ToastService to the services collection in Program.cs. {% tabs %} {% highlight c# tabtitle="~/Program.cs" hl_lines="13 14" %} @@ -342,7 +342,7 @@ app.Run(); {% endhighlight %} {% endtabs %} -**Step 3**: Create `ToastComponent` which shows `SfToast` based on `ToastService` notification. +**Step 3**: Create ToastComponent, which shows SfToast based on ToastService notifications. {% tabs %} {% highlight cshtml tabtitle="ToastComponent.razor" hl_lines="13 14" %} @@ -390,7 +390,7 @@ app.Run(); {% endhighlight %} {% endtabs %} -**Step 4**: Add `ToastComponent` create in above step in `MainLayout.razor`. +**Step 4**: Add the ToastComponent created in the above step to MainLayout.razor. {% tabs %} {% highlight cshtml tabtitle="MainLayout.razor" hl_lines="21" %} @@ -420,7 +420,7 @@ app.Run(); {% endhighlight %} {% endtabs %} -**Step 5**: Now, you can inject `ToastService` in any page and call `ToastService.ShowToast()` method to show toast notifications. +**Step 5**: Inject ToastService in any page and call ToastService.ShowToast to display toast notifications. {% tabs %} {% highlight cshtml tabtitle="RAZOR" hl_lines="3 10 11 12 13 14" %} @@ -445,5 +445,4 @@ app.Run(); {% endhighlight %} {% endtabs %} -N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Show-or-hide-toast-using-service-in-Blazor) - +N> [View the sample in GitHub](https://github.com/SyncfusionExamples/Show-or-hide-toast-using-service-in-Blazor) \ No newline at end of file diff --git a/blazor/toast/events.md b/blazor/toast/events.md index 49828ec259..559971cf4c 100644 --- a/blazor/toast/events.md +++ b/blazor/toast/events.md @@ -13,7 +13,7 @@ This section explains the list of events of the Toast component which will be tr ## Created -`Created` event triggers after the Toast gets created. +The Created event occurs after the Toast component is initialized. This is suitable for one-time setup or initial configuration. Refer to the ToastEvents.Created API for details. ```cshtml @@ -34,7 +34,7 @@ This section explains the list of events of the Toast component which will be tr ## Destroyed -`Destroyed` event triggers after the Toast gets destroyed. +The Destroyed event occurs when the Toast component is disposed. Use this event to release resources or unsubscribe from external services. Refer to the ToastEvents.Destroyed API for details. ```cshtml @@ -55,7 +55,7 @@ This section explains the list of events of the Toast component which will be tr ## Opened -`Opened` event triggers after the Toast shown on the target container. +The Opened event occurs after the toast is displayed in the target container. It is useful for post-render actions, such as focusing elements or starting animations. See ToastOpenArgs for available data. ```cshtml @@ -76,7 +76,7 @@ This section explains the list of events of the Toast component which will be tr ## OnOpen -`OnOpen` event triggers before the toast shown. +The OnOpen event occurs before the toast is displayed. Use it to modify content or settings just before render. See ToastBeforeOpenArgs for properties available during this phase. ```cshtml @@ -97,7 +97,7 @@ This section explains the list of events of the Toast component which will be tr ## Closed -`Closed` event triggers after the Toast hides. +The Closed event occurs after the toast is hidden. This event is useful for cleanup tasks or logging. See ToastCloseArgs for additional context. ```cshtml @@ -118,7 +118,7 @@ This section explains the list of events of the Toast component which will be tr ## OnClick -`OnClick` event triggers while clicking on the Toast. +The OnClick event occurs when the toast is clicked. Handle this event to perform actions such as navigation, analytics, or dismissing a toast. See ToastClickEventArgs for click details. ```cshtml diff --git a/blazor/toast/getting-started-webapp.md b/blazor/toast/getting-started-webapp.md index faec231e72..466ccf332a 100644 --- a/blazor/toast/getting-started-webapp.md +++ b/blazor/toast/getting-started-webapp.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Toast in Blazor Web App -This section briefly explains about how to include [Blazor Toast](https://www.syncfusion.com/blazor-components/blazor-toast) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section explains how to add the [Blazor Toast](https://www.syncfusion.com/blazor-components/blazor-toast) component to a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) or Visual Studio Code. {% tabcontents %} @@ -21,17 +21,17 @@ This section briefly explains about how to include [Blazor Toast](https://www.sy ## Create a new Blazor Web App in Visual Studio -You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application. +Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) when creating the Blazor Web App. ## Install Syncfusion® Blazor Notifications and Themes NuGet in the App -To add **Blazor Toast** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Notifications](https://www.nuget.org/packages/Syncfusion.Blazor.Notifications) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor Toast** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Notifications](https://www.nuget.org/packages/Syncfusion.Blazor.Notifications) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using `WebAssembly` or `Auto` render modes in a Blazor Web App, install the Syncfusion® Blazor NuGet packages in the Client project. For `Server` render mode, install them in the Server project. -Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, run the following Package Manager commands: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -42,7 +42,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the full list of packages and components. {% endtabcontent %} @@ -54,9 +54,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor Web App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application. +Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) when creating the Blazor Web App. For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. @@ -74,11 +74,11 @@ N> For more information on creating a **Blazor Web App** with various interactiv ## Install Syncfusion® Blazor Notifications and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using `WebAssembly` or `Auto` render modes in a Blazor Web App, install the Syncfusion® Blazor NuGet packages in the Client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Notifications](https://www.nuget.org/packages/Syncfusion.Blazor.Notifications) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure you are in the project directory that contains the `.csproj` file. +* Run the following commands to install the [Syncfusion.Blazor.Notifications](https://www.nuget.org/packages/Syncfusion.Blazor.Notifications) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and restore dependencies. {% tabs %} @@ -92,7 +92,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the full list of packages and components. {% endtabcontent %} @@ -102,10 +102,10 @@ N> Syncfusion® Blazor components are availa | Interactive Render Mode | Description | | -- | -- | -| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| -| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| +| WebAssembly or Auto | Open **~/_Imports.razor** file from the Client project.| +| Server | Open **~/_Imports.razor** file, which is located in the `Components` folder.| -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Notifications` namespace. +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Notifications` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -116,9 +116,9 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Notifications` namespace. {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. +Now, register the Syncfusion® Blazor service in the **~/Program.cs** file of your Blazor Web App. -If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in both Program.cs files (Server and Client) in your Blazor Web App. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -152,7 +152,7 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion® Blazor Service only in that **~/Program.cs** file. +If the **Interactive Render Mode** is set to `Server`, the project contains a single **~/Program.cs** file. In this case, register the Syncfusion® Blazor service only in that file. {% tabs %} {% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} @@ -175,7 +175,7 @@ var app = builder.Build(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: +The theme stylesheet and script are provided via NuGet as [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file, as shown below: ```html @@ -189,11 +189,11 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> See the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic for additional options to reference themes ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)). Also, refer to [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) for approaches to add script references in a Blazor application. ## Add Syncfusion® Blazor Toast component -Add the Syncfusion® Blazor Toast component in the **~Pages/.razor** file. If an interactivity location as `Per page/component` in the web app, define a render mode at the top of the `~Pages/.razor` component, as follows: +Add the Syncfusion® Blazor Toast component to a page in the **~/Pages** folder. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `~Pages/.razor` component as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | @@ -202,7 +202,7 @@ Add the Syncfusion® Blazor Toast component | | Server | @rendermode InteractiveServer | | | None | --- | -N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default. +N> If the **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto`, `WebAssembly`, or `Server`, the render mode is configured in the `App.razor` file by default. {% tabs %} {% highlight razor %} @@ -255,7 +255,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Toast component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor Toast component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/VDrzNiKXJRibajXZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toast Component](./images/blazor-toast.png)" %} @@ -268,4 +268,4 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- * [Getting Started with Syncfusion® Blazor for server-side in Visual Studio](../getting-started/blazor-server-side-visual-studio) * [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](../getting-started/blazor-server-side-dotnet-cli) -N> You can also explore our [Blazor Toast example](https://blazor.syncfusion.com/demos/toast/default-functionalities?theme=bootstrap5) that shows you how to render and configure the toast. \ No newline at end of file +N> You can also explore our [Blazor Toast example](https://blazor.syncfusion.com/demos/toast/default-functionalities?theme=bootstrap5) that demonstrates how to render and configure the toast. \ No newline at end of file diff --git a/blazor/toast/getting-started.md b/blazor/toast/getting-started.md index a8f7e91b84..0a980e9ee3 100644 --- a/blazor/toast/getting-started.md +++ b/blazor/toast/getting-started.md @@ -9,9 +9,9 @@ documentation: ug # Getting Started with Blazor Toast Component -This section briefly explains about how to include [Blazor Toast](https://www.syncfusion.com/blazor-components/blazor-toast) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This section explains how to add the [Blazor Toast](https://www.syncfusion.com/blazor-components/blazor-toast) component to a Blazor WebAssembly app using Visual Studio or Visual Studio Code. -To get start quickly with Blazor Toast component, check on this video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Toast) sample. +To get started quickly with the Blazor Toast component, watch the following video or explore the sample on [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Toast). {% youtube "youtube:https://www.youtube.com/watch?v=tMa7JvcfNcY"%} @@ -26,11 +26,11 @@ To get start quickly with Blazor Toast component, check on this video or [GitHub ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ## Install Syncfusion® Blazor Notifications and Themes NuGet in the App -To add **Blazor Toast** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Notifications](https://www.nuget.org/packages/Syncfusion.Blazor.Notifications) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor Toast** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Notifications](https://www.nuget.org/packages/Syncfusion.Blazor.Notifications) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following Package Manager commands: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -41,7 +41,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. {% endtabcontent %} @@ -53,9 +53,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application using the following commands in the integrated terminal (Ctrl+`). {% tabs %} @@ -71,8 +71,8 @@ cd BlazorApp ## Install Syncfusion® Blazor Notifications and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Notifications](https://www.nuget.org/packages/Syncfusion.Blazor.Notifications) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure you are in the project root directory where the `.csproj` file is located. +* Run the following commands to install the [Syncfusion.Blazor.Notifications](https://www.nuget.org/packages/Syncfusion.Blazor.Notifications) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) packages and restore dependencies. {% tabs %} @@ -86,7 +86,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. {% endtabcontent %} @@ -94,7 +94,7 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Notifications` namespace. +Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Notifications` namespaces. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -105,7 +105,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +Now, register the Syncfusion® Blazor service in the **~/Program.cs** file of the Blazor WebAssembly app. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -129,7 +129,7 @@ await builder.Build().RunAsync(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. +The theme stylesheet and script are provided via NuGet as [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of **~/index.html**. ```html @@ -138,11 +138,11 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> See the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover options for referencing themes ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)). Also, see [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) for different approaches to add script references in a Blazor application. ## Add Blazor Toast component -Add the Syncfusion® Blazor Toast component in the **~/Pages/Index.razor** file. +Add the Syncfusion® Blazor Toast component to **~/Pages/Index.razor**. {% tabs %} {% highlight cshtml %} @@ -186,7 +186,7 @@ Add the Syncfusion® Blazor Toast component {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Toast component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor Toast component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/VDrzNiKXJRibajXZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toast Component](./images/blazor-toast.png)" %} @@ -196,4 +196,4 @@ Add the Syncfusion® Blazor Toast component * [Getting Started with Syncfusion® Blazor Web Assembly App in Visual Studio or .NET CLI](../getting-started/blazor-webassembly-dotnet-cli) * [Getting Started with Syncfusion® Blazor Web App in Visual Studio or .NET CLI](../getting-started/blazor-server-side-visual-studio) -N> You can also explore our [Blazor Toast example](https://blazor.syncfusion.com/demos/toast/default-functionalities?theme=bootstrap5) that shows you how to render and configure the toast. +N> You can also explore the [Blazor Toast example](https://blazor.syncfusion.com/demos/toast/default-functionalities?theme=bootstrap5), which demonstrates how to render and configure the toast. \ No newline at end of file diff --git a/blazor/toast/how-to/access-specific-toast.md b/blazor/toast/how-to/access-specific-toast.md index 63642e333c..6279841135 100644 --- a/blazor/toast/how-to/access-specific-toast.md +++ b/blazor/toast/how-to/access-specific-toast.md @@ -9,9 +9,9 @@ documentation: ug # Access specific toast in Blazor Toast Component -In the toast, the particular toast can be accessed by passing the `Key` value in `ShowModes`, and the `Key` should be unique in `ShowModels`. To close the specific toast, you also need to pass the corresponding toast `Key` value in the `Hide` method. The added `Key` value can be got in the toast `Opened` and `Closed` event. +In the Toast component, an individual toast can be addressed by assigning a unique Key value in the ToastModel when showing the toast. To close a specific toast, pass the same Key to the HideAsync method. The assigned Key can be retrieved from the Opened and Closed events through the event arguments. -In the following example, Toast is closed by calling the `Hide` method with the key value that is returned in the `Opened` event +In the following example, each toast is closed by calling the HideAsync method with the Key value returned in the Opened event. ```cshtml diff --git a/blazor/toast/how-to/add-dynamic-template.md b/blazor/toast/how-to/add-dynamic-template.md index afa2529437..e5ad41da38 100644 --- a/blazor/toast/how-to/add-dynamic-template.md +++ b/blazor/toast/how-to/add-dynamic-template.md @@ -9,7 +9,7 @@ documentation: ug # Add dynamic template in Blazor Toast Component -Toast supports to change templates dynamically with displaying in multiple toasts. The toast properties can be changed while calling in the `Show` method. +The Blazor Toast component supports rendering dynamic templates for individual notifications. Provide a ContentTemplate in the ToastModel passed to ShowAsync to display a unique template for each toast. Toast properties can also be customized per toast when invoking ShowAsync, enabling different content and appearance across multiple toasts shown in sequence. ```cshtml diff --git a/blazor/toast/how-to/change-toast-content-dynamically.md b/blazor/toast/how-to/change-toast-content-dynamically.md index 8a4c3273d1..224601e4b3 100644 --- a/blazor/toast/how-to/change-toast-content-dynamically.md +++ b/blazor/toast/how-to/change-toast-content-dynamically.md @@ -9,7 +9,7 @@ documentation: ug # Show toast content dynamically in Blazor Toast Component -The Toast component supports to change its content dynamically while displaying in newest toasts. The toast content can be changed by updating property value, before calling in the `show` method. +The Blazor Toast component supports updating its content dynamically for newly displayed toasts. Update the bound Content value before invoking ShowAsync so that each toast reflects the latest content. If the content is changed immediately before showing a toast, a brief delay may be used to ensure the state update is applied prior to the ShowAsync call. ```cshtml diff --git a/blazor/toast/how-to/close-the-toast-with-click-tap.md b/blazor/toast/how-to/close-the-toast-with-click-tap.md index 625dd72ba6..569f9efef6 100644 --- a/blazor/toast/how-to/close-the-toast-with-click-tap.md +++ b/blazor/toast/how-to/close-the-toast-with-click-tap.md @@ -9,9 +9,9 @@ documentation: ug # Close the toast with click/tap in Blazor Toast Component -By default, the toasts are expired based on the `Timeout` value. The toast hiding process can be customized with click/tap action by setting the `ToastClickEventArgs` in the clicked callback function with static Toast. +By default, toasts automatically close based on the Timeout value. To close a toast when it is clicked or tapped, handle the OnClick event and set ClickToClose to true in the ToastClickEventArgs. To require user-initiated dismissal only, set Timeout to 0 to create a sticky toast and use click or tap to close it. -The following sample demonstrates the click or tap action in toast. +The following sample demonstrates closing a toast through a click or tap action. ```cshtml diff --git a/blazor/toast/how-to/prevent-toast-close-with-mobile-swipe.md b/blazor/toast/how-to/prevent-toast-close-with-mobile-swipe.md index 5d67414a53..5c4fd6acc9 100644 --- a/blazor/toast/how-to/prevent-toast-close-with-mobile-swipe.md +++ b/blazor/toast/how-to/prevent-toast-close-with-mobile-swipe.md @@ -9,9 +9,9 @@ documentation: ug # Prevent toast close with mobile swipe in Blazor Toast Component -The toast close can be prevented with mobile swipe action by setting `OnClose` argument cancel value to true while argument type is swipe. The following code shows how to prevent toast close with mobile swipe. +To prevent a toast from closing when swiped on mobile, handle the OnClose event and set the event argument’s Cancel property to true when RequestType equals "swipe". This cancels only swipe-initiated dismissal; other close actions (such as Timeout, close button, or programmatic HideAsync) continue to work unless handled separately. -The following sample demonstrates preventing toast close with mobile swipe element displaying with custom code blocks. +The following sample demonstrates preventing toast close on mobile swipe using the OnClose event. ```cshtml diff --git a/blazor/toast/how-to/show-different-types-of-toast.md b/blazor/toast/how-to/show-different-types-of-toast.md index aa3d061095..9de4067f09 100644 --- a/blazor/toast/how-to/show-different-types-of-toast.md +++ b/blazor/toast/how-to/show-different-types-of-toast.md @@ -9,14 +9,16 @@ documentation: ug # Show different types of toast in Blazor Toast Component -The Blazor toast has the following predefined styles that can be defined using the `CssClass` property for achieving different types of toast: +The Blazor Toast component provides predefined visual styles that can be applied using the CssClass property to represent different notification types. Use these styles to convey status and intent consistently across the application. | Class | Description | | -------- | -------- | -| `e-toast-success` | Represents a positive toast | -| `e-toast-info` | Represents an informative toast | -| `e-toast-warning` | Represents a toast with caution | -| `e-toast-danger` | Represents a negative toast | +| `e-toast-success` | Indicates a successful or completed action | +| `e-toast-info` | Conveys informational or neutral messages | +| `e-toast-warning` | Highlights cautionary messages that may require attention | +| `e-toast-danger` | Signals errors or critical issues | + +These classes style the toast appearance and can be combined with other custom classes as needed. Behavior such as Timeout, position, and content is configured independently. ```cshtml diff --git a/blazor/toast/how-to/show-multiple-toasts-in-various-positions.md b/blazor/toast/how-to/show-multiple-toasts-in-various-positions.md index 812b035fb8..9f60fd0ca6 100644 --- a/blazor/toast/how-to/show-multiple-toasts-in-various-positions.md +++ b/blazor/toast/how-to/show-multiple-toasts-in-various-positions.md @@ -9,7 +9,7 @@ documentation: ug # Show multiple toasts in various positions in Blazor Toast Component -By default, the positions of the new toasts are only updated after the visible toasts have been destroyed. If there is a need to display multiple toasts with different positions, initiate another toast. +To display toasts in different positions at the same time, create multiple SfToast instances, each configured with its own ToastPosition. Each toast instance manages its own queue and position independently. Changing the position affects only toasts created after the change; toasts that are already visible are not repositioned. The following sample demonstrates adding multiple toasts in different positions. diff --git a/blazor/toast/position.md b/blazor/toast/position.md index 4fde83e063..f2910e8138 100644 --- a/blazor/toast/position.md +++ b/blazor/toast/position.md @@ -1,7 +1,7 @@ --- layout: post title: Positioning in Blazor Toast Component | Syncfusion -description: Checkout and learn here all about positioning in Syncfusion Blazor Toast component and much more details. +description: Check out and learn about positioning in Syncfusion Blazor Toast component and much more details. platform: Blazor control: Toast documentation: ug @@ -9,26 +9,26 @@ documentation: ug # Positioning in Blazor Toast Component -The toast position can be updated based on predefined positions or customizable positions. The predefined position combinations are updated in the `X` and `Y` position properties. +The toast position can be defined using predefined alignments or customized using explicit offsets. Predefined positions are configured using the `X` (horizontal: Left, Center, Right) and `Y` (vertical: Top, Bottom) properties on the position settings of the Toast component. ## Predefined -`X` Positions +`X` positions * Left * Center * Right -`Y` Positions +`Y` positions * Top * Bottom -N> In multiple toast display, the new toast position will not be updated on dynamic change of property values until the old toast messages removed. The toast occupies full width when the width is set to '100%', so the X positions will not affect the changes when the width is '100%'. +N> When multiple toasts are shown, dynamic changes to position properties do not affect already displayed toasts; the new position is applied to subsequent toasts after the previous messages are removed. If the toast width is set to 100%, it stretches across the container and horizontal (`X`) alignment has no visible effect. ## Custom -Custom `X` and `Y` positions can be given as pixels/numbers/percentage. The number value is considered as pixels based on the top and left values updated in the toast. +Custom `X` and `Y` positions can be provided as pixel values, numbers, or percentages. Numeric values are interpreted as pixels and are applied as offsets from the top and left of the target container (or the viewport when no target is set). ```cshtml diff --git a/blazor/toast/style.md b/blazor/toast/style.md index e029eb77f2..c08d77e94e 100644 --- a/blazor/toast/style.md +++ b/blazor/toast/style.md @@ -1,7 +1,7 @@ --- layout: post title: Style and appearance in Blazor Toast Component | Syncfusion -description: Checkout and learn here all about style and appearance in Syncfusion Blazor Toast component and more. +description: Check out and learn about style and appearance in Syncfusion Blazor Toast component and more. platform: Blazor control: Toast documentation: ug @@ -13,7 +13,7 @@ The following content provides the exact CSS structure that can be used to modif ## Customizing the toast title -Use the following CSS to customize the default toast's content properties like font-family, font-size and color. +Use the following CSS to customize the toast title properties such as font family, font size, and color. ```css /* To change color, font family and font size */ @@ -26,7 +26,7 @@ Use the following CSS to customize the default toast's content properties like f ## Customizing the toast content -Use the following CSS to customize the default toast's content properties like font-family, font-size and color. +Use the following CSS to customize the toast content properties such as font family, font size, and color. ```css /* To change color, font family and font size */ @@ -39,7 +39,7 @@ Use the following CSS to customize the default toast's content properties like f ## Customizing the toast icon -Use the following CSS to customize the default toast icon color. +Use the following CSS to customize the default toast icon color. Increase selector specificity or scope by ID if a theme rule takes precedence. ```css /* To change icon color */ @@ -50,7 +50,7 @@ Use the following CSS to customize the default toast icon color. ## Customizing the toast background -Use the following CSS to customize the default toast's background color. +Use the following CSS to customize the toast background color. Consider contrast requirements for accessibility when choosing colors. ```css /* To change background color */ diff --git a/blazor/toast/template.md b/blazor/toast/template.md index 2f5abda400..f4660242b3 100644 --- a/blazor/toast/template.md +++ b/blazor/toast/template.md @@ -9,9 +9,9 @@ documentation: ug # Template in Blazor Toast Component -Configure templates to display within a header, content, and footer section of Toast. The header, content and footer templates can be defined as `HTML element` inside `ToastTemplates`. +Use templates to customize the layout and content of the Blazor Toast. A full-toast template can be defined by placing an HTML element inside ToastTemplates and specifying Template. This approach is ideal for static or markup-defined layouts. -The following code explains how to initialize a Toast with `Template`. +The following example initializes a Toast with a full template using Template within ToastTemplates. It also demonstrates positioning with ToastPosition. ```cshtml @@ -123,7 +123,7 @@ The following code explains how to initialize a Toast with `Template`. ``` -The Template can be given as a RenderFragment type for the `ContentTemplate` property when updating the toast templates dynamically. The below code block explains the string template. +For dynamic scenarios, a RenderFragment can be assigned to the ContentTemplate property when showing the toast programmatically. The following example demonstrates providing a RenderFragment to ContentTemplate via ShowAsync at runtime. ```cshtml diff --git a/blazor/toast/timeout.md b/blazor/toast/timeout.md index 3884a54e60..aeb7f1cb14 100644 --- a/blazor/toast/timeout.md +++ b/blazor/toast/timeout.md @@ -9,13 +9,12 @@ documentation: ug # Timeout in Blazor Toast Component -The toast can be expired based on the `Timeout` property. The toast can live till the time out reaches without user interaction, a time out value is considered as a millisecond. +The toast display duration is controlled by the `Timeout` property, expressed in milliseconds. A toast remains visible until the timeout elapses if there is no user interaction. -* The `Timeout` delay can be visually represented using [Progress Bar](./config#progress-bar). +* The `Timeout` duration can be visually represented using a [progress bar](./config#progress-bar). +* The `ExtendedTimeOut` property specifies how long the toast remains visible after the user hovers over it. -* The `ExtendedTimeOut` property determines how long the toast should be displayed after a user hovers over it. - -N> The process can be terminated by using the `ShowCloseButton` property for destroying the toast at any time. +N> Allow users to dismiss the toast at any time by enabling the `ShowCloseButton` property. ```cshtml @@ -88,7 +87,7 @@ N> The process can be terminated by using the `ShowCloseButton` property for des ## Static toast -Auto hiding can be prevented in a toast as visible like static by setting zero (`0`) value in the `Timeout` Property. +To prevent auto-hide and make the toast persist until dismissed, set the `Timeout` property to zero (`0`). ```cshtml From 039b218f37a35d526b756c022bb3b107b496a179 Mon Sep 17 00:00:00 2001 From: Ashwini-SF5049 Date: Thu, 9 Oct 2025 16:34:56 +0530 Subject: [PATCH 13/30] 983104: Updated --- blazor/toast/position.md | 2 +- blazor/toast/style.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/blazor/toast/position.md b/blazor/toast/position.md index f2910e8138..7d69bbc6f6 100644 --- a/blazor/toast/position.md +++ b/blazor/toast/position.md @@ -1,7 +1,7 @@ --- layout: post title: Positioning in Blazor Toast Component | Syncfusion -description: Check out and learn about positioning in Syncfusion Blazor Toast component and much more details. +description: Check out and learn about positioning in Syncfusion Blazor Toast component. platform: Blazor control: Toast documentation: ug diff --git a/blazor/toast/style.md b/blazor/toast/style.md index c08d77e94e..dd9d6737b3 100644 --- a/blazor/toast/style.md +++ b/blazor/toast/style.md @@ -1,7 +1,7 @@ --- layout: post title: Style and appearance in Blazor Toast Component | Syncfusion -description: Check out and learn about style and appearance in Syncfusion Blazor Toast component and more. +description: Check out and learn about style and appearance in Syncfusion Blazor Toast component. platform: Blazor control: Toast documentation: ug From a47e37eb62ac19638d67ec8b319126e3e371f00e Mon Sep 17 00:00:00 2001 From: Ashwini-SF5049 Date: Thu, 9 Oct 2025 16:53:11 +0530 Subject: [PATCH 14/30] 983104: Updated --- blazor/toast/position.md | 2 +- blazor/toast/style.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/blazor/toast/position.md b/blazor/toast/position.md index 7d69bbc6f6..d7b205f6d6 100644 --- a/blazor/toast/position.md +++ b/blazor/toast/position.md @@ -1,7 +1,7 @@ --- layout: post title: Positioning in Blazor Toast Component | Syncfusion -description: Check out and learn about positioning in Syncfusion Blazor Toast component. +description: Check out and learn here all about positioning in Syncfusion Blazor Toast component and much more details. platform: Blazor control: Toast documentation: ug diff --git a/blazor/toast/style.md b/blazor/toast/style.md index dd9d6737b3..d66bf7a409 100644 --- a/blazor/toast/style.md +++ b/blazor/toast/style.md @@ -1,7 +1,7 @@ --- layout: post title: Style and appearance in Blazor Toast Component | Syncfusion -description: Check out and learn about style and appearance in Syncfusion Blazor Toast component. +description: Check out and learn here all about style and appearance in Syncfusion Blazor Toast component and more. platform: Blazor control: Toast documentation: ug From 695dac61aa42bb7f06b232827b2e719382fff173 Mon Sep 17 00:00:00 2001 From: Ashwini-SF5049 Date: Fri, 10 Oct 2025 11:51:27 +0530 Subject: [PATCH 15/30] 983104: Updated --- blazor/toast/action-buttons.md | 26 +- blazor/toast/animation.md | 116 ++++--- blazor/toast/config.md | 306 +++++++++--------- blazor/toast/events.md | 78 ++--- blazor/toast/getting-started-webapp.md | 143 ++++---- blazor/toast/getting-started.md | 107 +++--- blazor/toast/how-to/access-specific-toast.md | 84 +++-- blazor/toast/how-to/add-dynamic-template.md | 34 +- .../change-toast-content-dynamically.md | 19 +- .../how-to/close-the-toast-with-click-tap.md | 26 +- .../prevent-toast-close-with-mobile-swipe.md | 52 ++- .../how-to/show-different-types-of-toast.md | 53 +-- ...ow-multiple-toasts-in-various-positions.md | 33 +- blazor/toast/position.md | 57 ++-- blazor/toast/style.md | 75 +++-- blazor/toast/template.md | 147 +++------ blazor/toast/timeout.md | 72 +++-- 17 files changed, 697 insertions(+), 731 deletions(-) diff --git a/blazor/toast/action-buttons.md b/blazor/toast/action-buttons.md index 7f5730810f..318668ca63 100644 --- a/blazor/toast/action-buttons.md +++ b/blazor/toast/action-buttons.md @@ -9,26 +9,27 @@ documentation: ug # Action Buttons in Blazor Toast Component -Add action buttons to the Toast component by defining the ToastButtons collection with one or more ToastButton items. Each button can include its own OnClick callback to perform actions such as dismissing the toast or triggering custom logic. +Add action buttons to the Blazor Toast component by defining the **ToastButtons** collection with one or more **ToastButton** items. Each button can include its own **OnClick** callback to perform actions such as dismissing the toast or triggering custom logic. -In the following example, toast buttons are configured using the ToastButtons collection, and both buttons invoke an OnClick handler to hide the toast. +For more details, see: +- Blazor Toast overview: https://blazor.syncfusion.com/documentation/toast/ +- Toast events: https://blazor.syncfusion.com/documentation/toast/events/ ```cshtml - @using Syncfusion.Blazor.Buttons @using Syncfusion.Blazor.Notifications - - + +
- Show Toast + Show Toast
@@ -42,32 +43,27 @@ In the following example, toast buttons are configured using the ToastButtons co margin: 0 10px 0 0; width: 60px; } - - #elementToastTime .e-toast-message { - padding: 10px; - } @code { - SfToast ToastObj; + private SfToast ToastObj; private string ToastContent { get; set; } = "Thanks for the update!"; private async Task ShowToast() { - await this.ToastObj.ShowAsync(); + await ToastObj.ShowAsync(); } private async Task HideToast() { - await this.ToastObj.HideAsync(); + await ToastObj.HideAsync(); } } - ``` ![Blazor Toast with Action button](./images/blazor-toast-action-button.png) ## See Also -* [Configuring options](./config) \ No newline at end of file +- [Configuring options](./config) \ No newline at end of file diff --git a/blazor/toast/animation.md b/blazor/toast/animation.md index ccf26814c3..bbf8076e64 100644 --- a/blazor/toast/animation.md +++ b/blazor/toast/animation.md @@ -9,17 +9,22 @@ documentation: ug # Animation in Blazor Toast Component -The Blazor Toast component supports configurable animations for both showing and hiding notifications through ToastAnimationSettings, which contains ToastShowAnimationSettings and ToastHideAnimationSettings. Animation effects are selected from the ToastEffect enum. By default, the toast uses FadeIn for showing and FadeOut for hiding. +The Blazor Toast component supports configurable animations for both showing and hiding notifications through **ToastAnimationSettings**, which contains **ToastShowAnimationSettings** and **ToastHideAnimationSettings**. Animation effects are selected from the **ToastEffect** enum. By default, the toast uses FadeIn for showing and FadeOut for hiding. + +For more details, see: +- Blazor Toast overview: https://blazor.syncfusion.com/documentation/toast/ +- Toast events: https://blazor.syncfusion.com/documentation/toast/events/ +- SfToast API: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.SfToast.html +- ToastEffect enum: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.ToastEffect.html The following example demonstrates several animation effects that can be applied to the Toast component. ```cshtml - @using Syncfusion.Blazor.Buttons @using Syncfusion.Blazor.DropDowns @using Syncfusion.Blazor.Notifications - + @@ -31,82 +36,68 @@ The following example demonstrates several animation effects that can be applied
- +
- + -
- +
+
- +
- Show Toast + +
+ Show Toast +
- - @code { - SfToast ToastObj; + private SfToast ToastObj; private ToastEffect ShowAnimation = ToastEffect.FadeIn; private ToastEffect HideAnimation = ToastEffect.FadeOut; - private string ToastContent = "You have a new friend request yet to accept"; + private string ToastContent = "A new friend request is pending."; public class DropDownFields { - public string id { get; set; } - public string text { get; set; } + public string id { get; set; } = string.Empty; + public string text { get; set; } = string.Empty; } - private List Effects = new List() -{ - new DropDownFields(){ id= "FadeIn", text= "Fade In" }, - new DropDownFields(){ id= "FadeZoomIn", text= "Fade Zoom In" }, - new DropDownFields(){ id= "FadeZoomOut", text= "Fade Zoom Out" }, - new DropDownFields(){ id= "FlipLeftDownIn", text= "Flip Left Down In" }, - new DropDownFields(){ id= "FlipLeftDownOut", text= "Flip Left Down Out" }, - new DropDownFields(){ id= "FlipLeftUpIn", text= "Flip Left Up In" }, - new DropDownFields(){ id= "FlipRightDownIn", text= "Flip Right Up In" }, - new DropDownFields(){ id= "FlipRightDownOut", text= "Flip Right Down Out" }, - new DropDownFields(){ id= "FlipRightUpIn", text= "Flip Right Up In" }, - new DropDownFields(){ id= "FlipRightUpOut", text= "Flip Right Up Out" }, - new DropDownFields(){ id= "SlideBottomIn", text= "Slide Bottom In" }, - new DropDownFields(){ id= "SlideBottomOut", text= "Slide Bottom Out" }, - new DropDownFields(){ id= "SlideLeftIn", text= "Slide Left In" }, - new DropDownFields(){ id= "SlideLeftOut", text= "Slide Left Out" }, - new DropDownFields(){ id= "SlideRightIn", text= "Slide Right In" }, - new DropDownFields(){ id= "SlideRightOut", text= "Slide Right Out" }, - new DropDownFields(){ id= "SlideTopIn", text= "Slide Top In" }, - new DropDownFields(){ id= "ZoomIn", text= "Zoom In" }, - new DropDownFields(){ id= "ZoomOut", text= "Zoom Out" } + private List Effects = new List + { + new DropDownFields { id = "FadeIn", text = "Fade In" }, + new DropDownFields { id = "FadeZoomIn", text = "Fade Zoom In" }, + new DropDownFields { id = "FadeZoomOut", text = "Fade Zoom Out" }, + new DropDownFields { id = "FlipLeftDownIn", text = "Flip Left Down In" }, + new DropDownFields { id = "FlipLeftDownOut", text = "Flip Left Down Out" }, + new DropDownFields { id = "FlipLeftUpIn", text = "Flip Left Up In" }, + new DropDownFields { id = "FlipRightDownIn", text = "Flip Right Down In" }, + new DropDownFields { id = "FlipRightDownOut", text = "Flip Right Down Out" }, + new DropDownFields { id = "FlipRightUpIn", text = "Flip Right Up In" }, + new DropDownFields { id = "FlipRightUpOut", text = "Flip Right Up Out" }, + new DropDownFields { id = "SlideBottomIn", text = "Slide Bottom In" }, + new DropDownFields { id = "SlideBottomOut", text = "Slide Bottom Out" }, + new DropDownFields { id = "SlideLeftIn", text = "Slide Left In" }, + new DropDownFields { id = "SlideLeftOut", text = "Slide Left Out" }, + new DropDownFields { id = "SlideRightIn", text = "Slide Right In" }, + new DropDownFields { id = "SlideRightOut", text = "Slide Right Out" }, + new DropDownFields { id = "SlideTopIn", text = "Slide Top In" }, + new DropDownFields { id = "ZoomIn", text = "Zoom In" }, + new DropDownFields { id = "ZoomOut", text = "Zoom Out" } }; private async Task ShowToast() @@ -116,15 +107,18 @@ The following example demonstrates several animation effects that can be applied private void ShowAnimationChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs args) { - this.ShowAnimation = (ToastEffect)System.Enum.Parse(typeof(ToastEffect), args.Value); + ShowAnimation = (ToastEffect)System.Enum.Parse(typeof(ToastEffect), args.Value); StateHasChanged(); } private void HideAnimationChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs args) { - this.HideAnimation = (ToastEffect)System.Enum.Parse(typeof(ToastEffect), args.Value); + HideAnimation = (ToastEffect)System.Enum.Parse(typeof(ToastEffect), args.Value); StateHasChanged(); } } - -``` \ No newline at end of file +``` +Preview of the code snippet: +- Selecting animation types in the dropdowns configures the show and hide effects for the toast. +- Clicking Show Toast displays a toast at the bottom-right using the selected show animation; when dismissed, the selected hide animation is applied. +- Defaults are Fade In for showing and Fade Out for hiding. \ No newline at end of file diff --git a/blazor/toast/config.md b/blazor/toast/config.md index f9df575795..e01e7509f5 100644 --- a/blazor/toast/config.md +++ b/blazor/toast/config.md @@ -9,117 +9,125 @@ documentation: ug # Configuring options in Blazor Toast Component -This section describes how to customize the appearance and behavior of the Toast component using built-in APIs. +This section describes how to customize the appearance and behavior of the Blazor Toast component using built-in APIs. + +For reference: +- Blazor Toast overview: https://blazor.syncfusion.com/documentation/toast/ +- SfToast API: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.SfToast.html +- Toast events: https://blazor.syncfusion.com/documentation/toast/events/ +- Positioning: https://blazor.syncfusion.com/documentation/toast/position ## Title and content template -Create a toast with a notification message that includes a Title and content. These values adapt to different screen sizes. +Create a toast with a notification message that includes a title and content. These values adapt to different screen sizes. -N> Title and Content can be provided as plain text or HTML markup via string parameters. For richer layouts, use toast templates (for example, ToastTemplates or ContentTemplate) to define custom content. +N> Title and Content can be provided as plain text or HTML markup via string parameters. For richer layouts, use toast templates (for example, **ToastTemplates** or **ContentTemplate**) to define custom content. ```cshtml - @using Syncfusion.Blazor.Buttons @using Syncfusion.Blazor.Notifications - +
-
- Show Toast +
+ Show Toast
- - @code { - SfToast ToastObj; + private SfToast ToastObj; - private string ToastContent = "Conference Room 01 / Building 135 10:00 AM-10:30 AM"; + private string ToastContent = "Conference Room 01 / Building 135 — 10:00 AM–10:30 AM"; private async Task ShowToast() { - await this.ToastObj.ShowAsync(); + await ToastObj.ShowAsync(); } } - ``` ![Blazor Toast with Button](./images/blazor-toast-with-button.png) ## Specifying custom target -By default, the toast can be rendered in the document body. The target position can be changed for the toast rendering using the `Target` property. Based on the target, the `Position` will be updated. +By default, the toast is rendered in the document body. The target container can be changed using the **Target** property. Based on the target, the **ToastPosition** will be applied relative to that container. + +- Target property: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.SfToast.html#Syncfusion_Blazor_Notifications_SfToast_Target +- Position docs: https://blazor.syncfusion.com/documentation/toast/position ## Close button -By default, the `ShowCloseButton` is not enabled. It can be enabled by setting the true value. Before expiring the toast, use this button to close or destroy toasts manually. +By default, the **ShowCloseButton** property is disabled. Enable it to display a close button that dismisses the toast before it expires. + +- ShowCloseButton API: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.SfToast.html#Syncfusion_Blazor_Notifications_SfToast_ShowCloseButton ## Progress bar -By default, the `ShowProgressBar` is not enabled. If it is enabled, it can visually indicate how long it gets for the toast to expire. Based on the `Timeout` property, progress bar will appear. +By default, the **ShowProgressBar** property is disabled. When enabled, it visually indicates the remaining time until the toast expires, based on the **Timeout** property. + +- ShowProgressBar API: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.SfToast.html#Syncfusion_Blazor_Notifications_SfToast_ShowProgressBar +- Timeout API: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.SfToast.html#Syncfusion_Blazor_Notifications_SfToast_Timeout ### Progress bar direction -By default, the `ProgressDirection` is set to "Rtl" and it will appear from right to left direction. The progressDirection can be changed to "Ltr" to make it appear from left to right direction. +By default, **ProgressDirection** is "Rtl" and appears from right to left. Set **ProgressDirection** to "Ltr" to display from left to right. + +- ProgressDirection API: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.SfToast.html#Syncfusion_Blazor_Notifications_SfToast_ProgressDirection ## Newest on top -By default, the newly created toasts will append next with existing toasts. The sequence can be changed like inserting before the toast by enabling the `NewestOnTop`. +By default, newly created toasts are appended after existing toasts. Enable **NewestOnTop** to insert new toasts before existing toasts. -Here, the following sample demonstrates the combination of the `Target`, `ShowCloseButton`, `ShowProgressBar` and `NewestOnTop` properties in toast. +- NewestOnTop API: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.SfToast.html#Syncfusion_Blazor_Notifications_SfToast_NewestOnTop -```cshtml +The following sample demonstrates the combination of **Target**, **ShowCloseButton**, **ShowProgressBar**, and **NewestOnTop** properties. +```cshtml @using Syncfusion.Blazor.Buttons @using Syncfusion.Blazor.Notifications
- +
-
- Show Toast +
+ Show Toast
+

-
+
@code { - SfToast ToastObj; + private SfToast ToastObj; private string ToastContent = "
"; private async Task ShowToast() { - await this.ToastObj.ShowAsync(); + await ToastObj.ShowAsync(); } } - ``` ![Blazor Toast with ProgressBar](./images/blazor-toast-with-progressbar.png) ## Width and height -The dimensions of the toast can be set using the `Width` and `Height` properties. This will individually set all toasts. Different custom dimension toasts can be created. +Set toast dimensions using the **Width** and **Height** properties. Each toast can have custom dimensions. By default, the toast is rendered with 300px width and auto height. -By default, the toast can be rendered with `300px` width with `auto` height. +N> On mobile devices, the default toast width is 100% of the page. When **Width** is set to 100%, the toast occupies the full width of the viewport and is displayed at the top or bottom based on the **ToastPosition** Y setting. -N> On mobile devices, the default toast width is 100% of the page. When Width is set to 100%, the toast occupies the full width of the viewport and is displayed at the top or bottom based on the Position Y property. +Both **Width** and **Height** accept pixel values, percentages, or numbers. A numeric value is interpreted as pixels. -Both Width and Height accept pixel values, percentages, or numbers. A numeric value is interpreted as pixels. +- Width API: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.SfToast.html#Syncfusion_Blazor_Notifications_SfToast_Width +- Height API: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.SfToast.html#Syncfusion_Blazor_Notifications_SfToast_Height ```cshtml - @using Syncfusion.Blazor.Buttons @using Syncfusion.Blazor.Notifications
- +
-
- Show Toast +
+ Show Toast
-
+
-
- +
+ +
-
- +
+ +
-
- +
+ +
+

-
+
@code { - SfToast ToastObj; + private SfToast ToastObj; private string Width { get; set; } = "400"; private string Height { get; set; } = "120"; private string PositionY { get; set; } = "Bottom"; - private string RadioBottomChecked { get; set; } = "Global"; - private string RadioTopChecked { get; set; } = "Target"; - private string Title { get; set; } = "Matt sent you a friend request"; - private string ToastContent { get; set; } = "You have a new friend request yet to accept"; + private string Title { get; set; } = "Notification received"; + private string ToastContent { get; set; } = "A new item is pending review."; private async Task ShowToast() { - await this.ToastObj.ShowAsync(); + await ToastObj.ShowAsync(); } private async Task CheckBoxChange(Syncfusion.Blazor.Buttons.ChangeEventArgs e) { + await ToastObj.HideAsync(); + if (e.Checked) { - await ToastObj.HideAsync(); - this.Width = "100%"; - this.Title = ""; - this.ToastContent = "
Take a look at our next generation Javascript LEARN MORE
"; - StateHasChanged(); + Width = "100%"; + Title = string.Empty; + ToastContent = "
Explore the next generation JavaScript library. Learn more
"; } else { - await ToastObj.HideAsync(); - this.Width = "300"; - this.Title = "Matt sent you a friend request"; - this.ToastContent = "You have a new friend request yet to accept"; - StateHasChanged(); + Width = "300"; + Title = "Notification received"; + ToastContent = "A new item is pending review."; } + + StateHasChanged(); } private async Task RadioButtonChange(Syncfusion.Blazor.Buttons.ChangeArgs e) { - if (e.Value == "Target") - { - this.PositionY = "Top"; - await ToastObj.HideAsync(); - StateHasChanged(); - } - else if (e.Value == "Global") - { - this.PositionY = "Bottom"; - await ToastObj.HideAsync(); - StateHasChanged(); - } + PositionY = e.Value == "Top" ? "Top" : "Bottom"; + await ToastObj.HideAsync(); + StateHasChanged(); } } - ``` ![Changing Blazor Toast Size](./images/blazor-toast-size.png) ## Show or hide toast using service -Initialize a single toast instance and reuse it across the application by creating a service. The following steps show how to create a service to display toast notifications from any page. +Initialize a single toast instance and reuse it across an application by creating a service. The following steps show how to create a service to display toast notifications from any page. + +- Creating a toast service (DI): https://learn.microsoft.com/aspnet/core/blazor/fundamentals/dependency-injection **Step 1**: Create a toast service to inject into pages to show toast messages from anywhere. In this example, Title and Content are passed to display the toast message. -```c# +```csharp public class ToastOption { public string Title { get; set; } @@ -290,10 +309,11 @@ public class ToastOption public class ToastService { public event Action ShowToastTrigger; + public void ShowToast(ToastOption options) { - //Invoke ToastComponent to update and show the toast with messages - this.ShowToastTrigger.Invoke(options); + // Invoke ToastComponent to update and show the toast with messages + ShowToastTrigger?.Invoke(options); } } ``` @@ -301,8 +321,7 @@ public class ToastService **Step 2**: Add the ToastService to the services collection in Program.cs. {% tabs %} -{% highlight c# tabtitle="~/Program.cs" hl_lines="13 14" %} - +{% highlight c# tabtitle="~/Program.cs" hl_lines="13" %} using BlazorApp.Data; using Microsoft.AspNetCore.Components; using Microsoft.AspNetCore.Components.Web; @@ -324,7 +343,6 @@ var app = builder.Build(); if (!app.Environment.IsDevelopment()) { app.UseExceptionHandler("/Error"); - // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts. app.UseHsts(); } @@ -338,7 +356,6 @@ app.MapBlazorHub(); app.MapFallbackToPage("/_Host"); app.Run(); - {% endhighlight %} {% endtabs %} @@ -346,27 +363,19 @@ app.Run(); {% tabs %} {% highlight cshtml tabtitle="ToastComponent.razor" hl_lines="13 14" %} - -@using Syncfusion.Blazor.Notifications; +@using Syncfusion.Blazor.Notifications @inject ToastService ToastService - - - - @Options.Title - - - @Options.Content - - - - - -@code{ - - SfToast Toast; + + + @Options.Title + @Options.Content + + + - private bool IsToastVisible { get; set; } = false; +@code { + private SfToast Toast; private ToastOption Options = new ToastOption(); @@ -374,19 +383,17 @@ app.Run(); { ToastService.ShowToastTrigger += (ToastOption options) => { - InvokeAsync(() => + InvokeAsync(async () => { - this.Options.Title = options.Title; - this.Options.Content = options.Content; - this.IsToastVisible = true; - this.StateHasChanged(); - this.Toast.ShowAsync(); + Options.Title = options.Title; + Options.Content = options.Content; + StateHasChanged(); + await Toast.ShowAsync(); }); }; base.OnInitialized(); } -} - +} {% endhighlight %} {% endtabs %} @@ -394,7 +401,6 @@ app.Run(); {% tabs %} {% highlight cshtml tabtitle="MainLayout.razor" hl_lines="21" %} - @inherits LayoutComponentBase @using BlazorApp.Components; @@ -407,7 +413,7 @@ app.Run();
- About + About
@@ -415,8 +421,8 @@ app.Run();
- + {% endhighlight %} {% endtabs %} @@ -424,24 +430,22 @@ app.Run(); {% tabs %} {% highlight cshtml tabtitle="RAZOR" hl_lines="3 10 11 12 13 14" %} - @page "/" -@using BlazorApp.Components -@inject ToastService ToastService - - - -@code { - private void ShowToast() - { - this.ToastService.ShowToast(new ToastOption() - { - Title = "Toast Title", +@using BlazorApp.Components +@inject ToastService ToastService + + + +@code { + private void ShowToast() + { + ToastService.ShowToast(new ToastOption + { + Title = "Toast Title", Content = "Toast content" - }); - } -} - + }); + } +} {% endhighlight %} {% endtabs %} diff --git a/blazor/toast/events.md b/blazor/toast/events.md index 559971cf4c..f9efd1c302 100644 --- a/blazor/toast/events.md +++ b/blazor/toast/events.md @@ -9,130 +9,130 @@ documentation: ug # Events in Blazor Toast Component -This section explains the list of events of the Toast component which will be triggered for appropriate Toast actions. +This section explains the list of events of the **Toast** component that are triggered for corresponding Toast actions in a Blazor application. ## Created -The Created event occurs after the Toast component is initialized. This is suitable for one-time setup or initial configuration. Refer to the ToastEvents.Created API for details. +The **Created** event occurs after the **Toast** component is initialized. This is suitable for one-time setup or initial configuration. Refer to the [ToastEvents.Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.ToastEvents.html#Syncfusion_Blazor_Notifications_ToastEvents_Created) API for details. ```cshtml - @using Syncfusion.Blazor.Notifications - + -@code{ - public void CreatedHandler(Object args) +@code { + public void CreatedHandler(object args) { - // Here you can customize your code + // Example customization point: runs once after component initialization. } } - ``` +Preview of the code snippet: After the Toast component initializes, the CreatedHandler method executes once. No visual change is produced by the handler itself unless additional logic is included. + ## Destroyed -The Destroyed event occurs when the Toast component is disposed. Use this event to release resources or unsubscribe from external services. Refer to the ToastEvents.Destroyed API for details. +The **Destroyed** event occurs when the **Toast** component is disposed. Use this event to release resources or unsubscribe from external services. Refer to the [ToastEvents.Destroyed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.ToastEvents.html#Syncfusion_Blazor_Notifications_ToastEvents_Destroyed) API for details. ```cshtml - @using Syncfusion.Blazor.Notifications - + -@code{ - public void DestroyedHandler(Object args) +@code { + public void DestroyedHandler(object args) { - // Here you can customize your code + // Example cleanup point: release resources, unsubscribe handlers. } } - ``` +Preview of the code snippet: When the Toast component is disposed (for example, navigation away or component removal), DestroyedHandler executes to perform cleanup. No visual output is produced. + ## Opened -The Opened event occurs after the toast is displayed in the target container. It is useful for post-render actions, such as focusing elements or starting animations. See ToastOpenArgs for available data. +The **Opened** event occurs after the Toast is displayed in the target container. It is useful for post-render actions, such as focusing elements or starting animations. See [ToastOpenArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.ToastOpenArgs.html) for available data. ```cshtml - @using Syncfusion.Blazor.Notifications - + -@code{ +@code { public void OpenedHandler(ToastOpenArgs args) { - // Here you can customize your code + // Runs after the toast becomes visible; safe for post-render logic. } } - ``` +Preview of the code snippet: After a toast appears, OpenedHandler is invoked. The UI shows the toast; any additional actions (focus, animation) occur post-render. + ## OnOpen -The OnOpen event occurs before the toast is displayed. Use it to modify content or settings just before render. See ToastBeforeOpenArgs for properties available during this phase. +The **OnOpen** event occurs before the Toast is displayed. Use it to modify content or settings just before render. See [ToastBeforeOpenArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.ToastBeforeOpenArgs.html) for properties available during this phase. ```cshtml - @using Syncfusion.Blazor.Notifications - + -@code{ +@code { public void OnOpenHandler(ToastBeforeOpenArgs args) { - // Here you can customize your code + // Runs before the toast is shown; suitable for last-moment adjustments. } } - ``` +Preview of the code snippet: Before the toast is shown, OnOpenHandler executes, allowing configuration changes. The toast then renders with any applied adjustments. + ## Closed -The Closed event occurs after the toast is hidden. This event is useful for cleanup tasks or logging. See ToastCloseArgs for additional context. +The **Closed** event occurs after the Toast is hidden. This event is useful for cleanup tasks or logging. See [ToastCloseArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.ToastCloseArgs.html) for additional context. ```cshtml - @using Syncfusion.Blazor.Notifications - + -@code{ +@code { public void ClosedHandler(ToastCloseArgs args) { - // Here you can customize your code + // Runs after the toast is hidden; suitable for cleanup or logging. } } - ``` +Preview of the code snippet: After the toast is dismissed (auto or manual), ClosedHandler runs. No visual output is produced by the handler itself. + ## OnClick -The OnClick event occurs when the toast is clicked. Handle this event to perform actions such as navigation, analytics, or dismissing a toast. See ToastClickEventArgs for click details. +The **OnClick** event occurs when the Toast is clicked. Handle this event to perform actions such as navigation, analytics, or dismissing a toast. See [ToastClickEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.ToastClickEventArgs.html) for click details. ```cshtml - @using Syncfusion.Blazor.Notifications - + -@code{ +@code { public void OnClickHandler(ToastClickEventArgs args) { - // Here you can customize your code + // Runs on toast click; handle navigation, analytics, or dismissal. } } +``` -``` \ No newline at end of file +Preview of the code snippet: When the visible toast is clicked, OnClickHandler executes. The UI reflects any actions implemented in the handler (for example, dismissing the toast). diff --git a/blazor/toast/getting-started-webapp.md b/blazor/toast/getting-started-webapp.md index 466ccf332a..e5f2df9a7a 100644 --- a/blazor/toast/getting-started-webapp.md +++ b/blazor/toast/getting-started-webapp.md @@ -17,7 +17,7 @@ This section explains how to add the [Blazor Toast](https://www.syncfusion.com/b ## Prerequisites -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +- [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) ## Create a new Blazor Web App in Visual Studio @@ -27,20 +27,16 @@ Configure the appropriate [interactive render mode](https://learn.microsoft.com/ ## Install Syncfusion® Blazor Notifications and Themes NuGet in the App -To add the **Blazor Toast** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Notifications](https://www.nuget.org/packages/Syncfusion.Blazor.Notifications) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor Toast** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then install [Syncfusion.Blazor.Notifications](https://www.nuget.org/packages/Syncfusion.Blazor.Notifications) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If using `WebAssembly` or `Auto` render modes in a Blazor Web App, install the Syncfusion® Blazor NuGet packages in the Client project. For `Server` render mode, install them in the Server project. +For `WebAssembly` or `Auto` render modes in a Blazor Web App, install the Syncfusion® Blazor NuGet packages in the Client project. For `Server` render mode, install them in the Server project. -Alternatively, run the following Package Manager commands: - -{% tabs %} -{% highlight C# tabtitle="Package Manager" %} +Alternatively, execute the following Package Manager commands: +```powershell Install-Package Syncfusion.Blazor.Notifications -Version {{ site.releaseversion }} Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} - -{% endhighlight %} -{% endtabs %} +``` N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the full list of packages and components. @@ -50,7 +46,7 @@ N> Syncfusion® Blazor components are availa ## Prerequisites -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +- [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) ## Create a new Blazor Web App in Visual Studio Code @@ -58,39 +54,29 @@ Create a **Blazor Web App** using Visual Studio Code via [Microsoft templates](h Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) when creating the Blazor Web App. -For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. - -{% tabs %} -{% highlight c# tabtitle="Blazor Web App" %} +For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands: +```bash dotnet new blazor -o BlazorWebApp -int Auto cd BlazorWebApp cd BlazorWebApp.Client - -{% endhighlight %} -{% endtabs %} +``` N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). ## Install Syncfusion® Blazor Notifications and Themes NuGet in the App -If using `WebAssembly` or `Auto` render modes in a Blazor Web App, install the Syncfusion® Blazor NuGet packages in the Client project. - -* Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you are in the project directory that contains the `.csproj` file. -* Run the following commands to install the [Syncfusion.Blazor.Notifications](https://www.nuget.org/packages/Syncfusion.Blazor.Notifications) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and restore dependencies. - -{% tabs %} +For `WebAssembly` or `Auto` render modes in a Blazor Web App, install the Syncfusion® Blazor NuGet packages in the Client project. -{% highlight c# tabtitle="Package Manager" %} +- Open the integrated terminal in Visual Studio Code. +- Navigate to the project directory that contains the `.csproj` file. +- Run the following commands to install [Syncfusion.Blazor.Notifications](https://www.nuget.org/packages/Syncfusion.Blazor.Notifications) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) and restore dependencies. +```bash dotnet add package Syncfusion.Blazor.Notifications -v {{ site.releaseversion }} dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} dotnet restore - -{% endhighlight %} - -{% endtabs %} +``` N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the full list of packages and components. @@ -102,29 +88,23 @@ N> Syncfusion® Blazor components are availa | Interactive Render Mode | Description | | -- | -- | -| WebAssembly or Auto | Open **~/_Imports.razor** file from the Client project.| -| Server | Open **~/_Imports.razor** file, which is located in the `Components` folder.| - -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Notifications` namespaces. +| WebAssembly or Auto | Open **~/_Imports.razor** file from the Client project. | +| Server | Open **~/_Imports.razor** file located in the `Components` folder. | -{% tabs %} -{% highlight C# tabtitle="~/_Imports.razor" %} +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Notifications` namespaces: +```razor @using Syncfusion.Blazor @using Syncfusion.Blazor.Notifications +``` -{% endhighlight %} -{% endtabs %} - -Now, register the Syncfusion® Blazor service in the **~/Program.cs** file of your Blazor Web App. +Register the Syncfusion® Blazor service in the **~/Program.cs** file of the Blazor Web App. -If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in both Program.cs files (Server and Client) in your Blazor Web App. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in both Program.cs files (Server and Client). -{% tabs %} -{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} +Server: -... -... +```csharp using Syncfusion.Blazor; var builder = WebApplication.CreateBuilder(args); @@ -133,31 +113,26 @@ var builder = WebApplication.CreateBuilder(args); builder.Services.AddRazorComponents() .AddInteractiveServerComponents() .AddInteractiveWebAssemblyComponents(); + builder.Services.AddSyncfusionBlazor(); var app = builder.Build(); -.... +``` -{% endhighlight %} -{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} +Client: -... +```csharp using Syncfusion.Blazor; var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.Services.AddSyncfusionBlazor(); await builder.Build().RunAsync(); - -{% endhighlight %} -{% endtabs %} +``` If the **Interactive Render Mode** is set to `Server`, the project contains a single **~/Program.cs** file. In this case, register the Syncfusion® Blazor service only in that file. -{% tabs %} -{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} - -... +```csharp using Syncfusion.Blazor; var builder = WebApplication.CreateBuilder(args); @@ -165,26 +140,24 @@ var builder = WebApplication.CreateBuilder(args); // Add services to the container. builder.Services.AddRazorComponents() .AddInteractiveServerComponents(); + builder.Services.AddSyncfusionBlazor(); var app = builder.Build(); -.... - -{% endhighlight %} -{% endtabs %} +``` ## Add stylesheet and script resources -The theme stylesheet and script are provided via NuGet as [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file, as shown below: +The theme stylesheet and script are provided via NuGet as [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file: ```html - .... + - .... + ``` @@ -193,7 +166,7 @@ N> See the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearanc ## Add Syncfusion® Blazor Toast component -Add the Syncfusion® Blazor Toast component to a page in the **~/Pages** folder. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `~Pages/.razor` component as follows: +Add the Syncfusion® Blazor Toast component to a page in the **~/Pages** folder. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `~/Pages/*.razor` component as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | @@ -204,29 +177,28 @@ Add the Syncfusion® Blazor Toast component N> If the **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto`, `WebAssembly`, or `Server`, the render mode is configured in the `App.razor` file by default. -{% tabs %} -{% highlight razor %} +Render mode directive: -@* desired render mode define here *@ +```razor +@* Desired render mode defined here *@ @rendermode InteractiveAuto +``` -{% endhighlight %} -{% endtabs %} - -{% tabs %} -{% highlight cshtml %} +Toast component example: +```razor
-
+
+ + @code { - SfToast ToastObj; + private SfToast ToastObj; private string ToastPosition = "Right"; private string ToastContent = "Conference Room 01 / Building 135 10:00 AM-10:30 AM"; + private async Task ShowOnClick() { - await this.ToastObj.ShowAsync(); + await ToastObj.ShowAsync(); } + private async Task HideOnClick() { - await this.ToastObj.HideAsync("All"); + await ToastObj.HideAsync("All"); } } +``` -{% endhighlight %} -{% endtabs %} - -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor Toast component in the default web browser. +Use Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor Toast component renders in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/VDrzNiKXJRibajXZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toast Component](./images/blazor-toast.png)" %} @@ -263,9 +236,9 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- ## See Also -* [Show or hide toast from any page using service in Blazor](https://support.syncfusion.com/kb/article/11734/show-or-hide-toast-from-any-page-using-service-in-blazor) -* [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](../getting-started/blazor-webassembly-dotnet-cli) -* [Getting Started with Syncfusion® Blazor for server-side in Visual Studio](../getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](../getting-started/blazor-server-side-dotnet-cli) +- [Show or hide toast from any page using service in Blazor](https://support.syncfusion.com/kb/article/11734/show-or-hide-toast-from-any-page-using-service-in-blazor) +- [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](../getting-started/blazor-webassembly-dotnet-cli) +- [Getting Started with Syncfusion® Blazor for server-side in Visual Studio](../getting-started/blazor-server-side-visual-studio) +- [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](../getting-started/blazor-server-side-dotnet-cli) -N> You can also explore our [Blazor Toast example](https://blazor.syncfusion.com/demos/toast/default-functionalities?theme=bootstrap5) that demonstrates how to render and configure the toast. \ No newline at end of file +N> An interactive [Blazor Toast example](https://blazor.syncfusion.com/demos/toast/default-functionalities?theme=bootstrap5) demonstrates how to render and configure the Toast component. \ No newline at end of file diff --git a/blazor/toast/getting-started.md b/blazor/toast/getting-started.md index 0a980e9ee3..ec81010f6c 100644 --- a/blazor/toast/getting-started.md +++ b/blazor/toast/getting-started.md @@ -11,10 +11,11 @@ documentation: ug This section explains how to add the [Blazor Toast](https://www.syncfusion.com/blazor-components/blazor-toast) component to a Blazor WebAssembly app using Visual Studio or Visual Studio Code. -To get started quickly with the Blazor Toast component, watch the following video or explore the sample on [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Toast). - +A quick-start video and a sample repository are available: +- Video: {% youtube "youtube:https://www.youtube.com/watch?v=tMa7JvcfNcY"%} +- Sample on [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Toast) {% tabcontents %} @@ -22,24 +23,20 @@ To get started quickly with the Blazor Toast component, watch the following vide ## Prerequisites -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +- [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) ## Create a new Blazor App in Visual Studio -Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a Blazor WebAssembly app using Visual Studio via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ## Install Syncfusion® Blazor Notifications and Themes NuGet in the App -To add the **Blazor Toast** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Notifications](https://www.nuget.org/packages/Syncfusion.Blazor.Notifications) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following Package Manager commands: - -{% tabs %} -{% highlight C# tabtitle="Package Manager" %} +Install [Syncfusion.Blazor.Notifications](https://www.nuget.org/packages/Syncfusion.Blazor.Notifications) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) using the NuGet Package Manager (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), or run the following commands: +```powershell Install-Package Syncfusion.Blazor.Notifications -Version {{ site.releaseversion }} Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} - -{% endhighlight %} -{% endtabs %} +``` N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. @@ -49,42 +46,28 @@ N> Syncfusion® Blazor components are availa ## Prerequisites -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +- [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) ## Create a new Blazor App in Visual Studio Code -Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a Blazor WebAssembly app using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Alternatively, create a WebAssembly application using the following commands in the integrated terminal (Ctrl+`). - -{% tabs %} - -{% highlight c# tabtitle="Blazor WASM App" %} +Alternatively, create a WebAssembly application using the following commands in the integrated terminal: +```bash dotnet new blazorwasm -o BlazorApp cd BlazorApp - -{% endhighlight %} - -{% endtabs %} +``` ## Install Syncfusion® Blazor Notifications and Themes NuGet in the App -* Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you are in the project root directory where the `.csproj` file is located. -* Run the following commands to install the [Syncfusion.Blazor.Notifications](https://www.nuget.org/packages/Syncfusion.Blazor.Notifications) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) packages and restore dependencies. - -{% tabs %} - -{% highlight c# tabtitle="Package Manager" %} +Use the integrated terminal in Visual Studio Code from the project root (where the `.csproj` file is located), then run: +```bash dotnet add package Syncfusion.Blazor.Notifications -v {{ site.releaseversion }} dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} dotnet restore - -{% endhighlight %} - -{% endtabs %} +``` N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. @@ -94,22 +77,16 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Notifications` namespaces. - -{% tabs %} -{% highlight razor tabtitle="~/_Imports.razor" %} +Open `~/_Imports.razor` and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Notifications` namespaces: +```razor @using Syncfusion.Blazor @using Syncfusion.Blazor.Notifications +``` -{% endhighlight %} -{% endtabs %} - -Now, register the Syncfusion® Blazor service in the **~/Program.cs** file of the Blazor WebAssembly app. - -{% tabs %} -{% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} +Register the Syncfusion® Blazor service in `~/Program.cs` of the Blazor WebAssembly app: +```csharp using Microsoft.AspNetCore.Components.Web; using Microsoft.AspNetCore.Components.WebAssembly.Hosting; using Syncfusion.Blazor; @@ -122,42 +99,39 @@ builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder. builder.Services.AddSyncfusionBlazor(); await builder.Build().RunAsync(); -.... - -{% endhighlight %} -{% endtabs %} +``` ## Add stylesheet and script resources -The theme stylesheet and script are provided via NuGet as [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of **~/index.html**. +The theme stylesheet and script are provided via NuGet as [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of `~/wwwroot/index.html`: ```html - .... + ``` + N> See the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover options for referencing themes ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)). Also, see [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) for different approaches to add script references in a Blazor application. ## Add Blazor Toast component -Add the Syncfusion® Blazor Toast component to **~/Pages/Index.razor**. - -{% tabs %} -{% highlight cshtml %} +Add the Syncfusion® Blazor Toast component to `~/Pages/Index.razor`: +```razor
-
+
+ + @code { - SfToast ToastObj; + private SfToast ToastObj; private string ToastPosition = "Right"; private string ToastContent = "Conference Room 01 / Building 135 10:00 AM-10:30 AM"; + private async Task ShowOnClick() { - await this.ToastObj.ShowAsync(); + await ToastObj.ShowAsync(); } + private async Task HideOnClick() { - await this.ToastObj.HideAsync("All"); + await ToastObj.HideAsync("All"); } } +``` -{% endhighlight %} -{% endtabs %} - -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor Toast component in the default web browser. +Launch the application with Ctrl+F5 (Windows) or ⌘+F5 (macOS). The Syncfusion® Blazor Toast component renders in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/VDrzNiKXJRibajXZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toast Component](./images/blazor-toast.png)" %} ## See Also -* [Show or hide toast from any page using service in Blazor](https://support.syncfusion.com/kb/article/11734/show-or-hide-toast-from-any-page-using-service-in-blazor) -* [Getting Started with Syncfusion® Blazor Web Assembly App in Visual Studio or .NET CLI](../getting-started/blazor-webassembly-dotnet-cli) -* [Getting Started with Syncfusion® Blazor Web App in Visual Studio or .NET CLI](../getting-started/blazor-server-side-visual-studio) +- [Show or hide toast from any page using service in Blazor](https://support.syncfusion.com/kb/article/11734/show-or-hide-toast-from-any-page-using-service-in-blazor) +- [Getting Started with Syncfusion® Blazor WebAssembly App in Visual Studio or .NET CLI](../getting-started/blazor-webassembly-dotnet-cli) +- [Getting Started with Syncfusion® Blazor Web App in Visual Studio or .NET CLI](../getting-started/blazor-server-side-visual-studio) -N> You can also explore the [Blazor Toast example](https://blazor.syncfusion.com/demos/toast/default-functionalities?theme=bootstrap5), which demonstrates how to render and configure the toast. \ No newline at end of file +N> An interactive [Blazor Toast example](https://blazor.syncfusion.com/demos/toast/default-functionalities?theme=bootstrap5) demonstrates how to render and configure the Toast component. \ No newline at end of file diff --git a/blazor/toast/how-to/access-specific-toast.md b/blazor/toast/how-to/access-specific-toast.md index 6279841135..368becaeb1 100644 --- a/blazor/toast/how-to/access-specific-toast.md +++ b/blazor/toast/how-to/access-specific-toast.md @@ -9,23 +9,32 @@ documentation: ug # Access specific toast in Blazor Toast Component -In the Toast component, an individual toast can be addressed by assigning a unique Key value in the ToastModel when showing the toast. To close a specific toast, pass the same Key to the HideAsync method. The assigned Key can be retrieved from the Opened and Closed events through the event arguments. +This section describes how to address an individual toast instance in the Syncfusion Blazor Toast component by assigning a unique key when showing a toast, and how to close that specific toast programmatically by passing the same key to the hide method. -In the following example, each toast is closed by calling the HideAsync method with the Key value returned in the Opened event. +A unique identifier can be provided via the Toast model’s **Key** when calling **ShowAsync**. The same key can be supplied to **HideAsync** to close a specific toast. The assigned key is available in the **Opened** and **Closed** events through their event arguments for event-driven control. For more information, refer to: +- SfToast component: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.SfToast.html +- ToastModel: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.ToastModel.html ```cshtml - @using Syncfusion.Blazor.Notifications
- - + + +
-
- - - +
+ + +
@@ -37,32 +46,51 @@ In the following example, each toast is closed by calling the HideAsync method w } -@code{ - SfToast toast; +@code { + private SfToast toast; - private string target = "#target"; - private string title = "This is Toast Title"; + private string target = "#target"; + private string title = "This is Toast Title"; - private int key { get; set; } = 0; - private async Task showOnclick() - { - await this.toast.ShowAsync( new ToastModel {Key = key , Content = key.ToString() , Timeout = 10000 }); - key++; - } + // Monotonically increasing key for each toast instance created via ShowAsync + private int key = 0; - private async Task OnOpen(ToastOpenArgs args) - { - await this.toast.HideAsync(args.Key); - } + // Stores the last created key for demonstration of targeted hide + private int? lastCreatedKey = null; - private async Task HideOnclick() + private async Task ShowOnClick() { - await this.toast.HideAsync(); + await toast.ShowAsync(new ToastModel { Key = key, Content = $"Toast Key: {key}", Timeout = 10000 }); + lastCreatedKey = key; + key++; } - private async Task hideOnclick() + + // Event-driven example: close the toast immediately after it opens using the event's key + private async Task OnOpened(ToastOpenArgs args) { - await this.toast.HideAsync("All"); + // Demonstrates closing a specific toast via its assigned key + await toast.HideAsync(args.Key); + } + + // Hides all toasts + private async Task HideAllOnClick() + { + await toast.HideAsync(); + } + + // Hides the most recently created toast (if tracked) + private async Task HideOneOnClick() + { + if (lastCreatedKey.HasValue) + { + await toast.HideAsync(lastCreatedKey.Value); + } } } +``` -``` \ No newline at end of file +Preview of the code snippet: +- Clicking “Show Toast” displays a toast with the content “Toast Key: N”, where N is the unique key assigned to that instance. +- Because the Opened event immediately calls HideAsync with the event’s key, each toast closes as soon as it opens (demonstrating targeted close). +- Clicking “Hide All” closes all active toasts. +- Clicking “Hide Last Created” attempts to close only the most recently created toast using the stored key. diff --git a/blazor/toast/how-to/add-dynamic-template.md b/blazor/toast/how-to/add-dynamic-template.md index e5ad41da38..ac2ec1aa69 100644 --- a/blazor/toast/how-to/add-dynamic-template.md +++ b/blazor/toast/how-to/add-dynamic-template.md @@ -9,10 +9,14 @@ documentation: ug # Add dynamic template in Blazor Toast Component -The Blazor Toast component supports rendering dynamic templates for individual notifications. Provide a ContentTemplate in the ToastModel passed to ShowAsync to display a unique template for each toast. Toast properties can also be customized per toast when invoking ShowAsync, enabling different content and appearance across multiple toasts shown in sequence. +The Syncfusion Blazor Toast component supports rendering dynamic templates for individual notifications. Provide a **ContentTemplate** in the **ToastModel** passed to **ShowAsync** to display a unique template for each toast. Toast properties can also be customized per toast when invoking **ShowAsync**, enabling different content and appearance across multiple toasts shown in sequence. -```cshtml +- Component: SfToast — https://blazor.syncfusion.com/documentation/api/syncfusion.blazor.notifications/sftoast +- Model: ToastModel — https://blazor.syncfusion.com/documentation/api/syncfusion.blazor.notifications/toastmodel +- Method: ShowAsync — see methods on SfToast page above +- Position: ToastPosition — https://blazor.syncfusion.com/documentation/api/syncfusion.blazor.notifications/toastposition +```cshtml @using Syncfusion.Blazor.Buttons @using Syncfusion.Blazor.Notifications @@ -32,19 +36,27 @@ The Blazor Toast component supports rendering dynamic templates for individual n private int ToastFlag = 0; private ToastModel[] Messages = new ToastModel[] { - new ToastModel() { ContentTemplate = @

2 Mail has received

}, - new ToastModel() { ContentTemplate = @

User Guest Logged in

}, - new ToastModel() { ContentTemplate = @

Logging in as Guest

}, - new ToastModel() { ContentTemplate = @

Ticket has reserved

} + new ToastModel() { ContentTemplate = @

2 Mail has received

}, + new ToastModel() { ContentTemplate = @

User Guest Logged in

}, + new ToastModel() { ContentTemplate = @

Logging in as Guest

}, + new ToastModel() { ContentTemplate = @

Ticket has reserved

} }; private async Task ShowToast() { - // Delay mandatory to update the dynamically changed Toast properties + // Optional short delay ensures dynamically changed toast properties are applied before showing. await Task.Delay(100); - await this.ToastObj.ShowAsync(Messages[this.ToastFlag]); - this.ToastFlag = ((this.ToastFlag == Messages.Length - 1) ? 0 : (this.ToastFlag + 1)); + await ToastObj.ShowAsync(Messages[ToastFlag]); + ToastFlag = (ToastFlag == Messages.Length - 1) ? 0 : (ToastFlag + 1); } } - -``` \ No newline at end of file +``` + +Preview of the code snippet: +- Clicking the Show Toast button displays a toast in the bottom-right corner of the page. +- Each click cycles through the predefined dynamic templates, showing messages such as: + - “2 Mail has received” + - “User Guest Logged in” + - “Logging in as Guest” + - “Ticket has reserved” +- The toast position is set to Right-Bottom via ToastPosition. \ No newline at end of file diff --git a/blazor/toast/how-to/change-toast-content-dynamically.md b/blazor/toast/how-to/change-toast-content-dynamically.md index 224601e4b3..8d4d03b5f6 100644 --- a/blazor/toast/how-to/change-toast-content-dynamically.md +++ b/blazor/toast/how-to/change-toast-content-dynamically.md @@ -9,10 +9,14 @@ documentation: ug # Show toast content dynamically in Blazor Toast Component -The Blazor Toast component supports updating its content dynamically for newly displayed toasts. Update the bound Content value before invoking ShowAsync so that each toast reflects the latest content. If the content is changed immediately before showing a toast, a brief delay may be used to ensure the state update is applied prior to the ShowAsync call. +This page explains how to update toast content dynamically for newly displayed toasts in the Syncfusion Blazor Toast component. -```cshtml +The **SfToast** component supports updating its **Content** parameter dynamically. Set or update the bound **Content** value before calling **ShowAsync** so each newly displayed toast reflects the latest message. If the content is changed immediately prior to showing a toast, a brief delay can ensure the state is applied before invoking **ShowAsync**. + +- Component overview: https://blazor.syncfusion.com/documentation/toast/ +- API reference (SfToast): https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.SfToast.html +```cshtml @using Syncfusion.Blazor.Buttons @using Syncfusion.Blazor.Notifications @@ -30,8 +34,8 @@ The Blazor Toast component supports updating its content dynamically for newly d SfToast ToastObj; private int ToastFlag = 0; - private string ToastContent = ""; - private string[] Contents = new string[] { + private string ToastContent = string.Empty; + private readonly string[] Contents = new string[] { "Welcome User", "Upload in progress", "Upload success", @@ -48,5 +52,8 @@ The Blazor Toast component supports updating its content dynamically for newly d this.ToastFlag = ((this.ToastFlag != 5) ? (this.ToastFlag + 1) : 0); } } - -``` \ No newline at end of file +``` +Preview of the code snippet: +- Clicking the “Show Toast” button displays a toast at the bottom-right of the page. +- Each click cycles through the predefined messages (for example: “Welcome User”, “Upload in progress”, “Upload success”). +- The toast title is “Alert” and the body content reflects the latest value assigned to the **Content** parameter prior to calling **ShowAsync**. \ No newline at end of file diff --git a/blazor/toast/how-to/close-the-toast-with-click-tap.md b/blazor/toast/how-to/close-the-toast-with-click-tap.md index 569f9efef6..d9fb9d9500 100644 --- a/blazor/toast/how-to/close-the-toast-with-click-tap.md +++ b/blazor/toast/how-to/close-the-toast-with-click-tap.md @@ -9,16 +9,18 @@ documentation: ug # Close the toast with click/tap in Blazor Toast Component -By default, toasts automatically close based on the Timeout value. To close a toast when it is clicked or tapped, handle the OnClick event and set ClickToClose to true in the ToastClickEventArgs. To require user-initiated dismissal only, set Timeout to 0 to create a sticky toast and use click or tap to close it. +By default, toasts automatically close based on the **TimeOut** value. To close a toast when it is clicked or tapped, handle the **OnClick** event and set **ClickToClose** to true in the **ToastClickEventArgs**. To require user-initiated dismissal only, set **TimeOut** to 0 to create a sticky toast and use click or tap to close it. -The following sample demonstrates closing a toast through a click or tap action. +- Component overview: https://blazor.syncfusion.com/documentation/toast/ +- API reference (SfToast): https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.SfToast.html +- API reference (ToastEvents): https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.ToastEvents.html +- API reference (ToastClickEventArgs): https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.ToastClickEventArgs.html ```cshtml - @using Syncfusion.Blazor.Buttons @using Syncfusion.Blazor.Notifications - + @@ -33,8 +35,8 @@ The following sample demonstrates closing a toast through a click or tap action. SfToast ToastObj; private int ToastFlag = 0; - private string ToastContent = ""; - private string[] Contents = new string[] { + private string ToastContent = string.Empty; + private readonly string[] Contents = new string[] { "Welcome User", "Upload in progress", "Upload success", @@ -45,10 +47,10 @@ The following sample demonstrates closing a toast through a click or tap action. private async Task ShowToast() { - this.ToastContent = this.Contents[this.ToastFlag]; + ToastContent = Contents[ToastFlag]; await Task.Delay(100); - await this.ToastObj.ShowAsync(); - this.ToastFlag = ((this.ToastFlag != 5) ? (this.ToastFlag + 1) : 0); + await ToastObj.ShowAsync(); + ToastFlag = (ToastFlag != Contents.Length - 1) ? (ToastFlag + 1) : 0; } public void OnClickHandler(ToastClickEventArgs args) @@ -56,5 +58,9 @@ The following sample demonstrates closing a toast through a click or tap action. args.ClickToClose = true; } } +``` -``` \ No newline at end of file +Preview of the code snippet: +- Clicking the “Show Toast” button displays a sticky toast (TimeOut = 0) at the bottom-right of the page. +- Each click cycles through predefined messages (for example: “Welcome User”, “Upload in progress”, “Upload success”). +- Clicking or tapping the toast closes it immediately because **ClickToClose** is enabled via the **OnClick** event. \ No newline at end of file diff --git a/blazor/toast/how-to/prevent-toast-close-with-mobile-swipe.md b/blazor/toast/how-to/prevent-toast-close-with-mobile-swipe.md index 5c4fd6acc9..9e72012bfe 100644 --- a/blazor/toast/how-to/prevent-toast-close-with-mobile-swipe.md +++ b/blazor/toast/how-to/prevent-toast-close-with-mobile-swipe.md @@ -8,51 +8,47 @@ documentation: ug --- # Prevent toast close with mobile swipe in Blazor Toast Component +This page explains how to prevent a toast from closing when swiped on mobile devices using the Syncfusion Blazor Toast component. The approach cancels only swipe-initiated dismissal; other close actions (such as Timeout, close button, or programmatic HideAsync) continue to work unless handled separately. -To prevent a toast from closing when swiped on mobile, handle the OnClose event and set the event argument’s Cancel property to true when RequestType equals "swipe". This cancels only swipe-initiated dismissal; other close actions (such as Timeout, close button, or programmatic HideAsync) continue to work unless handled separately. - -The following sample demonstrates preventing toast close on mobile swipe using the OnClose event. +To prevent swipe-based dismissal, handle the **BeforeClose** event and set the event argument’s **Cancel** property to true when the **RequestType** equals "swipe". For details, refer to the component documentation and API: +- Blazor Toast overview: https://blazor.syncfusion.com/documentation/toast/ +- Toast events: https://blazor.syncfusion.com/documentation/toast/events/ +- ToastBeforeCloseArgs API: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.ToastBeforeCloseArgs.html ```cshtml - @using Syncfusion.Blazor.Buttons @using Syncfusion.Blazor.Notifications - - + +
-
- Show Toast +
+ Show Toast
- - @code { - SfToast ToastObj; + private SfToast ToastRef; + private string ToastContent = "Conference Room 01 / Building 135 10:00 AM–10:30 AM"; - private string ToastContent = "Conference Room 01 / Building 135 10:00 AM-10:30 AM"; + private async Task ShowToast() + { + await ToastRef.ShowAsync(); + } - private async Task ShowToast() - { - await this.ToastObj.ShowAsync(); - } - private void OnClose(ToastBeforeCloseArgs args) + private void OnBeforeClose(ToastBeforeCloseArgs args) + { + if (args.RequestType == "swipe") { - if (args.RequestType == "swipe") - { - args.Cancel = true; - } + args.Cancel = true; } } +} +``` - -``` \ No newline at end of file +Preview of the code snippet: +- Swiping over the toast on a mobile device does not close the toast. +- Other dismissal triggers (Timeout, close button, HideAsync) still close the toast as expected. \ No newline at end of file diff --git a/blazor/toast/how-to/show-different-types-of-toast.md b/blazor/toast/how-to/show-different-types-of-toast.md index 9de4067f09..54a121801c 100644 --- a/blazor/toast/how-to/show-different-types-of-toast.md +++ b/blazor/toast/how-to/show-different-types-of-toast.md @@ -9,7 +9,11 @@ documentation: ug # Show different types of toast in Blazor Toast Component -The Blazor Toast component provides predefined visual styles that can be applied using the CssClass property to represent different notification types. Use these styles to convey status and intent consistently across the application. +The Blazor Toast component provides predefined visual styles that can be applied using the **CssClass** property to represent different notification types. These styles help convey status and intent consistently across an application. + +For more details, see: +- Blazor Toast overview: https://blazor.syncfusion.com/documentation/toast/ +- SfToast CssClass API: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.SfToast.html#Syncfusion_Blazor_Notifications_SfToast_CssClass | Class | Description | | -------- | -------- | @@ -18,10 +22,9 @@ The Blazor Toast component provides predefined visual styles that can be applied | `e-toast-warning` | Highlights cautionary messages that may require attention | | `e-toast-danger` | Signals errors or critical issues | -These classes style the toast appearance and can be combined with other custom classes as needed. Behavior such as Timeout, position, and content is configured independently. +These classes style the toast appearance and can be combined with other custom classes as needed. Behavior such as **Timeout**, position, and content is configured independently. ```cshtml - @using Syncfusion.Blazor.Buttons @using Syncfusion.Blazor.Notifications @@ -31,41 +34,45 @@ These classes style the toast appearance and can be combined with other custom c
- Show Toast + Show Toast
@code { - SfToast ToastObj; + private SfToast ToastObj; private int ToastFlag = 0; - private string ToastTitle = ""; - private string ToastContent = ""; - private string ToastCssClass = ""; + private string ToastTitle = string.Empty; + private string ToastContent = string.Empty; + private string ToastCssClass = string.Empty; private class ToastOption { - public string Title { get; set; } - public string Content { get; set; } - public string CssClass { get; set; } + public string Title { get; set; } = string.Empty; + public string Content { get; set; } = string.Empty; + public string CssClass { get; set; } = string.Empty; } - private ToastOption[] Toasts = new ToastOption[] { - new ToastOption { Title = "Warning !", Content = "There was a problem with your network connection.", CssClass = "e-toast-warning" }, - new ToastOption { Title = "Success !", Content = "Your message has been sent successfully.", CssClass = "e-toast-success" }, - new ToastOption { Title = "Error !", Content = "A problem has been occurred while submitting your data.", CssClass = "e-toast-danger" }, - new ToastOption { Title = "Information !", Content = "Please read the comments carefully.", CssClass = "e-toast-info" } + private readonly ToastOption[] Toasts = new ToastOption[] { + new ToastOption { Title = "Warning", Content = "There was a problem with the network connection.", CssClass = "e-toast-warning" }, + new ToastOption { Title = "Success", Content = "The message has been sent successfully.", CssClass = "e-toast-success" }, + new ToastOption { Title = "Error", Content = "A problem occurred while submitting the data.", CssClass = "e-toast-danger" }, + new ToastOption { Title = "Information", Content = "Please read the comments carefully.", CssClass = "e-toast-info" } }; private async Task ShowToast() { - this.ToastTitle = this.Toasts[this.ToastFlag].Title; - this.ToastContent = this.Toasts[this.ToastFlag].Content; - this.ToastCssClass = this.Toasts[this.ToastFlag].CssClass; - await Task.Delay(100); - await this.ToastObj.ShowAsync(); - this.ToastFlag = ((this.ToastFlag == Toasts.Length - 1) ? 0 : (this.ToastFlag + 1)); + ToastTitle = Toasts[ToastFlag].Title; + ToastContent = Toasts[ToastFlag].Content; + ToastCssClass = Toasts[ToastFlag].CssClass; + + await ToastObj.ShowAsync(); + + ToastFlag = (ToastFlag == Toasts.Length - 1) ? 0 : (ToastFlag + 1); } } +``` -``` \ No newline at end of file +Preview of the code snippet: +- Selecting Show Toast displays a toast using one of the predefined visual styles (success, info, warning, or danger). +- Each click cycles through the styles, demonstrating how the **CssClass** property changes appearance while behavior (position, content, and timeout) remains independent. \ No newline at end of file diff --git a/blazor/toast/how-to/show-multiple-toasts-in-various-positions.md b/blazor/toast/how-to/show-multiple-toasts-in-various-positions.md index 9f60fd0ca6..c167d43b80 100644 --- a/blazor/toast/how-to/show-multiple-toasts-in-various-positions.md +++ b/blazor/toast/how-to/show-multiple-toasts-in-various-positions.md @@ -9,38 +9,40 @@ documentation: ug # Show multiple toasts in various positions in Blazor Toast Component -To display toasts in different positions at the same time, create multiple SfToast instances, each configured with its own ToastPosition. Each toast instance manages its own queue and position independently. Changing the position affects only toasts created after the change; toasts that are already visible are not repositioned. +To display toasts in different positions at the same time, create multiple **SfToast** instances, each configured with its own **ToastPosition**. Each toast instance manages its own queue and position independently. Changing the position affects only toasts created after the change; toasts that are already visible are not repositioned. -The following sample demonstrates adding multiple toasts in different positions. +For more details, see: +- Blazor Toast overview: https://blazor.syncfusion.com/documentation/toast/ +- Toast position: https://blazor.syncfusion.com/documentation/toast/position +- Toast events: https://blazor.syncfusion.com/documentation/toast/events/ ```cshtml - @using Syncfusion.Blazor.Buttons @using Syncfusion.Blazor.Notifications - + - +
- Show Warning Toast - Show Success Toast + Show Warning Toast + Show Success Toast
@code { - SfToast WarningToastObj; - SfToast SuccessToastObj; + private SfToast WarningToastObj; + private SfToast SuccessToastObj; - private string SuccessContent { get; set; } = "Your message has been sent successfully."; - private string WarningContent { get; set; } = "There was a problem with your network connection."; + private string SuccessContent { get; set; } = "The message has been sent successfully."; + private string WarningContent { get; set; } = "There was a problem with the network connection."; private void ToastClick(ToastClickEventArgs args) { @@ -49,13 +51,16 @@ The following sample demonstrates adding multiple toasts in different positions. private async Task ShowWarningToast() { - await this.WarningToastObj.ShowAsync(); + await WarningToastObj.ShowAsync(); } private async Task ShowSuccessToast() { - await this.SuccessToastObj.ShowAsync(); + await SuccessToastObj.ShowAsync(); } } +``` -``` \ No newline at end of file +Preview of the code snippet: +- Selecting Show Warning Toast displays a toast at the bottom-right, while Show Success Toast displays a toast at the bottom-left. +- Each toast instance maintains its own queue and position. Changing position configuration affects only subsequently shown toasts. \ No newline at end of file diff --git a/blazor/toast/position.md b/blazor/toast/position.md index d7b205f6d6..02ea940b45 100644 --- a/blazor/toast/position.md +++ b/blazor/toast/position.md @@ -9,35 +9,26 @@ documentation: ug # Positioning in Blazor Toast Component -The toast position can be defined using predefined alignments or customized using explicit offsets. Predefined positions are configured using the `X` (horizontal: Left, Center, Right) and `Y` (vertical: Top, Bottom) properties on the position settings of the Toast component. +The Toast position can be configured using predefined alignments or customized using explicit offsets. Predefined positions are set through the **X** (horizontal: Left, Center, Right) and **Y** (vertical: Top, Bottom) properties of the [ToastPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.ToastPosition.html) settings in the [Toast](https://blazor.syncfusion.com/documentation/toast/getting-started) component. ## Predefined -`X` positions +- X positions: Left, Center, Right +- Y positions: Top, Bottom -* Left -* Center -* Right - -`Y` positions - -* Top -* Bottom - -N> When multiple toasts are shown, dynamic changes to position properties do not affect already displayed toasts; the new position is applied to subsequent toasts after the previous messages are removed. If the toast width is set to 100%, it stretches across the container and horizontal (`X`) alignment has no visible effect. +N> When multiple toasts are shown, dynamic changes to position properties do not affect already displayed toasts; the new position is applied to subsequent toasts after previous messages are removed. If the Toast width is set to 100%, it stretches across the container and horizontal (**X**) alignment has no visible effect. ## Custom -Custom `X` and `Y` positions can be provided as pixel values, numbers, or percentages. Numeric values are interpreted as pixels and are applied as offsets from the top and left of the target container (or the viewport when no target is set). +Custom **X** and **Y** positions can be provided as pixel values, numbers, or percentages. Numeric values are interpreted as pixels and are applied as offsets from the top and left of the target container (or the viewport when no target is set). ```cshtml - @using Syncfusion.Blazor.Inputs @using Syncfusion.Blazor.Buttons @using Syncfusion.Blazor.DropDowns @using Syncfusion.Blazor.Notifications - + @@ -60,7 +51,7 @@ Custom `X` and `Y` positions can be provided as pixel values, numbers, or percen
- +
@@ -101,19 +92,12 @@ Custom `X` and `Y` positions can be provided as pixel values, numbers, or percen
+Preview +- A toast appears at the bottom-right with the title “Order Updated” and the message “Order #10248 has been updated successfully.” +- The toast auto-hides after 5 seconds. -``` +## Programmatic template using ContentTemplate -For dynamic scenarios, a RenderFragment can be assigned to the ContentTemplate property when showing the toast programmatically. The following example demonstrates providing a RenderFragment to ContentTemplate via ShowAsync at runtime. +For dynamic scenarios, a RenderFragment can be assigned to the ContentTemplate property when showing the toast programmatically. This approach is suitable when the template content is constructed at runtime based on application state. ```cshtml - @using Syncfusion.Blazor.Buttons @using Syncfusion.Blazor.Notifications - Show Toast +Show Programmatic Toast - + + + @code { - SfToast ToastObj; + private SfToast ToastObj2; - private RenderFragment template = @
Anjolie Stokes
Networking Referral
; + // Programmatic template (RenderFragment) created in code + private RenderFragment DynamicTemplate(string title, string message) => @
+
+
@title
+
@message
+
+
; - private async Task ShowToast() + private async Task ShowToastWithTemplate() { - await this.ToastObj.ShowAsync(new ToastModel { ContentTemplate = template }); + var model = new ToastModel + { + ContentTemplate = DynamicTemplate("New Message", "A new message has arrived in the inbox.") + }; + await ToastObj2.ShowAsync(model); } } +``` -``` \ No newline at end of file +Preview +- A toast appears at the bottom-right with the title “New Message” and the message “A new message has arrived in the inbox.” +- The template is provided at runtime via ContentTemplate. \ No newline at end of file diff --git a/blazor/toast/timeout.md b/blazor/toast/timeout.md index aeb7f1cb14..cc5b2c1f70 100644 --- a/blazor/toast/timeout.md +++ b/blazor/toast/timeout.md @@ -9,34 +9,43 @@ documentation: ug # Timeout in Blazor Toast Component -The toast display duration is controlled by the `Timeout` property, expressed in milliseconds. A toast remains visible until the timeout elapses if there is no user interaction. +The toast display duration is controlled by the `Timeout` property, expressed in milliseconds. A toast remains visible until the timeout elapses if there is no interaction. -* The `Timeout` duration can be visually represented using a [progress bar](./config#progress-bar). -* The `ExtendedTimeOut` property specifies how long the toast remains visible after the user hovers over it. +- The `Timeout` duration can be visually represented using a [progress bar](./config#progress-bar). +- The `ExtendedTimeout` property specifies how long the toast remains visible after pointer hover. -N> Allow users to dismiss the toast at any time by enabling the `ShowCloseButton` property. +N> To allow dismissal at any time, enable the `ShowCloseButton` property. ```cshtml - @using Syncfusion.Blazor.Inputs @using Syncfusion.Blazor.Buttons @using Syncfusion.Blazor.Notifications
- + - - + +
- + +
- Show Toast + Show Toast


@@ -56,51 +65,46 @@ N> Allow users to dismiss the toast at any time by enabling the `ShowCloseButton @code { - SfToast ToastObj; - SfTextBox TextBoxObj; - + private SfToast ToastObj; private int ToastTimeOut { get; set; } = 0; private string TextBoxVal { get; set; } = "0"; - private string ToastContent { get; set; } = "

"; + private string ToastContent { get; set; } = + "

profile image

"; private async Task ShowToast() { - await this.ToastObj.ShowAsync(); - } - - private void OnValChange() - { - this.ToastTimeOut = int.Parse(this.TextBoxObj.Value); - this.TextBoxVal = this.TextBoxObj.Value; - this.StateHasChanged(); + if (!int.TryParse(TextBoxVal, out var parsed)) + { + parsed = 0; + } + ToastTimeOut = parsed; + await ToastObj.ShowAsync(); } private async Task HideToast() { - await this.ToastObj.HideAsync(); + await ToastObj.HideAsync(); } } - ``` -![TimeOut in Blazor Toast](./images/blazor-toast-timeout.png) +![Timeout in Blazor Toast](./images/blazor-toast-timeout.png) ## Static toast -To prevent auto-hide and make the toast persist until dismissed, set the `Timeout` property to zero (`0`). +To prevent auto-hide and keep the toast visible until dismissed, set the `Timeout` property to zero (`0`). ```cshtml - @using Syncfusion.Blazor.Buttons @using Syncfusion.Blazor.Notifications - +
- Show Toast + Show Toast
@@ -112,16 +116,14 @@ To prevent auto-hide and make the toast persist until dismissed, set the `Timeou @code { - SfToast ToastObj; - - private string ToastContent = "You have a new friend request yet to accept"; + private SfToast ToastObj; + private string ToastContent = "This toast remains visible until dismissed."; private async Task ShowToast() { - await this.ToastObj.ShowAsync(); + await ToastObj.ShowAsync(); } } - ``` -![TimeOut in Blazor Static Toast](./images/blazor-static-toast-timeout.png) \ No newline at end of file +![Timeout in Blazor Static Toast](./images/blazor-static-toast-timeout.png) \ No newline at end of file From c7b0fba5182e7f91e9c849fcf90e5f7408236301 Mon Sep 17 00:00:00 2001 From: Ashwini-SF5049 Date: Fri, 10 Oct 2025 12:42:22 +0530 Subject: [PATCH 16/30] 983104: Updated the UG Documentation for the Autocomple,button,buttongroup --- blazor/check-box/accessibility.md | 24 +++++--- .../check-box/getting-started-with-web-app.md | 55 +++++++++---------- blazor/check-box/getting-started.md | 40 +++++++------- .../how-to/checkbox-model-binding.md | 14 +++-- .../check-box/how-to/customized-checkbox.md | 31 ++++++----- blazor/check-box/how-to/right-to-left.md | 8 +-- blazor/check-box/label-and-size.md | 12 ++-- blazor/check-box/native-event.md | 26 ++++----- blazor/check-box/style-and-appearance.md | 16 +++--- blazor/chip/accessibility.md | 28 +++++----- blazor/chip/customization.md | 50 +++++++++-------- blazor/chip/getting-started-with-web-app.md | 49 ++++++++--------- blazor/chip/getting-started.md | 32 +++++------ blazor/chip/style.md | 12 ++-- blazor/chip/types.md | 24 ++++---- blazor/message/accessibility.md | 20 ++++--- blazor/message/customization.md | 26 ++++----- blazor/message/getting-started-webapp.md | 50 ++++++++--------- blazor/message/getting-started.md | 36 ++++++------ blazor/message/icons.md | 24 ++++---- blazor/message/severities.md | 8 +-- blazor/message/template.md | 7 +-- blazor/message/variants.md | 18 +++--- blazor/signature/accessibility.md | 10 ++-- blazor/signature/customization.md | 28 +++++----- blazor/signature/draw.md | 6 +- blazor/signature/getting-started-webapp.md | 52 +++++++++--------- blazor/signature/getting-started.md | 42 +++++++------- .../signature/how-to/integration-toolbar.md | 12 +++- blazor/signature/open-save.md | 26 ++++----- blazor/signature/user-interaction.md | 22 +++++--- 31 files changed, 423 insertions(+), 385 deletions(-) diff --git a/blazor/check-box/accessibility.md b/blazor/check-box/accessibility.md index fbf4a809b3..832c867d6c 100644 --- a/blazor/check-box/accessibility.md +++ b/blazor/check-box/accessibility.md @@ -3,13 +3,13 @@ layout: post title: Accessibility in Blazor CheckBox Component | Syncfusion description: Checkout and learn here all about Accessibility in Syncfusion Blazor CheckBox component and much more. platform: Blazor -control: Checkbox +control: CheckBox documentation: ug --- # Accessibility in Blazor CheckBox Component -The Blazor CheckBox 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. +The Blazor CheckBox component follows established accessibility standards, including ADA, Section 508, and WCAG 2.2 guidelines. It supports screen readers, keyboard navigation, right-to-left (RTL) layouts, and high-contrast themes. For component details, see the CheckBox overview in the documentation (https://blazor.syncfusion.com/documentation/checkbox/) and the SfCheckBox API reference (https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfCheckBox.html). For enabling RTL at the component level, refer to Right-to-left support (./how-to/right-to-left). The accessibility compliance for the Blazor CheckBox component is outlined below. @@ -38,25 +38,35 @@ The accessibility compliance for the Blazor CheckBox component is outlined below ## WAI-ARIA attributes -The Blazor CheckBox component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/) patterns to meet the accessibility. The following ARIA attributes are used in the Blazor CheckBox component: +The Blazor CheckBox component follows the WAI-ARIA Authoring Practices for checkboxes to ensure compatibility with assistive technologies. The following ARIA roles and attributes are used: | Attributes | Purpose | | --- | --- | +| `role="checkbox"` | Identifies the element as a checkbox control to assistive technologies. | +| `aria-checked` | Conveys the current state of the checkbox: `true`, `false`, or `mixed` (for indeterminate state). | | `aria-disabled` | Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. | +| `aria-readonly` | Indicates that the value cannot be changed by the user (read-only state). | +| `aria-labelledby` / `aria-label` | Provides an accessible name. When the `Label` parameter is used, it associates a visible label with the checkbox. | +| `tabindex` | Ensures the checkbox is focusable via keyboard navigation in the expected order. | + +For guidance on ARIA usage, see the ARIA checkbox pattern (https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/). ## Keyboard interaction -The Blazor CheckBox component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor CheckBox component. +The Blazor CheckBox component follows the keyboard interaction guidance, making it accessible to users who rely on keyboards or assistive technologies. The following keyboard shortcuts are supported: | Windows | Mac | Actions | | --- | --- | --- | -| Space | Space | When the CheckBox has focus, pressing the Space key changes the state of the CheckBox. | +| Tab / Shift + Tab | Tab / Shift + Tab | Moves focus to the checkbox or away from it following the tab sequence. | +| Space | Space | When the CheckBox has focus, pressing Space toggles its state. | + +For detailed keyboard recommendations, see the ARIA checkbox keyboard interaction guidance (https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/#keyboardinteraction). ## Ensuring accessibility -The Blazor CheckBox component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests. +The Blazor CheckBox component's accessibility levels are validated using axe-core with Playwright tests to catch common issues such as missing names, incorrect ARIA states, and insufficient color contrast. Results can vary based on theme customization; ensure color contrast meets WCAG minimum ratios. -The accessibility compliance of the Blazor CheckBox component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/checkbox) in a new window to evaluate the accessibility of the Blazor CheckBox component with accessibility tools. +The accessibility compliance of the Blazor CheckBox component is shown in the following sample. Open the sample in a new window to evaluate the component with accessibility tools. {% previewsample "https://ej2.syncfusion.com/accessibility/checkbox.html" %} diff --git a/blazor/check-box/getting-started-with-web-app.md b/blazor/check-box/getting-started-with-web-app.md index 21a1bea09d..60298e6734 100644 --- a/blazor/check-box/getting-started-with-web-app.md +++ b/blazor/check-box/getting-started-with-web-app.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor CheckBox Component in Web App -This section briefly explains about how to include [Blazor CheckBox](https://www.syncfusion.com/blazor-components/blazor-checkbox) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section explains how to include the [Blazor CheckBox](https://www.syncfusion.com/blazor-components/blazor-checkbox) component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. {% tabcontents %} @@ -21,17 +21,17 @@ This section briefly explains about how to include [Blazor CheckBox](https://www ## Create a new Blazor Web App in Visual Studio -You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft templates](https://learn.microsoft.com/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application. +Configure the appropriate [interactive render mode](https://learn.microsoft.com/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) when creating the Blazor Web App. ## Install Syncfusion® Blazor Buttons and Themes NuGet in the Blazor Web App -To add **Blazor CheckBox** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor CheckBox** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using `WebAssembly` or `Auto` render modes in a Blazor Web App, install Syncfusion® Blazor component NuGet packages in the Client project. -Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, use the following Package Manager commands: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -42,7 +42,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on NuGet. See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the full list and component details. {% endtabcontent %} @@ -54,9 +54,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor Web App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application. +Configure the appropriate [interactive render mode](https://learn.microsoft.com/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) when creating the Blazor Web App. For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. @@ -70,15 +70,15 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). +N> For details on creating a **Blazor Web App** with various interactive modes and locations, refer to [Render interactive modes](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). ## Install Syncfusion® Blazor Buttons and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using `WebAssembly` or `Auto` render modes in a Blazor Web App, install Syncfusion® Blazor component NuGet packages in the Client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure the terminal is in the project directory containing the `.csproj` file. +* Run the following commands to install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). {% tabs %} @@ -92,7 +92,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on NuGet. See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the full list and component details. {% endtabcontent %} @@ -102,10 +102,10 @@ N> Syncfusion® Blazor components are availa | Interactive Render Mode | Description | | -- | -- | -| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| -| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| +| WebAssembly or Auto | Open Components/_Imports.razor from the Client project. | +| Server | Open Components/_Imports.razor in the Server project (Components folder). | -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespace. +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -116,9 +116,9 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespace. {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. +Now, register the Syncfusion® Blazor service in the **~/Program.cs** file of the Blazor Web App. -If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. +If the **Interactive Render Mode** is `WebAssembly` or `Auto`, register the service in both **~/Program.cs** files (Server and Client) of the Blazor Web App. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -152,7 +152,7 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion® Blazor Service only in that **~/Program.cs** file. +If the **Interactive Render Mode** is `Server`, the project contains a single **~/Program.cs** file. In this case, register the Syncfusion® Blazor service only in that **~/Program.cs** file. {% tabs %} {% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} @@ -175,7 +175,7 @@ var app = builder.Build(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: +The theme stylesheet and script are provided via NuGet using [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Add the stylesheet reference in the `` and the script reference at the end of the `` in **~/Components/App.razor** as shown: ```html @@ -189,11 +189,11 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> Refer to [Blazor themes](https://blazor.syncfusion.com/documentation/appearance/themes) for Static Web Assets, CDN, and CRG options. See [Adding script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) for script reference approaches. ## Add Syncfusion® Blazor CheckBox component -Add the Syncfusion® Blazor CheckBox component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: +Add the Syncfusion® Blazor CheckBox component in a `.razor` file inside the `Pages` folder. If the interactivity location is `Per page/component`, define a render mode at the top of the component, as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | @@ -202,7 +202,7 @@ Add the Syncfusion® Blazor CheckBox compone | | Server | @rendermode InteractiveServer | | | None | --- | -N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default. +N> If the **Interactivity Location** is `Global` and the **Render Mode** is `Auto`, `WebAssembly`, or `Server`, the render mode is configured in `App.razor` by default. {% tabs %} {% highlight razor %} @@ -226,15 +226,14 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor CheckBox component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor CheckBox component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/hDhpNsLuinxRTsQp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor CheckBox Component](./images/blazor-checkbox-component.png)" %} -N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/CheckBox). +N> [View sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/CheckBox). ## See also 1. [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) 2. [Getting Started with Syncfusion® Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) -3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) - +3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) \ No newline at end of file diff --git a/blazor/check-box/getting-started.md b/blazor/check-box/getting-started.md index 032e9ba714..ef1f8a4bb5 100644 --- a/blazor/check-box/getting-started.md +++ b/blazor/check-box/getting-started.md @@ -3,7 +3,7 @@ layout: post title: Getting Started with Blazor CheckBox Component | Syncfusion description: Checkout and learn about getting started with Blazor CheckBox component in Blazor WebAssembly Application. platform: Blazor -control: Checkbox +control: CheckBox documentation: ug --- @@ -11,9 +11,9 @@ documentation: ug # Getting Started with Blazor CheckBox Component -This section briefly explains about how to include [Blazor CheckBox](https://www.syncfusion.com/blazor-components/blazor-checkbox) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This guide explains how to add the [Blazor CheckBox](https://www.syncfusion.com/blazor-components/blazor-checkbox) component to a Blazor WebAssembly app using Visual Studio and Visual Studio Code. -To get started quickly with the CheckBox Component using Blazor, you can check out this video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/CheckBox) sample. +To get started quickly with the CheckBox component, watch the following video or review the GitHub sample. {% youtube "youtube:https://www.youtube.com/watch?v=a6HR1QGAvLo"%} @@ -28,11 +28,11 @@ To get started quickly with the CheckBox Component using Blazor, you can check o ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft templates](https://learn.microsoft.com/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ## Install Syncfusion® Blazor Buttons and Themes NuGet in the App -To add **Blazor CheckBox** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor CheckBox** component, open NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes). Alternatively, run the following Package Manager commands: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -43,7 +43,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the full package list and component details. {% endtabcontent %} @@ -55,9 +55,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application using the following commands in the integrated terminal (Ctrl+`). {% tabs %} @@ -73,8 +73,8 @@ cd BlazorApp ## Install Syncfusion® Blazor Buttons and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure the terminal is in the project root directory where the `.csproj` file is located. +* Run the following commands to install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) and restore dependencies. {% tabs %} @@ -88,7 +88,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the full package list and component details. {% endtabcontent %} @@ -96,7 +96,7 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespace. +Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespaces. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -107,7 +107,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly app. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -129,9 +129,11 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} +N> A valid Syncfusion license is required to use the components in production. For details, see [Syncfusion licensing](https://blazor.syncfusion.com/documentation/getting-started/licensing). + ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. +The theme stylesheet and script are provided via NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Add the stylesheet and script references in the `` section of **~/index.html**. ```html @@ -140,11 +142,11 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> For theme reference options (Static Web Assets, CDN, CRG), see [Blazor themes](https://blazor.syncfusion.com/documentation/appearance/themes). For script reference approaches, see [Adding script references](https://blazor.syncfusion.com/documentation/common/adding-script-references). ## Add Blazor CheckBox component -Add the Syncfusion® Blazor CheckBox component in the **~/Pages/Index.razor** file. +Add the Syncfusion® Blazor CheckBox component in **~/Pages/Index.razor**. {% tabs %} {% highlight razor %} @@ -159,9 +161,9 @@ Add the Syncfusion® Blazor CheckBox compone {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor CheckBox component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor CheckBox component in the default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhpNsLuinxRTsQp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor CheckBox Component](./images/blazor-checkbox-component.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhpNsLuinxRTsQp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor CheckBox component rendered in a Blazor WebAssembly app](./images/blazor-checkbox-component.png)" %} ## See also @@ -169,4 +171,4 @@ Add the Syncfusion® Blazor CheckBox compone * [Getting Started with Syncfusion® Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) * [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) -N> You can also explore our [Blazor Checkbox example](https://blazor.syncfusion.com/demos/buttons/default-functionalities?theme=bootstrap5) that shows you how to render and configure the Checkbox. +N> You can also explore the [Blazor CheckBox example](https://blazor.syncfusion.com/demos/buttons/default-functionalities?theme=bootstrap5) to see how to render and configure the CheckBox. \ No newline at end of file diff --git a/blazor/check-box/how-to/checkbox-model-binding.md b/blazor/check-box/how-to/checkbox-model-binding.md index a41ff4cf96..30632a106a 100644 --- a/blazor/check-box/how-to/checkbox-model-binding.md +++ b/blazor/check-box/how-to/checkbox-model-binding.md @@ -3,20 +3,24 @@ layout: post title: Model Binding in Blazor CheckBox Component | Syncfusion description: Check out and learn here all about Model Binding in Syncfusion Blazor CheckBox component and much more. platform: Blazor -control: Checkbox +control: CheckBox documentation: ug --- # Model Binding in Blazor CheckBox Component -To get start quickly with Model Binding in Blazor CheckBox Component, you can check on this video: +To get started quickly with model binding in the Blazor CheckBox component, watch the following video: {% youtube "youtube:https://www.youtube.com/watch?v=4vMuReo0Hz4"%} -This section demonstrates the strongly typed extension support in Checkbox. The view that can bind with any model is called as strongly typed view. You can bind any class as model to view, access model properties on that view, and use data associated with model to render the component. +This section demonstrates model binding with EditForm and DataAnnotations using the Syncfusion SfCheckBox component. In Blazor, a form is strongly typed when an EditForm is bound to a model instance, allowing component parameters to bind to model properties and participate in validation. For an overview of the component, see the CheckBox documentation (https://blazor.syncfusion.com/documentation/checkbox/). -In this sample, first check the option and click the submit button to post the selected value in the Checkbox. When the value is not checked, validation error message will be shown below the Checkbox. +In this example, the Checked property of SfCheckBox is two-way bound with @bind-Checked to a bool property on the model. The form uses DataAnnotationsValidator and displays a ValidationMessage when validation fails. Learn more in the following Microsoft articles: EditForm (https://learn.microsoft.com/aspnet/core/blazor/forms-and-input-components), DataAnnotationsValidator (https://learn.microsoft.com/aspnet/core/blazor/forms-and-input-components#data-annotations-validation), and ValidationMessage (https://learn.microsoft.com/aspnet/core/blazor/forms-and-input-components#validation-support). + +Because Required does not validate bool values, the Range(true, true) attribute is used to require a checked state—commonly used for “Terms and Conditions” acceptance. See RequiredAttribute (https://learn.microsoft.com/dotnet/api/system.componentmodel.dataannotations.requiredattribute) and data annotations validation in Blazor forms (https://learn.microsoft.com/aspnet/core/blazor/forms-and-input-components#data-annotations-validation). + +In this sample, select the option and select Submit to post the selected value in the CheckBox. When the value is not checked, a validation message appears below the CheckBox. ```csharp @@ -48,4 +52,4 @@ In this sample, first check the option and click the submit button to post the s ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/LjhKMVrmrJkahhmZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Model Binding in Blazor CheckBox](./../images/blazor-checkbox-model-binding.png) \ No newline at end of file +![Blazor CheckBox model binding with validation message](./../images/blazor-checkbox-model-binding.png) \ No newline at end of file diff --git a/blazor/check-box/how-to/customized-checkbox.md b/blazor/check-box/how-to/customized-checkbox.md index b9ed9de034..906cecb9c0 100644 --- a/blazor/check-box/how-to/customized-checkbox.md +++ b/blazor/check-box/how-to/customized-checkbox.md @@ -1,20 +1,21 @@ --- layout: post -title: Customized Checkbox in Blazor CheckBox Component | Syncfusion +title: Customized CheckBox in Blazor CheckBox Component | Syncfusion description: Checkout and learn here all about Customized Checkbox in Syncfusion Blazor CheckBox component and more. platform: Blazor -control: Checkbox +control: CheckBox documentation: ug --- # Customized Checkbox in Blazor CheckBox Component +This topic explains multiple ways to customize the Blazor CheckBox appearance using CSS, including applying theme utility classes through the CssClass parameter, resizing the checkbox, customizing the frame shape, and changing the check icon. For an overview of the component, see CheckBox documentation (https://blazor.syncfusion.com/documentation/checkbox/). For API details, see SfCheckBox API (https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfCheckBox.html). + ## Customize checkbox appearance -You can customize the appearance of the Checkbox component using the CSS rules. Define own CSS rules according to your requirement and assign the class name to the -[CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfCheckBox-1.html) property. +You can customize the appearance of the CheckBox component using CSS rules. Define custom CSS rules based on the requirement and assign the class name using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfCheckBox-1.html) property. -The background and border color of the Checkbox is customized through the custom classes to create primary, success, warning, and danger info type of checkbox. +The background and border colors of the CheckBox can be adjusted using utility classes to create primary, success, info, warning, and danger styles (for example, e-primary, e-success, e-info, e-warning, and e-danger). These classes style the CheckBox wrapper and reflect hover and focus states. ```cshtml @using Syncfusion.Blazor.Buttons @@ -78,13 +79,13 @@ The background and border color of the Checkbox is customized through the custom ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/BZVKshBQrJbnEQzO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Customizing Appearance of Blazor CheckBox](./../images/blazor-checkbox-appearance-customization.png) +![Customize Blazor CheckBox appearance with theme utility classes](./../images/blazor-checkbox-appearance-customization.png) ## Customize width and height -The height and width of the Checkbox component can be customized by setting `height` and `width` properties in `styles` +The height and width of the CheckBox component can be customized by applying CSS rules to the CheckBox wrapper and its inner elements. -The following section explains about how to customize the height and width of the Checkbox component. +The following section explains how to increase the CheckBox size using a custom CSS class. The styles update the .e-frame box, the check icon size, the ripple container for proper interaction effects, and the label line-height for vertical alignment. ```cshtml @using Syncfusion.Blazor.Buttons @@ -121,13 +122,13 @@ The following section explains about how to customize the height and width of th ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/BtrUWLLGVTFECslm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Customizing Height and Width of Blazor CheckBox](./../images/blazor-checkbox-height-width-customization.png) +![Customize Blazor CheckBox height and width with CSS](./../images/blazor-checkbox-height-width-customization.png) ## Custom frame -Checkbox frame can be customized as per the requirement by adding CSS rules. +Checkbox frame can be customized based on the requirement by adding CSS rules. -In the following example, to-do list is displayed with round checkbox by changing `border-radius` as `100%` by adding `e-custom` class. +In the following example, a to-do list uses a round CheckBox by setting border-radius to 100% via the e-custom class applied through CssClass. ```cshtml @using Syncfusion.Blazor.Buttons @@ -180,13 +181,13 @@ In the following example, to-do list is displayed with round checkbox by changin ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/BZrgirhGhJYCyqDJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Customizing Blazor CheckBox Frame](./../images/blazor-checkbox-frame-customization.png) +![Customize Blazor CheckBox frame to rounded shape](./../images/blazor-checkbox-frame-customization.png) ## Custom check icon -Checkbox check icon can be customized as per the requirement by adding CSS rules. +Checkbox check icon can be customized by adding CSS rules. -In the following example, the check icon can be customized by changing check icon content, background and border color in focus and hovered states by adding `e-checkicon` class. +In the following example, the check icon glyph, background, and border colors are customized for default, hover, and focus states by applying the e-checkicon class through CssClass. ```cshtml @using Syncfusion.Blazor.Buttons @@ -230,4 +231,4 @@ In the following example, the check icon can be customized by changing check ico ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/rjBgWrLGrpkSQSUL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Customizing Check Icon in Blazor CheckBox](./../images/blazor-checkbox-check-icon-customization.png) \ No newline at end of file +![Customize Blazor CheckBox check icon styles](./../images/blazor-checkbox-check-icon-customization.png) \ No newline at end of file diff --git a/blazor/check-box/how-to/right-to-left.md b/blazor/check-box/how-to/right-to-left.md index 3e1c4dab6c..95bf98f67b 100644 --- a/blazor/check-box/how-to/right-to-left.md +++ b/blazor/check-box/how-to/right-to-left.md @@ -3,15 +3,15 @@ layout: post title: Right-To-Left in Blazor CheckBox Component | Syncfusion description: Checkout and learn here all about Right-To-Left in Syncfusion Blazor CheckBox component and much more. platform: Blazor -control: Checkbox +control: CheckBox documentation: ug --- # Right-To-Left in Blazor CheckBox Component -Checkbox component has RTL support. This can be achieved by setting [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfCheckBox-1.html) as `true`. +The CheckBox component supports right-to-left (RTL) layouts, which reverse content flow and align the checkbox and label for languages such as Arabic, Hebrew, and Persian. Enable RTL by setting [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfCheckBox-1.html) to `true` on the SfCheckBox component. EnableRtl applies at the component level and can override page-level direction. RTL can also be enabled globally by setting dir="rtl" on a container or the html element. For more information, see the CheckBox overview (https://blazor.syncfusion.com/documentation/checkbox/) and the SfCheckBox API (https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfCheckBox.html). -The following example illustrates how to enable right-to-left support in Checkbox component. +The following example illustrates how to enable right-to-left support in CheckBox component. ```cshtml @using Syncfusion.Blazor.Buttons @@ -25,4 +25,4 @@ The following example illustrates how to enable right-to-left support in Checkbo ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/htVgiLhmVyZvKJzz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Right to Left in Blazor CheckBox](./../images/blazor-checkbox-right-to-left.png) \ No newline at end of file +![Blazor CheckBox with right-to-left (RTL) layout enabled](./../images/blazor-checkbox-right-to-left.png) \ No newline at end of file diff --git a/blazor/check-box/label-and-size.md b/blazor/check-box/label-and-size.md index 648fd6d416..29c163dc4c 100644 --- a/blazor/check-box/label-and-size.md +++ b/blazor/check-box/label-and-size.md @@ -3,17 +3,17 @@ layout: post title: Label and Size in Blazor CheckBox Component | Syncfusion description: Checkout and learn here all about Label and Size in Syncfusion Blazor CheckBox component and much more. platform: Blazor -control: Checkbox +control: CheckBox documentation: ug --- # Label and Size in Blazor CheckBox Component -This section explains the different sizes and labels. +This topic describes how to configure captions with Label and LabelPosition and how to switch between the available CheckBox sizes. ## Label -The [Blazor Checkbox](https://www.syncfusion.com/blazor-components/blazor-checkbox) caption can be defined by using the [Label](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfCheckBox-1.html#Syncfusion_Blazor_Buttons_SfCheckBox_1_Label) property. This reduces the manual addition of label for Checkbox. You can customize the label position before or after the Checkbox through the [LabelPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfCheckBox-1.html#Syncfusion_Blazor_Buttons_SfCheckBox_1_LabelPosition) property. +The [Blazor CheckBox](https://www.syncfusion.com/blazor-components/blazor-checkbox) caption is set with the [Label](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfCheckBox-1.html#Syncfusion_Blazor_Buttons_SfCheckBox_1_Label) property, which also provides the accessible name. Control the caption placement before or after the box using [LabelPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfCheckBox-1.html#Syncfusion_Blazor_Buttons_SfCheckBox_1_LabelPosition). ```cshtml @using Syncfusion.Blazor.Buttons @@ -29,11 +29,11 @@ The [Blazor Checkbox](https://www.syncfusion.com/blazor-components/blazor-checkb ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/LjLgMVBmLTwBGRID?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor CheckBox with Label](./images/blazor-checkbox-label.png) +![Blazor CheckBox with before and after label positions](./images/blazor-checkbox-label.png) ## Size -The different Checkbox sizes available are default and small. To reduce the size of default Checkbox to small, set the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfCheckBox-1.html) property to `e-small`. +The CheckBox supports two sizes: default and small. To render a small CheckBox, set the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfCheckBox-1.html) property to e-small. Visual appearance may vary by theme. ```cshtml @using Syncfusion.Blazor.Buttons @@ -55,7 +55,7 @@ The different Checkbox sizes available are default and small. To reduce the size ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/BNLAiVVQVzGyDwWz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Changing Blazor CheckBox Size](./images/blazor-checkbox-size.png) +![Blazor CheckBox size comparison: small vs. default](./images/blazor-checkbox-size.png) ## See also diff --git a/blazor/check-box/native-event.md b/blazor/check-box/native-event.md index 7fec4f584b..63ebd8071d 100644 --- a/blazor/check-box/native-event.md +++ b/blazor/check-box/native-event.md @@ -3,33 +3,33 @@ layout: post title: Native Events in Blazor CheckBox Component | Syncfusion description: Checkout and learn here all about Native Events in Syncfusion Blazor CheckBox component and much more. platform: Blazor -control: Checkbox +control: CheckBox documentation: ug --- # Native Events in Blazor CheckBox Component -You can define the native event using on `event` attribute in component. The value of attribute is treated as an event handler. The event specific data will be available in event arguments. +Attach native DOM events in Blazor by using the @on{event} attributes on the component. The attribute value is the event handler method, and event-specific data is provided via the corresponding EventArgs. For an overview of Blazor event handling and event arguments, see the Microsoft documentation on Blazor event handling (https://learn.microsoft.com/aspnet/core/blazor/components/event-handling). -The different event argument types for each event are, +The common event argument types include: -* Focus Events - UIFocusEventArgs -* Mouse Events - UIMouseEventArgs -* Keyboard Events - UIKeyboardEventArgs -* Touch Events – UITouchEventArgs +* Focus events - FocusEventArgs +* Mouse events - MouseEventArgs +* Keyboard events - KeyboardEventArgs +* Touch events – TouchEventArgs ## List of Native events supported -The following native event support has been provided to the Checkbox component: +The following native events are supported by the CheckBox component: | List of Native events | | | | | | --- | --- | --- | --- | --- | | onchange | oninput | onblur | onfocusout | onfocusin | -|onfocus|onclick|onkeydown|onkeyup|onkeypress| +| onfocus | onclick | onkeydown | onkeyup | onkeypress | ## How to bind onchange event to Checkbox -The `onchange` attribute is used to bind the onchange event for Checkbox. Here, we have explained about the sample code snippets of Checkbox. +Use the `@onchange` attribute to bind the native change event for the CheckBox. The handler receives a ChangeEventArgs instance from Blazor. ```cshtml @using Syncfusion.Blazor.Buttons @@ -40,14 +40,14 @@ The `onchange` attribute is used to bind the onchange event for Checkbox. Here, private bool isChecked = true; private void onChange(Microsoft.AspNetCore.Components.ChangeEventArgs args) { - //onChange Event triggered + // onChange event triggered } } ``` ## How to bind ValueChange event to Checkbox -To bind the change event in the checkbox [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfCheckBox-1.html#Syncfusion_Blazor_Buttons_SfCheckBox_1_ValueChange) event is used and the event is triggered when the value in the checkbox changes. +To handle component-level state changes, use the CheckBox [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfCheckBox-1.html#Syncfusion_Blazor_Buttons_SfCheckBox_1_ValueChange) event. This event is raised when the CheckBox value changes and provides strongly typed event data. ```cshtml @using Syncfusion.Blazor.Buttons @@ -58,7 +58,7 @@ To bind the change event in the checkbox [ValueChange](https://help.syncfusion.c private bool isChecked = true; private void ValueChange(ChangeEventArgs args) { - //ValueChange Event triggered + // ValueChange event triggered var state = args.Checked; } } diff --git a/blazor/check-box/style-and-appearance.md b/blazor/check-box/style-and-appearance.md index 36bbc05189..20887809ca 100644 --- a/blazor/check-box/style-and-appearance.md +++ b/blazor/check-box/style-and-appearance.md @@ -3,19 +3,19 @@ layout: post title: Styles and Appearances in Blazor CheckBox Component | Syncfusion description: Checkout and learn here all about Styles and Appearances in Syncfusion Blazor CheckBox component and more. platform: Blazor -control: Checkbox +control: CheckBox documentation: ug --- # Styles and Appearances in Blazor CheckBox Component -To modify the [Blazor CheckBox](https://www.syncfusion.com/blazor-components/blazor-checkbox) appearance, you need to override the default CSS of CheckBox component. Find the list of CSS classes and their corresponding section in CheckBox. Also, you have an option to create your own custom theme for the controls using our [Theme Studio](https://blazor.syncfusion.com/themestudio/?theme=material). +To modify the [Blazor CheckBox](https://www.syncfusion.com/blazor-components/blazor-checkbox) appearance, override the component’s default CSS classes. The table below lists common CSS hooks and the UI elements they target. Styles can be scoped to specific instances by applying a custom class via the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfCheckBox-1.html) property on the component. You can also create and apply a custom theme using the [Theme Studio](https://blazor.syncfusion.com/themestudio/?theme=material). |CSS Class | Purpose of Class| |-----|-----| -|.e-checkbox-wrapper .e-frame|To customize the checkbox frame. | -|.e-checkbox-wrapper:hover .e-frame|To customize the checkbox frame on hover. | -|.e-checkbox-wrapper .e-label|To customize the checkbox label. | -|.e-checkbox-wrapper:hover .e-label|To customize the checkbox label on hover. | -|.e-checkbox-wrapper .e-frame.e-check|To customize the checked checkbox. | -|.e-checkbox-wrapper:hover .e-frame.e-check|To customize the checked checkbox when hover. | \ No newline at end of file +|.e-checkbox-wrapper .e-frame|Customize the CheckBox frame (the box). | +|.e-checkbox-wrapper:hover .e-frame|Customize the CheckBox frame on hover. | +|.e-checkbox-wrapper .e-label|Customize the CheckBox label text. | +|.e-checkbox-wrapper:hover .e-label|Customize the CheckBox label on hover. | +|.e-checkbox-wrapper .e-frame.e-check|Customize the CheckBox when it is in the checked state. | +|.e-checkbox-wrapper:hover .e-frame.e-check|Customize the checked CheckBox on hover. | \ No newline at end of file diff --git a/blazor/chip/accessibility.md b/blazor/chip/accessibility.md index d818f3b004..eb33118c36 100644 --- a/blazor/chip/accessibility.md +++ b/blazor/chip/accessibility.md @@ -9,7 +9,7 @@ documentation: ug # Accessibility in Blazor Chip Component -The [Blazor Chips](https://www.syncfusion.com/blazor-components/blazor-chips) 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. +The [Blazor Chips](https://www.syncfusion.com/blazor-components/blazor-chips) 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/), and [WAI-ARIA roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. The accessibility compliance for the Blazor Chips component is outlined below. @@ -18,7 +18,7 @@ The accessibility compliance for the Blazor Chips component is outlined below. | [WCAG 2.2](https://www.w3.org/TR/WCAG22/) Support | Yes | | [Section 508](https://www.section508.gov/) Support | Yes | | Screen Reader Support | Yes | -| Right-To-Left Support | Yes | +| Right-to-left Support | Yes | | Color Contrast | Yes | | Mobile Device Support | Yes | | Keyboard Navigation Support | Yes | @@ -39,30 +39,30 @@ The accessibility compliance for the Blazor Chips component is outlined below. ## WAI-ARIA attributes -The Blazor Chips component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/) patterns to meet the accessibility. The following ARIA attributes are used in the Chips component: +The Blazor Chips component follows [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/) patterns to meet accessibility requirements. The following ARIA attributes and roles are used in the Chips component: | Attributes | Purpose | | -- | -- | -| `role=listbox` | Indicates the ChipList component wrapper element as `listbox`. | -| `role=option` | Used to convey a significant and contextual message to the user(ChipList). | -| `role=button` | Used to convey a significant and contextual message to the user(Single Chip). | -| `aria-label` | Provides an accessible name for the Chip. | -| `aria-selected` | Indicates the element is selected. | -| `aria-disabled` | Indicates element is perceivable but disabled. | -| `aria-multiselectable` | Indicates multiple items to be selected. | +| `role=listbox` | Identifies the ChipList wrapper as a selectable list (ChipList). | +| `role=option` | Identifies each chip item within a listbox as an option (ChipList). | +| `role=button` | Identifies a single, clickable chip when not part of a selectable list (single chip). | +| `aria-label` | Provides an accessible name for a chip. | +| `aria-selected` | Indicates whether a chip is selected. | +| `aria-disabled` | Indicates a chip is present but disabled. | +| `aria-multiselectable` | Indicates that multiple items can be selected (applied on the listbox container). | ## Keyboard interaction -The following shortcut keys are used to access the Blazor Chip component without any interruption. +The following shortcut keys enable keyboard operation of the Blazor Chip component: | Windows | Mac | Actions | |------------|-------|------------| -| Enter | Enter | Selects the targeted chip from the Chip/ChipItems. | -| Delete | Delete | Deletes the targeted chip from the Chip/ChipItems. | +| Enter | Enter | Selects the targeted chip in Chip/ChipItems. | +| Delete | Delete | Deletes the targeted chip in Chip/ChipItems. | ## Ensuring accessibility -The Blazor Chips component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) software tool during automated testing. +The Blazor Chips component’s accessibility is validated using the [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) tool during automated testing. The accessibility compliance of the Chip component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/chips) in a new window to evaluate the accessibility of the Chip component with accessibility tools. diff --git a/blazor/chip/customization.md b/blazor/chip/customization.md index 0987e3277b..a5292bb75c 100644 --- a/blazor/chip/customization.md +++ b/blazor/chip/customization.md @@ -9,19 +9,21 @@ documentation: ug # Customization in Blazor Chip Component -This section explains the customization of styles, leading icons, avatar, and trailing icons in Chip control. +This section explains how to customize the Chip component, including predefined styles, leading icons and avatars, trailing icons, and templates. ## Styles -The Chip control has the following predefined styles that can be defined using the [`CssClass`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfChip.html#Syncfusion_Blazor_Buttons_SfChip_CssClass) property. +The Chip component provides predefined visual styles that can be applied using the [`CssClass`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfChip.html#Syncfusion_Blazor_Buttons_SfChip_CssClass) property. Apply `CssClass` on: +- SfChip: to affect all chips in the list +- ChipItem: to style a specific chip | Class | Description | | -------- | -------- | | e-primary | Represents a primary chip. | | e-success | Represents a positive chip. | -| e-info | Represents an informative chip. | -| e-warning | Represents a chip with caution. | -| e-danger | Represents a negative chip. | +| e-info | Represents an informative chip. | +| e-warning | Represents a chip that requires caution. | +| e-danger | Represents a negative or destructive chip. | ```cshtml @using Syncfusion.Blazor.Buttons @@ -40,11 +42,13 @@ The Chip control has the following predefined styles that can be defined using t {% previewsample "https://blazorplayground.syncfusion.com/embed/BXLKsrBcBIwnwbXs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Customizing Blazor Chip Styles](./images/blazor-chip-style.png) +![Customizing Blazor Chip styles with predefined variants](./images/blazor-chip-style.png) + +N> Multiple style classes can be combined (for example, `e-outline e-primary`) to achieve the desired appearance. ## Leading icon -You can add and customize the leading icon of chip using the [`LeadingIconCss`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.ChipItem.html#Syncfusion_Blazor_Buttons_ChipItem_LeadingIconCss) property. +Add and customize a leading icon for a chip using the [`LeadingIconCss`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.ChipItem.html#Syncfusion_Blazor_Buttons_ChipItem_LeadingIconCss) property. ```cshtml @using Syncfusion.Blazor.Buttons @@ -79,11 +83,13 @@ You can add and customize the leading icon of chip using the [`LeadingIconCss`]( {% previewsample "https://blazorplayground.syncfusion.com/embed/hZLeDksEzbMVhnKc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Customizing LeadingIcon of Blazor Chip](./images/blazor-chip-leading-icon.gif) +![Customizing the leading icon in a Blazor Chip](./images/blazor-chip-leading-icon.gif) + +N> Ensure that each icon has clear text content in the chip (`Text`) for accessible names. When using decorative icons, consider appropriate CSS background images and contrast. ## Avatar -You can add and customize the avatar of chip using the [`LeadingIconCss`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.ChipItem.html#Syncfusion_Blazor_Buttons_ChipItem_LeadingIconCss) property. +Display an avatar as the leading visual using the [`LeadingIconCss`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.ChipItem.html#Syncfusion_Blazor_Buttons_ChipItem_LeadingIconCss) property. ```csharp @@ -118,11 +124,11 @@ You can add and customize the avatar of chip using the [`LeadingIconCss`](https: {% previewsample "https://blazorplayground.syncfusion.com/embed/BZrItusapbhiLdgI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - +N> Avatars are typically circular thumbnails. Provide meaningful chip text or an `aria-label` if the avatar conveys essential context. ## Leading content -You can add and customize the avatar content of chip using the [`LeadingText`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.ChipItem.html#Syncfusion_Blazor_Buttons_ChipItem_LeadingText) property. +Show text content inside the leading avatar area using the [`LeadingText`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.ChipItem.html#Syncfusion_Blazor_Buttons_ChipItem_LeadingText) property (for example, user initials). ```cshtml @using Syncfusion.Blazor.Buttons @@ -138,12 +144,11 @@ You can add and customize the avatar content of chip using the [`LeadingText`](h ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/VXrqCLrQrovxnFxf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Customizing Avatar Text of Blazor Chip](./images/blazor-chip-avatar-content.gif) +![Customizing avatar text for a Blazor Chip](./images/blazor-chip-avatar-content.gif) ## Trailing icon -You can add and customize the trailing icon of chip using the [`TrailingIconCss`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.ChipItem.html#Syncfusion_Blazor_Buttons_ChipItem_TrailingIconCss) property. +Add and customize a trailing icon for a chip using the [`TrailingIconCss`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.ChipItem.html#Syncfusion_Blazor_Buttons_ChipItem_TrailingIconCss) property (commonly used for secondary actions, such as delete). ```cshtml @using Syncfusion.Blazor.Buttons @@ -160,12 +165,13 @@ You can add and customize the trailing icon of chip using the [`TrailingIconCss` {% previewsample "https://blazorplayground.syncfusion.com/embed/hZVUiBhwBekjUuOz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +![Customizing the trailing icon in a Blazor Chip](./images/blazor-chip-trailing-icon.png) -![Customizing Blazor Chip TrailingIcon](./images/blazor-chip-trailing-icon.png) +N> Deletable chips can also be configured using `EnableDelete="true"`. Ensure the trailing icon and delete affordance do not conflict. ## Outline chip -Outline chip has the border with the background transparent. It can be set using the [`CssClass`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfChip.html#Syncfusion_Blazor_Buttons_SfChip_CssClass) property. +An outline chip has a visible border and a transparent background. Apply the outline style using the [`CssClass`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfChip.html#Syncfusion_Blazor_Buttons_SfChip_CssClass) property. ```cshtml @using Syncfusion.Blazor.Buttons @@ -181,15 +187,13 @@ Outline chip has the border with the background transparent. It can be set using ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/VtVgshrQrokgrCJD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - - -![Blazor Outline Chip with Transparent Background](./images/blazor-outline-chip-transparent-background.gif) +![Blazor outline chips with transparent background](./images/blazor-outline-chip-transparent-background.gif) ## Template -The Chips Template property allows users to customize the layout and design of each chip. Users can include any custom HTML elements, icons, links, or additional content by specifying them in the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.ChipItem.html#Syncfusion_Blazor_Buttons_ChipItem_Template) or as direct child content inside the [ChipItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.ChipItem.html#Syncfusion_Blazor_Buttons_ChipItem) of the SfChip component. +The ChipItem `Template` property enables full control over the chip’s layout and content. Custom HTML elements, icons, links, or additional content can be provided via the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.ChipItem.html#Syncfusion_Blazor_Buttons_ChipItem_Template) property or as direct child content of the [ChipItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.ChipItem.html#Syncfusion_Blazor_Buttons_ChipItem). -The following code example demonstrates how to customize the layout and design of chips by adding direct child content inside the `ChipItem`. +The following example customizes the layout and design by adding direct child content inside each `ChipItem`. ```cshtml @@ -248,4 +252,6 @@ The following code example demonstrates how to customize the layout and design o ``` -![Template in Blazor Chip component](./images/blazor-chip-template.png) \ No newline at end of file +![Using a custom template in the Blazor Chip component](./images/blazor-chip-template.png) + +N> When adding interactive elements (links, buttons) inside chip templates, ensure keyboard focus order, accessible names, and sufficient contrast are maintained. \ No newline at end of file diff --git a/blazor/chip/getting-started-with-web-app.md b/blazor/chip/getting-started-with-web-app.md index 1e7ac8f867..8195defffe 100644 --- a/blazor/chip/getting-started-with-web-app.md +++ b/blazor/chip/getting-started-with-web-app.md @@ -3,13 +3,13 @@ layout: post title: Getting Started with Syncfusion Blazor Chip Component in Web App description: Checkout and learn about the documentation for getting started with Blazor Chip Component in Blazor Web App. platform: Blazor -component: Chip +control: Chip documentation: ug --- # Getting Started with Blazor Chip Component in Web App -This section briefly explains about how to include [Blazor Chip](https://www.syncfusion.com/blazor-components/blazor-chips) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section briefly explains how to include the [Blazor Chip](https://www.syncfusion.com/blazor-components/blazor-chips) component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) or Visual Studio Code. {% tabcontents %} @@ -21,17 +21,17 @@ This section briefly explains about how to include [Blazor Chip](https://www.syn ## Create a new Blazor Web App in Visual Studio -You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) while creating a Blazor Web Application. +Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) when creating a Blazor Web Application. ## Install Syncfusion® Blazor Buttons and Themes NuGet in the Blazor Web App -To add **Blazor Chip** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor Chip** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If you use `WebAssembly` or `Auto` render modes in the Blazor Web App, install the Syncfusion® Blazor component NuGet packages in the client project. -Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, use the following Package Manager commands: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -42,7 +42,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. {% endtabcontent %} @@ -54,9 +54,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application. +Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) when creating a Blazor Web Application. For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. @@ -70,15 +70,15 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). +N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). ## Install Syncfusion® Blazor Buttons and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If you use `WebAssembly` or `Auto` render modes in the Blazor Web App, install the Syncfusion® Blazor component NuGet packages in the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure you are in the project root directory where your `.csproj` file is located. +* Run the following commands to install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) and ensure all dependencies are installed. {% tabs %} @@ -92,7 +92,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. {% endtabcontent %} @@ -105,7 +105,7 @@ N> Syncfusion® Blazor components are availa | WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| | Server | Open **~/_import.razor** file, which is located in the `Components` folder.| -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespace. +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -116,9 +116,9 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespace. {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. +Now, register the Syncfusion® Blazor service in the **~/Program.cs** file of your Blazor Web App. -If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -152,7 +152,7 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion® Blazor Service only in that **~/Program.cs** file. +If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. In this case, register the Syncfusion® Blazor service only in that **~/Program.cs** file. {% tabs %} {% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} @@ -189,11 +189,11 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, see [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) for different approaches to adding script references. ## Add Syncfusion® Blazor Chip component -Add the Syncfusion® Blazor Chip component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: +Add the Syncfusion® Blazor Chip component in a `.razor` file inside the `Pages` folder. If the interactivity location is `Per page/component` in the web app, define a render mode at the top of the component as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | @@ -202,7 +202,7 @@ Add the Syncfusion® Blazor Chip component i | | Server | @rendermode InteractiveServer | | | None | --- | -N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default. +N> If the **Interactivity Location** is set to `Global` and the **Render Mode** is `Auto`, `WebAssembly`, or `Server`, the render mode is configured in the `App.razor` file by default. {% tabs %} {% highlight razor %} @@ -233,7 +233,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i ## Render chip items from collection -You can render the chip items from collection using for loop in Blazor Chip component as follows. +Render chip items from a collection using a loop in the Blazor Chip component as follows. ```cshtml @@ -294,5 +294,4 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- 1. [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) 2. [Getting Started with Syncfusion® Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) -3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) - +3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) \ No newline at end of file diff --git a/blazor/chip/getting-started.md b/blazor/chip/getting-started.md index b71d238a13..d1cad13131 100644 --- a/blazor/chip/getting-started.md +++ b/blazor/chip/getting-started.md @@ -9,9 +9,9 @@ documentation: ug # Getting Started with Blazor Chip Component -This section briefly explains about how to include [Blazor Chip](https://www.syncfusion.com/blazor-components/blazor-chips) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This section briefly explains how to include the [Blazor Chip](https://www.syncfusion.com/blazor-components/blazor-chips) component in a Blazor WebAssembly app using Visual Studio and Visual Studio Code. -To get started quickly with Blazor Chip component, check on the following video: +To get started quickly with the Blazor Chip component, watch the following video: {% youtube "youtube:https://www.youtube.com/watch?v=YJtHD8jPwW0" %} @@ -26,11 +26,11 @@ To get started quickly with Blazor Chip component, check on the following video: ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft templates](https://learn.microsoft.com/en-us/aspnetcore/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ## Install Syncfusion® Blazor Buttons and Themes NuGet in the App -To add **Blazor Chip** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor Chip** component to the app, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the following Package Manager commands: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -41,7 +41,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. {% endtabcontent %} @@ -53,9 +53,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnetcore/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application using the following command in the terminal (Ctrl+`). {% tabs %} @@ -71,8 +71,8 @@ cd BlazorApp ## Install Syncfusion® Blazor Buttons and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure you are in the project root directory where your `.csproj` file is located. +* Run the following commands to install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) and ensure all dependencies are installed. {% tabs %} @@ -86,7 +86,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. {% endtabcontent %} @@ -94,7 +94,7 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespace. +Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespaces. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -105,7 +105,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +Now, register the Syncfusion® Blazor service in the **~/Program.cs** file of your Blazor WebAssembly app. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -138,7 +138,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, review [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) for different approaches to adding script references in a Blazor application. ## Add Blazor Chip component @@ -158,13 +158,13 @@ Add the Syncfusion® Blazor Chip component i {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Chip component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor Chip component in your default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/VXrTNCBaiGVbwHyL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chip Component](./images/blazor-chip-component.png)" %} ## Render chip items from collection -You can render the chip items from collection using for loop in Blazor Chip component as follows. +Render chip items from a collection using a loop in the Blazor Chip component as follows. ```cshtml @@ -224,4 +224,4 @@ You can render the chip items from collection using for loop in Blazor Chip comp * [Getting Started with Syncfusion® Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) * [Getting Started with Syncfusion® Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) -N> You can also explore our [Blazor Chips example](https://blazor.syncfusion.com/demos/chips/default-functionalities?theme=bootstrap5) that shows you how to render and configure the Chips. +N> You can also explore our [Blazor Chips example](https://blazor.syncfusion.com/demos/chips/default-functionalities?theme=bootstrap5) that shows how to render and configure the Chips. \ No newline at end of file diff --git a/blazor/chip/style.md b/blazor/chip/style.md index ac499bdbb2..42d5216ff0 100644 --- a/blazor/chip/style.md +++ b/blazor/chip/style.md @@ -9,11 +9,11 @@ documentation: ug # CSS Structure in Blazor Chip Component -The following content provides the exact CSS structure that can be used to modify the control's appearance based on the user preference. +Use the following CSS structure to modify the Chip component’s appearance according to application requirements. Styles can be applied globally or scoped to a specific instance by adding a custom class through the component’s CssClass property. ## Customizing the chip text -Use the following CSS to customize the chip text properties. +Use the following CSS to customize chip text properties. ```css .e-chip .e-chip-text { @@ -25,7 +25,7 @@ Use the following CSS to customize the chip text properties. ## Customizing the chip icon -Use the following CSS to customize the chip icon properties. +Use the following CSS to customize chip icon properties. ```css .e-chip .e-chip-icon { @@ -58,7 +58,7 @@ Use the following CSS to customize the chip outline. ## Customizing the chip on selection -Use the following CSS to customize the chip on selection. +Use the following CSS to customize chip appearance when selected. ```css /* To customize single chip on selection */ @@ -76,11 +76,11 @@ Use the following CSS to customize the chip on selection. ## Customizing the chip avatar text -Use the following CSS to customize the chip avatar text properties. +Use the following CSS to customize chip avatar text properties. ```css .e-chip-list .e-chip .e-chip-avatar { background-color: #d51a1a; color: #fafafa; } -``` +``` \ No newline at end of file diff --git a/blazor/chip/types.md b/blazor/chip/types.md index 2fd99e0c8d..c04bf6bf5c 100644 --- a/blazor/chip/types.md +++ b/blazor/chip/types.md @@ -9,7 +9,7 @@ documentation: ug # Types in Blazor Chip Component -The Chip control has the following types. +The Chip component supports the following types: * Input Chip * Choice Chip @@ -18,7 +18,7 @@ The Chip control has the following types. ## Input Chip -Input Chip holds information in compact form. It converts user input into chips. +An input chip holds information in a compact form, often representing user input or a selected value. It can include avatars or icons alongside text. ```cshtml @using Syncfusion.Blazor.Buttons @@ -35,11 +35,11 @@ Input Chip holds information in compact form. It converts user input into chips. {% previewsample "https://blazorplayground.syncfusion.com/embed/BDhotaWuJwkKgwBO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor Chip with Input Items](./images/blazor-chip-input-items.png) +![Blazor chip displaying input items with avatars](./images/blazor-chip-input-items.png) ## Choice Chip -Choice Chip allows you to select a single chip from the set of Chip/ChipItems. It can be enabled by setting the [`Selection`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfChip.html#Syncfusion_Blazor_Buttons_SfChip_Selection) property to `Single`. +A choice chip allows selecting a single chip from a set. Enable this behavior by setting the [`Selection`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfChip.html#Syncfusion_Blazor_Buttons_SfChip_Selection) property to `Single`. ```cshtml @using Syncfusion.Blazor.Buttons @@ -56,11 +56,11 @@ Choice Chip allows you to select a single chip from the set of Chip/ChipItems. I {% previewsample "https://blazorplayground.syncfusion.com/embed/LXrgihLQrIIaiZzR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Single Selection in Blazor Chip](./images/blazor-chip-single-selection.gif) +![Single selection behavior in Blazor chip](./images/blazor-chip-single-selection.gif) ## Filter Chip -Filter Chip allows you to select a multiple chip from the set of Chip/ChipItems. It can be enabled by setting the [`Selection`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfChip.html#Syncfusion_Blazor_Buttons_SfChip_Selection) property to `Multiple`. +A filter chip allows selecting multiple chips from a set. Enable this behavior by setting the [`Selection`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfChip.html#Syncfusion_Blazor_Buttons_SfChip_Selection) property to `Multiple`. ```cshtml @using Syncfusion.Blazor.Buttons @@ -77,12 +77,11 @@ Filter Chip allows you to select a multiple chip from the set of Chip/ChipItems. {% previewsample "https://blazorplayground.syncfusion.com/embed/rjVUChLGrodMJCaU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Multiple Selection in Blazor Chip](./images/blazor-chip-multiple-selection.gif) +![Multiple selection behavior in Blazor chip](./images/blazor-chip-multiple-selection.gif) ## Action Chip -The Action Chip triggers the event like [`OnClick`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.ChipEvents.html#Syncfusion_Blazor_Buttons_ChipEvents_OnClick) or [`OnDelete`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.ChipEvents.html#Syncfusion_Blazor_Buttons_ChipEvents_OnDelete), which helps to do action based on the event. +An action chip triggers actions such as click or delete. Use the [`OnClick`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.ChipEvents.html#Syncfusion_Blazor_Buttons_ChipEvents_OnClick) or [`OnDelete`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.ChipEvents.html#Syncfusion_Blazor_Buttons_ChipEvents_OnDelete) events to respond to user interactions. ```cshtml @using Syncfusion.Blazor.Buttons @@ -111,12 +110,11 @@ The Action Chip triggers the event like [`OnClick`](https://help.syncfusion.com/ ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/BjLgCrLGBSnHjcxB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Action Chip](./images/blazor-action-chip.gif) +![Blazor action chip responding to click events](./images/blazor-action-chip.gif) ### Deletable Chip -Deletable Chip allows you to delete a chip from Chip/ChipItems. It can be enabled by setting the [`EnableDelete`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfChip.html#Syncfusion_Blazor_Buttons_SfChip_EnableDelete) property to `true`. +A deletable chip includes a delete affordance to remove a chip from the list. Enable deletion by setting the [`EnableDelete`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfChip.html#Syncfusion_Blazor_Buttons_SfChip_EnableDelete) property to `true`. ```cshtml @using Syncfusion.Blazor.Buttons @@ -130,4 +128,4 @@ Deletable Chip allows you to delete a chip from Chip/ChipItems. It can be enable ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rthgCBLwLodvAbRF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rthgCBLwLodvAbRF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/message/accessibility.md b/blazor/message/accessibility.md index 6c0bf330f3..1779a34819 100644 --- a/blazor/message/accessibility.md +++ b/blazor/message/accessibility.md @@ -9,7 +9,7 @@ documentation: ug # Accessibility in Blazor Message -The Blazor Message 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. +The Blazor Message component follows established accessibility guidelines and standards, including ADA, Section 508, and WCAG 2.2. It supports screen readers, keyboard navigation, right-to-left (RTL) layouts, and high-contrast themes. For component details, see the Message documentation and API reference in the Syncfusion Blazor docs. The accessibility compliance for the Blazor Message component is outlined below. @@ -38,25 +38,29 @@ The accessibility compliance for the Blazor Message component is outlined below. ## ARIA attributes -The Blazor Message component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) patterns to meet the accessibility. The following ARIA attributes are used in the Blazor Message component: +The Blazor Message component follows the WAI-ARIA Authoring Practices for alerts to ensure compatibility with assistive technologies. The following ARIA roles and attributes are used: | Attributes | Purpose | | --- | --- | -| `role=alert` | Used to convey a significant and contextual message to the user. | -| `aria-label` | Provides an accessible name for the close icon. | +| `role=alert` | Announces important, time-sensitive messages to screen reader users. Use for urgent content that should interrupt politely. | +| `role=status` | Announces non-urgent status updates without interrupting the user’s task flow. | +| `aria-live` (`polite`/`assertive`) | Controls how updates are announced by screen readers. `assertive` announces sooner; `polite` waits for a pause. | +| `aria-atomic` | When set, ensures the entire message region is announced as a whole when updated. | +| `aria-label` | Provides an accessible name for the close icon when it is present. | +| `aria-labelledby` | Associates the message with a header or title element for an accessible name. | ## Keyboard interaction -The Blazor Message component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor Message component. +The Blazor Message component follows the keyboard interaction guideline, making it accessible to users who rely on keyboards or assistive technologies. The following keyboard shortcuts are supported: | Windows | Mac | Actions | | --- | --- | --- | -| Tab / Shift + Tab | Tab / ⇧ + Tab | To focus the close icon in the message. | -| Enter / Space | Enter / Space | Closes the focused close icon's message. | +| Tab / Shift + Tab | Tab / ⇧ + Tab | Moves focus to the message’s actionable elements, such as the close icon. | +| Enter / Space | Enter / Space | Activates the focused close icon to dismiss the message. | ## Ensuring accessibility -The Blazor Message component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests. +The Blazor Message component's accessibility levels are validated with [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) and Playwright tests to detect issues such as missing accessible names, incorrect ARIA states, and insufficient color contrast. Actual results may vary based on application markup, theme, and customization. The accessibility compliance of the Blazor Message component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/message) in a new window to evaluate the accessibility of the Blazor Message component with accessibility tools. diff --git a/blazor/message/customization.md b/blazor/message/customization.md index 957d05f091..26c33e585f 100644 --- a/blazor/message/customization.md +++ b/blazor/message/customization.md @@ -9,13 +9,13 @@ documentation: ug # Customization in Blazor Message -The Message component allows the user to customize the content display positions and appearance. This section explains the details about changing the content alignments and border styles for messages. +The Message component allows users to customize content alignment and visual appearance. This section explains how to change content alignment and adjust corner radius (rounded or square) using CSS. For an overview and API details, see the Message component documentation (https://blazor.syncfusion.com/documentation/message/getting-started) and the SfMessage API reference (https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.SfMessage.html). ## Content Alignment -Normally, the message content is aligned to the **left**. The Message component allows the user to align the message content in the **center** or **right** through the [ContentAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.SfMessage.html#Syncfusion_Blazor_Notifications_SfMessage_ContentAlignment) property. +By default, message content is aligned to the left. Use the [ContentAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.SfMessage.html#Syncfusion_Blazor_Notifications_SfMessage_ContentAlignment) property to align content to the center or right using the HorizontalAlign enum values. -The following example demonstrates the message with different content alignments. +The following example demonstrates messages with different content alignments. {% tabs %} {% highlight razor %} @@ -46,13 +46,13 @@ The following example demonstrates the message with different content alignments {% endhighlight %} {% endtabs %} -![Message Content Alignment](./images/message-content-alignment.png) +![Blazor Message content aligned left, center, and right](./images/message-content-alignment.png) ## Rounded and Square -To customize the Message component's appearance, add the custom class to the message through the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.SfMessage.html#Syncfusion_Blazor_Notifications_SfMessage_CssClass) property. This custom class will be added to the root element. Based on this custom class, the user can override the message styles at the application level. +To customize the Message component's appearance, add a custom class to the message via the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.SfMessage.html#Syncfusion_Blazor_Notifications_SfMessage_CssClass) property. The custom class is appended to the root element (.e-message), allowing styles to be scoped per instance. -The following example shows the rounded and squared appearance of the message, which can be achieved by adding the `CssClass` property. +The following example shows rounded and square corner styles applied using the CssClass property. {% tabs %} {% highlight razor %} @@ -90,13 +90,13 @@ The following example shows the rounded and squared appearance of the message, w {% endhighlight %} {% endtabs %} -![Message Custom Appearance](./images/message-rounded-square.png) +![Blazor Message with rounded and square corner styles](./images/message-rounded-square.png) ## CSS Message -The Blazor Message has predefined CSS classes that can be defined in the HTML elements, which renders the message without any script reference. This can display a simple message with content and make the code lighter. +The Blazor Message provides predefined CSS classes that can be applied to plain HTML elements to render a styled message without component or script references. Ensure a Syncfusion Blazor theme stylesheet is referenced in the app so these classes take effect. This approach provides visual styling only; interactive features (such as close button behavior) require component usage. -The following DOM structure is required to display the simple message with the content. +The following DOM structure renders a simple message with content: ```bash @@ -106,7 +106,7 @@ The following DOM structure is required to display the simple message with the c ``` -The following DOM structure is required to display the simple message with the content and severity icon. +The following DOM structure renders a simple message with content and a severity icon: ```bash @@ -117,7 +117,7 @@ The following DOM structure is required to display the simple message with the c ``` -The following is the available list of predefined CSS classes to make the appearance of a message. +The following is the available list of predefined CSS classes to control the appearance of a message. | Class | Description | | -------- | -------- | @@ -132,7 +132,7 @@ The following is the available list of predefined CSS classes to make the appear | e-content-center | Aligns the message content to the center. | | e-content-right | Aligns the message content to the right. | -The following example shows the message which renders without any script reference. +The following example shows a message rendered with CSS classes only (no component or script reference). Add appropriate ARIA attributes (for example, role="alert") based on the message purpose for accessibility. {% tabs %} {% highlight razor %} @@ -168,4 +168,4 @@ The following example shows the message which renders without any script referen {% endhighlight %} {% endtabs %} -![Blazor Message Component](./images/message-default.PNG) \ No newline at end of file +![Blazor Message styled using predefined CSS classes](./images/message-default.PNG) \ No newline at end of file diff --git a/blazor/message/getting-started-webapp.md b/blazor/message/getting-started-webapp.md index bbc430a4b8..1f201a5eec 100644 --- a/blazor/message/getting-started-webapp.md +++ b/blazor/message/getting-started-webapp.md @@ -9,7 +9,7 @@ documentation: ug # Getting started with Blazor Message Component in Blazor Web App -This section briefly explains about how to include `Blazor Message` component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This guide explains how to include the `Blazor Message` component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. {% tabcontents %} @@ -17,21 +17,21 @@ This section briefly explains about how to include `Blazor Message` component in ## Prerequisites -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +* Review the [system requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements). ## Create a new Blazor Web App in Visual Studio -You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application. +Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) when creating the Blazor Web App. ## Install Syncfusion® Blazor Notifications and Themes NuGet in the App -To add **Blazor Message** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Notifications](https://www.nuget.org/packages/Syncfusion.Blazor.Notifications) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor Message** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Notifications](https://www.nuget.org/packages/Syncfusion.Blazor.Notifications) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using `WebAssembly` or `Auto` render modes in a Blazor Web App, install the Syncfusion® Blazor component NuGet packages in the Client project. -Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, run the following Package Manager commands: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -42,7 +42,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the full list and component details. {% endtabcontent %} @@ -50,15 +50,15 @@ N> Syncfusion® Blazor components are availa ## Prerequisites -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +* Review the [system requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements). ## Create a new Blazor Web App in Visual Studio Code -You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor Web App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application. +Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) when creating the Blazor Web App. -For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. +For example, for a Blazor Web App with the `Auto` interactive render mode, run the following commands. {% tabs %} {% highlight c# tabtitle="Blazor Web App" %} @@ -70,15 +70,15 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). +N> For details on creating a **Blazor Web App** with various interactive modes and locations, see [render interactive modes](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). ## Install Syncfusion® Blazor Notifications and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using `WebAssembly` or `Auto` render modes in a Blazor Web App, install the Syncfusion® Blazor component NuGet packages in the Client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Notifications](https://www.nuget.org/packages/Syncfusion.Blazor.Notifications) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure the terminal is in the project root directory where the `.csproj` file is located. +* Run the following commands to install [Syncfusion.Blazor.Notifications](https://www.nuget.org/packages/Syncfusion.Blazor.Notifications) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) and restore dependencies. {% tabs %} @@ -92,7 +92,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the full list and component details. {% endtabcontent %} @@ -102,8 +102,8 @@ N> Syncfusion® Blazor components are availa | Interactive Render Mode | Description | | -- | -- | -| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| -| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| +| WebAssembly or Auto | Open **~/_Imports.razor** from the Client project.| +| Server | Open **Components/_Imports.razor** in the Server project (Components folder).| Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Notifications` namespace. @@ -118,7 +118,7 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Notifications` namespace. Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App (Server and Client). {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -152,7 +152,7 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion® Blazor Service only in that **~/Program.cs** file. +If the **Interactive Render Mode** is set to `Server`, the project will contain a single **~/Program.cs** file. In this case, register the Syncfusion® Blazor service only in that **~/Program.cs** file. {% tabs %} {% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} @@ -175,7 +175,7 @@ var app = builder.Build(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: +The theme stylesheet and script are available via NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file, as shown below: ```html @@ -189,11 +189,11 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> See [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) for Static Web Assets, CDN, and CRG options to reference themes. Also see [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) for different approaches to include scripts. ## Add Syncfusion® Blazor Message component -Add the Syncfusion® Blazor Message component in the **~Pages/.razor** file. If an interactivity location as `Per page/component` in the web app, define a render mode at the top of the `~Pages/.razor` component, as follows: +Add the Syncfusion® Blazor Message component in the **~Pages/.razor** file. If the interactivity location is `Per page/component` in the web app, define a render mode at the top of the `~Pages/.razor` component, as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | @@ -202,7 +202,7 @@ Add the Syncfusion® Blazor Message componen | | Server | @rendermode InteractiveServer | | | None | --- | -N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default. +N> If the **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto`, `WebAssembly`, or `Server`, the render mode is configured in the `App.razor` file by default. {% tabs %} {% highlight razor %} diff --git a/blazor/message/getting-started.md b/blazor/message/getting-started.md index 9929389548..487f039c4f 100644 --- a/blazor/message/getting-started.md +++ b/blazor/message/getting-started.md @@ -9,9 +9,9 @@ documentation: ug # Getting Started with Blazor Message Component -This section briefly explains how to include the Blazor Message component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This guide shows how to add the Blazor Message component to a Blazor WebAssembly app using Visual Studio and Visual Studio Code. -To get start quickly with Blazor Message component, check on this video: +To get started quickly with the Blazor Message component, watch this video or explore the GitHub sample: {% youtube "youtube:https://www.youtube.com/watch?v=3H0pOZNYTfw"%} @@ -25,11 +25,11 @@ To get start quickly with Blazor Message component, check on this video: ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft templates](https://learn.microsoft.com/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ## Install Syncfusion® Blazor Notifications and Themes NuGet in the App -To add **Blazor Message** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Notifications](https://www.nuget.org/packages/Syncfusion.Blazor.Notifications) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor Message** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Notifications](https://www.nuget.org/packages/Syncfusion.Blazor.Notifications) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes). Alternatively, run the following Package Manager commands. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -40,7 +40,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the full package list and component details. {% endtabcontent %} @@ -52,9 +52,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application using the following commands in the terminal (Ctrl+`). {% tabs %} @@ -70,8 +70,8 @@ cd BlazorApp ## Install Syncfusion® Blazor Notifications and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Notifications](https://www.nuget.org/packages/Syncfusion.Blazor.Notifications) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure the terminal is in the project root directory where the `.csproj` file is located. +* Run the following commands to install [Syncfusion.Blazor.Notifications](https://www.nuget.org/packages/Syncfusion.Blazor.Notifications) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) and restore dependencies. {% tabs %} @@ -85,7 +85,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the full package list and component details. {% endtabcontent %} @@ -93,7 +93,7 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Notifications` namespace. +Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Notifications` namespaces. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -104,7 +104,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +Now, register the Syncfusion® Blazor service in the **~/Program.cs** file of the Blazor WebAssembly app. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -126,9 +126,11 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} +N> A valid Syncfusion license is required for production use. For details and registration steps, see [Syncfusion licensing](https://blazor.syncfusion.com/documentation/getting-started/licensing). + ## Add Stylesheet -The theme stylesheet can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet references in the `` section of the **~/index.html** file. +The theme stylesheet can be referenced from NuGet via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Add the stylesheet reference in the `` section of **~/index.html**. To enable component scripts, also add the Syncfusion script reference as described in [Adding script references](https://blazor.syncfusion.com/documentation/common/adding-script-references). ```html @@ -136,11 +138,11 @@ The theme stylesheet can be accessed from NuGet through [Static Web Assets](http ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. +N> For theme reference options (Static Web Assets, CDN, and CRG), see [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes). For script reference approaches, see [Adding script references](https://blazor.syncfusion.com/documentation/common/adding-script-references). ## Add Blazor Message component -Add the Syncfusion® Blazor Message component in the **~/Pages/Index.razor** file. +Add the Syncfusion® Blazor Message component in **~/Pages/Index.razor**. {% tabs %} {% highlight razor %} @@ -155,6 +157,6 @@ Add the Syncfusion® Blazor Message componen {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Message component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor Message component in the default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLJNiKZLsAMXCNa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Message Component](./images/message-default.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLJNiKZLsAMXCNa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Message component default appearance](./images/message-default.png)" %} \ No newline at end of file diff --git a/blazor/message/icons.md b/blazor/message/icons.md index 19ebf7a62d..63d50da53f 100644 --- a/blazor/message/icons.md +++ b/blazor/message/icons.md @@ -1,6 +1,6 @@ --- layout: post -title: Icons with Blazor Message Component | Syncfusion +title: Icons in Blazor Message Component | Syncfusion description: Checkout and learn about Icons with Blazor Message component in Blazor Server App and Blazor WebAssembly App. platform: Blazor control: Message @@ -9,13 +9,13 @@ documentation: ug # Icons in Blazor Message -This section explains the message with no icons, how to show or hide the close icon and add the custom severity icon to the message. +This topic explains how to control icons in the Message component: hide default severity icons, add a custom severity icon with CSS, and show or hide the close icon. ## No Icon -By default, severity icons can be displayed according to the severity types to make it more understandable to the user by visual information rather than text. To hide the severity icons, set the [ShowIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.SfMessage.html#Syncfusion_Blazor_Notifications_SfMessage_ShowIcon) property to `false`. +By default, the Message component displays a severity icon that matches the configured severity to provide clear visual context. To hide severity icons, set the [ShowIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.SfMessage.html#Syncfusion_Blazor_Notifications_SfMessage_ShowIcon) property to false. Severity styling (color/background) still applies even when the icon is hidden. -The following example demonstrates the different severity messages without the severity icons. +The following example demonstrates different severity messages without severity icons. {% tabs %} {% highlight razor %} @@ -51,13 +51,13 @@ The following example demonstrates the different severity messages without the s {% endhighlight %} {% endtabs %} -![Message Severity with No Icons](./images/message-severity.png) +![Blazor Message severities rendered without icons](./images/message-severity.png) ## Custom Icon -By default, the severity icons can be displayed according to the severity type to make it more understandable to the user by visual information rather than text. If the user wants to customize these icons, it can be achieved through the `CssClass` property. +To replace the default severity icon, apply a custom CSS class with [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.SfMessage.html#Syncfusion_Blazor_Notifications_SfMessage_CssClass) and target the icon element (for example, .e-msg-icon::before). A custom glyph font (as shown) or an SVG-based approach can be used to provide a custom icon. -The following example demonstrates how the default message is rendered with a custom severity icon. +The following example demonstrates a message rendered with a custom severity icon. {% tabs %} {% highlight razor %} @@ -98,15 +98,13 @@ The following example demonstrates how the default message is rendered with a cu {% endhighlight %} {% endtabs %} -![Message Custom Icon](./images/message-custom-icon.png) +![Blazor Message with a custom severity icon](./images/message-custom-icon.png) ## Close Icon -The message can be rendered with or without the close icon. The close icon is used to hide the message, either by manually clicking the close icon or through keyboard interaction. +The Message component can render with or without a close icon. The close icon dismisses the message via click or keyboard activation. By default, the close icon is not shown. To render a close icon, set [ShowCloseIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.SfMessage.html#Syncfusion_Blazor_Notifications_SfMessage_ShowCloseIcon) to true. Use @bind-Visible to toggle visibility and handle the Closed callback to respond when the message is dismissed. -By default, the close icon is not rendered in the message. To show the close icon, set the [ShowCloseIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.SfMessage.html#Syncfusion_Blazor_Notifications_SfMessage_ShowCloseIcon) property to `true`. - -In the following example, the messages are rendered with the close icon. +In the following example, messages are rendered with a close icon. {% tabs %} {% highlight razor %} @@ -223,4 +221,4 @@ In the following example, the messages are rendered with the close icon. {% endhighlight %} {% endtabs %} -![Message Close Icon](./images/message-close-icon.png) +![Blazor Messages rendered with close icons and dismiss behavior](./images/message-close-icon.png) \ No newline at end of file diff --git a/blazor/message/severities.md b/blazor/message/severities.md index 3996a167b0..fda3691e55 100644 --- a/blazor/message/severities.md +++ b/blazor/message/severities.md @@ -9,11 +9,11 @@ documentation: ug # Severities in Blazor Message -The severity denotes the importance and context of the message to the user. The message contains different severity types. Use the [Severity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.SfMessage.html#Syncfusion_Blazor_Notifications_SfMessage_Severity) property to display the messages with different severity levels. +Severity indicates the importance and context of a message. The component supports multiple severity levels configured via the [Severity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.SfMessage.html#Syncfusion_Blazor_Notifications_SfMessage_Severity) property on the message (using the MessageSeverity enum). Severity affects the visual style (colors and icon). The default severity is Normal. To hide the severity icon while retaining the style, use the [ShowIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.SfMessage.html#Syncfusion_Blazor_Notifications_SfMessage_ShowIcon) property. -The available severity types are **Normal**, **Success**, **Info**, **Warning** and **Error**. The default severity type for messages is **Normal**. +The available severity types are Normal, Success, Info, Warning, and Error. -The following example demonstrates the severity of the messages. +The following example demonstrates messages rendered with each severity level. {% tabs %} {% highlight razor %} @@ -44,4 +44,4 @@ The following example demonstrates the severity of the messages. {% endhighlight %} {% endtabs %} -![Message Severity with Icons](./images/message-severity-icon.png) +![Blazor Message severity examples with icons for Normal, Info, Success, Warning, and Error](./images/message-severity-icon.png) \ No newline at end of file diff --git a/blazor/message/template.md b/blazor/message/template.md index e7018eac67..52b7e79a43 100644 --- a/blazor/message/template.md +++ b/blazor/message/template.md @@ -9,10 +9,9 @@ documentation: ug # Template in Blazor Message -The message supports templates that allows the user to customize the content with a custom structure. The content can be a string, paragraph, or any other HTML element. The template can be added directly to the `SfMessage` tags. +The Message component supports templated content, allowing custom structure and elements. Place any valid Razor or HTML—such as headings, paragraphs, or buttons—between the `SfMessage` tags. Severity, icon visibility, and the close icon can still be configured when using templated content. - -In the following sample, the Message component content is customized with HTML elements and Blazor Buttons, which are directly added to the `SfMessage` tag. +The following example customizes message content with HTML elements and Blazor Buttons, added directly inside the `SfMessage` tags. The example also demonstrates toggling visibility via a Show button and a Dismiss action. {% tabs %} {% highlight razor %} @@ -81,4 +80,4 @@ In the following sample, the Message component content is customized with HTML e {% endhighlight %} {% endtabs %} -![Message Template](./images/message-template.png) \ No newline at end of file +![Blazor Message with custom templated content and action buttons](./images/message-template.png) \ No newline at end of file diff --git a/blazor/message/variants.md b/blazor/message/variants.md index 1c1ce80936..cd6fedc176 100644 --- a/blazor/message/variants.md +++ b/blazor/message/variants.md @@ -9,14 +9,14 @@ documentation: ug # Variants in Blazor Message -The Message has predefined appearance variants for different visual representations. The variants of the message can be changed based on the [Variant](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.SfMessage.html#Syncfusion_Blazor_Notifications_SfMessage_Variant) property. +The Message component provides predefined appearance variants for different visual emphasis. Configure the variant using the [Variant](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.SfMessage.html#Syncfusion_Blazor_Notifications_SfMessage_Variant) property on SfMessage. Variant affects colors, borders, and background styling; severity styling (color/icon) is applied within each variant. -The available variants are **Text**, **Outlined** and **Filled**. The default variant type for messages is **Text**. -* **Text** - The severity is differentiated using a text color and a light background color. -* **Outlined** - The severity is differentiated using a text color and a border without a background. -* **Filled** - The severity is differentiated using a text color and a dark background color. +The available variants are Text, Outlined, and Filled. The default variant is Text. +* Text – Differentiates severity with a text color and a light background. +* Outlined – Differentiates severity with a text color and a border, without a background. +* Filled – Differentiates severity with a text color and a dark background. -The following example demonstrates the default message with different variant types. +The following example demonstrates messages rendered with each variant type. {% tabs %} {% highlight razor %} @@ -69,8 +69,8 @@ The following example demonstrates the default message with different variant ty {% endhighlight %} {% endtabs %} -![Message Filled Variant](./images/variants-filled.png) +![Blazor Message with Filled variant across severities](./images/variants-filled.png) -![Message Outlined Variant](./images/variants-outlined.png) +![Blazor Message with Outlined variant across severities](./images/variants-outlined.png) -![Message Text Variant](./images/variants-text.png) \ No newline at end of file +![Blazor Message with Text variant across severities](./images/variants-text.png) \ No newline at end of file diff --git a/blazor/signature/accessibility.md b/blazor/signature/accessibility.md index a482b67d95..bdef806266 100644 --- a/blazor/signature/accessibility.md +++ b/blazor/signature/accessibility.md @@ -9,7 +9,7 @@ documentation: ug # Accessibility in Blazor Signature Component -The Blazor Signature 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. +The Blazor Signature component follows accessibility guidelines and standards, including ADA, Section 508, and WCAG 2.2. It supports screen readers, keyboard navigation, and color contrast customization. For component details, see the Signature documentation and API reference in the Syncfusion Blazor docs. The accessibility compliance for the Blazor Signature component is outlined below. @@ -38,18 +38,18 @@ The accessibility compliance for the Blazor Signature component is outlined belo ## Keyboard interaction -The Blazor Signature component followed the [keyboard interaction] guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor Signature component. +The Blazor Signature component follows keyboard navigation guidance to support users of assistive technologies and those who rely on the keyboard. The following keyboard shortcuts are supported by the Blazor Signature component (shortcuts may require handling in application code, depending on the hosting page and focus management). See the keyboard navigation guidance at [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support). | Windows | Mac | Actions | | --- | --- | --- | | Ctrl + Z | ⌘ + Z | Undo the last action. | | Ctrl + Y | ⌘ + Y | Redo the last action. | -| Ctrl + S | ⌘ + S | To save the signature. | -| delete | delete | Erases all the signature strokes signed by user. | +| Ctrl + S | ⌘ + S | Save the signature. | +| Delete | Delete | Erases all signature strokes entered by the user. | ## Ensuring accessibility -The Blazor Signature component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests. +The Blazor Signature component's accessibility levels are validated using [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with Playwright tests. The accessibility compliance of the Blazor Signature component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/signature) in a new window to evaluate the accessibility of the Blazor Signature component with accessibility tools. diff --git a/blazor/signature/customization.md b/blazor/signature/customization.md index 263cb01716..d95ddffff0 100644 --- a/blazor/signature/customization.md +++ b/blazor/signature/customization.md @@ -7,15 +7,15 @@ control: Signature documentation: ug --- -# Customization of Signature component +# Customization in Blazor Signature Component -The [Blazor Signature](https://www.syncfusion.com/blazor-components/blazor-signature) component draws stroke/path to connect one or more points while drawing in canvas. This path is drawn with moveTo() and lineTo() method. We can able to customize the stroke by modifying its color and width. And the background of the signature also customizable by using its color and image. +The [Blazor Signature](https://www.syncfusion.com/blazor-components/blazor-signature) component supports customizing the drawing experience and appearance. Configure stroke width (minimum/maximum and velocity-based variation), stroke color, background color, and background image to match application requirements. The component handles canvas rendering internally; no direct canvas API usage is required. ## Stroke Width -The stroke width depends on the [`MaxStrokeWidth`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSignature.html#Syncfusion_Blazor_Inputs_SfSignature_MaxStrokeWidth), [`MinStrokeWidth`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSignature.html#Syncfusion_Blazor_Inputs_SfSignature_MinStrokeWidth) and [`Velocity`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSignature.html#Syncfusion_Blazor_Inputs_SfSignature_Velocity) values. And the variable stroke width is calculated based on the values of MaxStrokeWidth and MinStrokeWidth for smoother signature and velocity value is used for realistic signature. +Stroke width is controlled by the [`MaxStrokeWidth`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSignature.html#Syncfusion_Blazor_Inputs_SfSignature_MaxStrokeWidth), [`MinStrokeWidth`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSignature.html#Syncfusion_Blazor_Inputs_SfSignature_MinStrokeWidth), and [`Velocity`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSignature.html#Syncfusion_Blazor_Inputs_SfSignature_Velocity) properties. Variable stroke width is calculated between the specified minimum and maximum values for smoother, more natural signatures, and Velocity fine-tunes the responsiveness. -In the following example, minimum stroke width is set as 0.5, maximum stroke width is set as 3 and velocity is set as 0.7. +In the following example, the minimum stroke width is 0.5, maximum stroke width is 3, and velocity is 0.7. ```cshtml @using Syncfusion.Blazor.Inputs @@ -23,11 +23,11 @@ In the following example, minimum stroke width is set as 0.5, maximum stroke wid ``` -![Blazor Signature Component](./images/blazor-signature-stroke-width.png) +![Blazor Signature showing variable stroke width settings](./images/blazor-signature-stroke-width.png) ## Stroke Color -Specify [`StrokeColor`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSignature.html#Syncfusion_Blazor_Inputs_SfSignature_StrokeColor) property to set color of a stroke that accepts hex value, RGB, and text. The default value of this property is "#000000". +Use the [`StrokeColor`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSignature.html#Syncfusion_Blazor_Inputs_SfSignature_StrokeColor) property to set the stroke color. This property accepts standard CSS color formats, such as hex codes, RGB values, and named colors. The default value is "#000000". ```cshtml @using Syncfusion.Blazor.Inputs @@ -74,11 +74,11 @@ Specify [`StrokeColor`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. ``` -![Blazor Signature Component](./images/blazor-signature-stroke-color.png) +![Blazor Signature with custom stroke color applied](./images/blazor-signature-stroke-color.png) ## Background Color -Specify [`BackgroundColor`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSignature.html#Syncfusion_Blazor_Inputs_SfSignature_BackgroundColor) property to set a background color of a signature that accepts hex code, RGB, and text. +Use the [`BackgroundColor`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSignature.html#Syncfusion_Blazor_Inputs_SfSignature_BackgroundColor) property to set a background color. This property accepts hex codes, RGB values, and named colors. ```cshtml @using Syncfusion.Blazor.Inputs @@ -125,11 +125,11 @@ Specify [`BackgroundColor`](https://help.syncfusion.com/cr/blazor/Syncfusion.Bla ``` -![Blazor Signature Component](./images/blazor-signature-bg-color.png) +![Blazor Signature with custom background color applied](./images/blazor-signature-bg-color.png) ## Background Image -Specify [`BackgroundImage`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSignature.html#Syncfusion_Blazor_Inputs_SfSignature_BackgroundImage) property to set the background image of a signature. The background image can be set by either hosting the image in our local IIS or online image. +Use the [`BackgroundImage`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSignature.html#Syncfusion_Blazor_Inputs_SfSignature_BackgroundImage) property to set a background image for the signature area. The image can be hosted locally or served from a remote URL. ```cshtml @using Syncfusion.Blazor.Inputs @@ -175,7 +175,7 @@ Specify [`BackgroundImage`](https://help.syncfusion.com/cr/blazor/Syncfusion.Bla ``` -N> To view the hosted images, you need to enable Directory Browsing option in IIS which creates web.config file inside the hosted folder. Adding below code snippet in the web.config file resolves the CORS issue. +N> When loading images from another origin, ensure that the hosting server sends appropriate CORS headers to allow the request from your application’s origin. The following web.config example shows how to enable directory browsing and add a permissive CORS header on IIS for testing. Use restrictive origins in production environments. ```cshtml @@ -192,8 +192,8 @@ N> To view the hosted images, you need to enable Directory Browsing option in II ``` -![Blazor Signature Component](./images/blazor-signature-bg-image.png) +![Blazor Signature with a custom background image](./images/blazor-signature-bg-image.png) -## See Also +## See also -* [Save With Background](./open-save#save-with-background) \ No newline at end of file +* [Save with background](./open-save#save-with-background) \ No newline at end of file diff --git a/blazor/signature/draw.md b/blazor/signature/draw.md index 4e736cc0e0..d66e9441b0 100644 --- a/blazor/signature/draw.md +++ b/blazor/signature/draw.md @@ -11,7 +11,9 @@ documentation: ug ## Draw -The text can be drawn as [Blazor Signature](https://www.syncfusion.com/blazor-components/blazor-signature) using the [`DrawAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSignature.html#Syncfusion_Blazor_Inputs_SfSignature_DrawAsync_System_String_System_String_System_Int32_) method with different font families like Arial, Serif, with different font sizes. This method accepts signature text, font family, font size as its parameters. The default font family is "Arial" and the default font size is "30". +Use the [`DrawAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSignature.html#Syncfusion_Blazor_Inputs_SfSignature_DrawAsync_System_String_System_String_System_Int32_) method to render text as a signature in the [Blazor Signature](https://www.syncfusion.com/blazor-components/blazor-signature) component. This method accepts the following parameters: signature text, font family, and font size. By default, the font family is Arial and the font size is 30. + +The following example uses a TextBox for the signature text and two DropDownList controls to select the font family and font size. Clicking Draw calls DrawAsync to render the text on the signature canvas (sized 400x300 via inline styles). ```cshtml @using Syncfusion.Blazor.Inputs @@ -99,4 +101,4 @@ The text can be drawn as [Blazor Signature](https://www.syncfusion.com/blazor-co ``` -![Blazor Signature Component](./images/blazor-signature-draw.png) \ No newline at end of file +![Blazor Signature rendered from text using DrawAsync](./images/blazor-signature-draw.png) \ No newline at end of file diff --git a/blazor/signature/getting-started-webapp.md b/blazor/signature/getting-started-webapp.md index 40e5fcdeb4..bdf5348cfc 100644 --- a/blazor/signature/getting-started-webapp.md +++ b/blazor/signature/getting-started-webapp.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Signature in Blazor Web App -This section briefly explains about how to include [Blazor Signature](https://www.syncfusion.com/blazor-components/blazor-signature) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This guide explains how to add the [Blazor Signature](https://www.syncfusion.com/blazor-components/blazor-signature) component to a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. The steps include creating the project, installing NuGet packages, importing namespaces, registering services, adding theme/script references, and rendering the component. {% tabcontents %} @@ -21,17 +21,17 @@ This section briefly explains about how to include [Blazor Signature](https://ww ## Create a new Blazor Web App in Visual Studio -You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) while creating a Blazor Web Application. +Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) when creating the Blazor Web App. ## Install Syncfusion® Blazor Inputs and Themes NuGet in the App -To add **Blazor Signature** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor Signature** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using `WebAssembly` or `Auto` render modes in a Blazor Web App, install the Syncfusion® Blazor component NuGet packages in the Client project. -Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, run the following Package Manager commands: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -42,7 +42,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of packages and component details. {% endtabcontent %} @@ -54,9 +54,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application. +Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) when creating the Blazor Web App. For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. @@ -70,15 +70,15 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). +N> For details on creating a **Blazor Web App** with various interactive modes and locations, see [Render interactive modes](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). ## Install Syncfusion® Blazor Inputs and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using `WebAssembly` or `Auto` render modes in a Blazor Web App, install the Syncfusion® Blazor component NuGet packages in the Client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure the terminal is in the project root directory where the `.csproj` file is located. +* Run the following commands to install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) and restore dependencies. {% tabs %} @@ -92,7 +92,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of packages and component details. {% endtabcontent %} @@ -102,10 +102,10 @@ N> Syncfusion® Blazor components are availa | Interactive Render Mode | Description | | -- | -- | -| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| -| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| +| WebAssembly or Auto | Open **~/_Imports.razor** in the Client project (where interactive components render).| +| Server | Open **Components/_Imports.razor** in the Server project (Components folder).| -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace. +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -118,7 +118,7 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace. Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -152,7 +152,7 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion® Blazor Service only in that **~/Program.cs** file. +If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, register the Syncfusion® Blazor Service only in that **~/Program.cs** file. {% tabs %} {% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} @@ -175,7 +175,7 @@ var app = builder.Build(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: +The theme stylesheet and script can be accessed from NuGet via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Add the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file, as shown: ```html @@ -189,11 +189,11 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> See [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) for Static Web Assets, CDN, and CRG options to reference themes. Also see [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) for approaches to include scripts. ## Add Syncfusion® Blazor Signature component -Add the Syncfusion® Blazor Signature component in the **~Pages/.razor** file. If an interactivity location as `Per page/component` in the web app, define a render mode at the top of the `~Pages/.razor` component, as follows: +Add the Syncfusion® Blazor Signature component to a page in the `Pages` folder (for example, Pages/Index.razor). If the interactivity location is `Per page/component`, define a render mode at the top of that page as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | @@ -202,7 +202,7 @@ Add the Syncfusion® Blazor Signature compon | | Server | @rendermode InteractiveServer | | | None | --- | -N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default. +N> If the **Interactivity Location** is `Global` and the **Render Mode** is `Auto`, `WebAssembly`, or `Server`, the render mode is configured in `App.razor` by default. {% tabs %} {% highlight razor %} @@ -223,9 +223,9 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Signature component in your default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLJXigtqGYfziwd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Signature Component](./images/blazor-signature-component.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLJXigtqGYfziwd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Signature component default appearance in a Blazor Web App](./images/blazor-signature-component.png)" %} -N> The Signature component will render default height and width of canvas (300 * 150), when the Signature height and width are not specified. +N> The Signature component renders with a default canvas size of 300 × 150 pixels when height and width are not specified. N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Signature/BlazorWebApp). @@ -235,4 +235,4 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- * [Getting Started with Syncfusion® Blazor for server side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) * [Getting Started with Syncfusion® Blazor for server side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) -N> You can also explore our [Blazor Signature example](https://blazor.syncfusion.com/demos/signature/default-functionalities?theme=bootstrap5) that shows you how to render and configure the Signature. \ No newline at end of file +N> You can also explore our [Blazor Signature example](https://blazor.syncfusion.com/demos/signature/default-functionalities?theme=bootstrap5) that shows how to render and configure the Signature. \ No newline at end of file diff --git a/blazor/signature/getting-started.md b/blazor/signature/getting-started.md index 32900c35bb..7d3f692f19 100644 --- a/blazor/signature/getting-started.md +++ b/blazor/signature/getting-started.md @@ -9,9 +9,9 @@ documentation: ug # Getting Started with Blazor Signature Component -This section briefly explains about how to include [Blazor Signature](https://www.syncfusion.com/blazor-components/blazor-signature) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This guide shows how to add the [Blazor Signature](https://www.syncfusion.com/blazor-components/blazor-signature) component to a Blazor WebAssembly app using Visual Studio and Visual Studio Code. -To get started quickly with Blazor Signature component, check on the following video: +To get started quickly with the Blazor Signature component, watch the following video: {% youtube "youtube:https://www.youtube.com/watch?v=dBXwBVhmjTg" %} @@ -26,11 +26,11 @@ To get started quickly with Blazor Signature component, check on the following v ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft templates](https://learn.microsoft.com/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ## Install Syncfusion® Blazor Inputs and Themes NuGet in the App -To add **Blazor Signature** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor Signature** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following Package Manager commands. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -41,7 +41,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the full list and component details. {% endtabcontent %} @@ -53,9 +53,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application using the following commands in the terminal (Ctrl+`). {% tabs %} @@ -71,8 +71,8 @@ cd BlazorApp ## Install Syncfusion® Blazor Inputs and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure the terminal is in the project root directory where the `.csproj` file is located. +* Run the following commands to install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) and restore dependencies. {% tabs %} @@ -86,7 +86,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the full list and component details. {% endtabcontent %} @@ -94,7 +94,7 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace. +Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -105,7 +105,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +Now, register the Syncfusion® Blazor service in the **~/Program.cs** file of your Blazor WebAssembly app. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -127,9 +127,11 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} +N> A valid Syncfusion license is required for production use. For details and registration steps, see [Syncfusion licensing](https://blazor.syncfusion.com/documentation/getting-started/licensing). + ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. +The theme stylesheet and script can be referenced from NuGet via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Add the stylesheet and script references in the `` section of **~/index.html**. ```html @@ -138,11 +140,11 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> For theme reference options (Static Web Assets, CDN, and CRG), see [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes). For script reference approaches, see [Adding script references](https://blazor.syncfusion.com/documentation/common/adding-script-references). ## Add Syncfusion® Blazor Signature component -Add the Syncfusion® Blazor Signature component in the **~/Pages/Index.razor** file. +Add the Syncfusion® Blazor Signature component in **~/Pages/Index.razor**. {% tabs %} {% highlight razor tabtitle="~/Index.razor" %} @@ -152,13 +154,13 @@ Add the Syncfusion® Blazor Signature compon {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Signature component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor Signature component in the default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLJXigtqGYfziwd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Signature Component](./images/blazor-signature-component.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLJXigtqGYfziwd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Signature component default appearance](./images/blazor-signature-component.png)" %} -N> The Signature component will render default height and width of canvas (300 * 150), when the Signature height and width are not specified. +N> The Signature component renders with a default canvas size of 300 × 150 pixels when height and width are not specified. -N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Signature). +N> [View sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Signature). ## See Also @@ -166,4 +168,4 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- * [Getting Started with Syncfusion® Blazor for server side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) * [Getting Started with Syncfusion® Blazor for server side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) -N> You can also explore our [Blazor Signature example](https://blazor.syncfusion.com/demos/signature/default-functionalities?theme=bootstrap5) that shows you how to render and configure the Signature. +N> You can also explore the [Blazor Signature example](https://blazor.syncfusion.com/demos/signature/default-functionalities?theme=bootstrap5) to see how to render and configure the Signature. \ No newline at end of file diff --git a/blazor/signature/how-to/integration-toolbar.md b/blazor/signature/how-to/integration-toolbar.md index c598eb2e04..148a7a35e4 100644 --- a/blazor/signature/how-to/integration-toolbar.md +++ b/blazor/signature/how-to/integration-toolbar.md @@ -1,6 +1,6 @@ --- layout: post -title: Integration Toolbar with Blazor Signature Component | Syncfusion +title: Toolbar Integration with Blazor Signature Component | Syncfusion description: Checkout and learn about getting started with Blazor Signature component in Blazor Server App and Blazor WebAssembly App. platform: Blazor control: Signature @@ -9,7 +9,13 @@ documentation: ug # Integration Signature with Toolbar -The Signature component integrates with the toolbar and the interaction performed using the `Changed` event of the toolbar. In that, [`CanUndoAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSignature.html#Syncfusion_Blazor_Inputs_SfSignature_CanUndoAsync), [`CanRedoAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSignature.html#Syncfusion_Blazor_Inputs_SfSignature_CanRedoAsync) and [`IsEmptyAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSignature.html#Syncfusion_Blazor_Inputs_SfSignature_IsEmptyAsync) methods were used to enable/disable undo, redo, and clear buttons by checking the undo collection. +The Signature component can be integrated with a toolbar to provide common actions such as undo, redo, clear, save, color selection, and stroke width adjustments. In this example, the toolbar buttons and pickers interact with the Signature using its events and APIs: +- The Signature Changed event updates button states after each stroke. +- CanUndoAsync, CanRedoAsync, and IsEmptyAsync determine whether Undo, Redo, and Clear/Save should be enabled. +- SaveAsync is used to export the signature, with SplitButton events (Clicked and ItemSelected) selecting the format (PNG, JPEG, SVG). +- ColorPicker ValueChange updates stroke and background colors. +- DropDownList ValueChange adjusts MaxStrokeWidth. +- CheckBox ValueChange toggles the Disabled state. ```cshtml @using Syncfusion.Blazor.Inputs @@ -364,4 +370,4 @@ The Signature component integrates with the toolbar and the interaction performe ``` -![Blazor Signature Component](../images/blazor-signature-toolbar.PNG) \ No newline at end of file +![Blazor Signature integrated with toolbar controls for undo, redo, save (format selection), color pickers, stroke width, clear, and disable toggle](../images/blazor-signature-toolbar.PNG) \ No newline at end of file diff --git a/blazor/signature/open-save.md b/blazor/signature/open-save.md index c146d8615a..d5cf4edae5 100644 --- a/blazor/signature/open-save.md +++ b/blazor/signature/open-save.md @@ -9,11 +9,11 @@ documentation: ug # Open and Save Signature -The [Blazor Signature](https://www.syncfusion.com/blazor-components/blazor-signature) component supports to open the signature by using hosted/online URL or base64. And it also supports various save options like image, base64, and blob. +The [Blazor Signature](https://www.syncfusion.com/blazor-components/blazor-signature) component supports loading a pre-drawn signature from a hosted/online URL or a base64 string, and saving signatures in multiple formats such as image files, base64, and blob. ## Open Signature -The signature component opens a pre-drawn signature as either base64 or hosted/ online URL using the [`LoadAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSignature.html#Syncfusion_Blazor_Inputs_SfSignature_LoadAsync_System_String_System_Int32_System_Int32_) method. It supports the PNG, JPEG, and SVG image's base64. +Load a pre-drawn signature from a base64 string or a hosted/online URL using the [`LoadAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSignature.html#Syncfusion_Blazor_Inputs_SfSignature_LoadAsync_System_String_System_Int32_System_Int32_) method. PNG, JPEG, and SVG base64 formats are supported. When loading from a different origin, ensure the hosting server allows cross-origin requests (CORS). ```cshtml @using Syncfusion.Blazor.Inputs @@ -60,15 +60,15 @@ The signature component opens a pre-drawn signature as either base64 or hosted/ ``` -![Blazor Signature Component](./images/blazor-signature-open-image.png) +![Load a signature from a URL or base64 into the Blazor Signature component](./images/blazor-signature-open-image.png) ## Save Signature -The Signature component saves the signature as base64, blob, and image like PNG, JPEG, and SVG. +Save the drawn signature as base64, blob, or an image (PNG, JPEG, SVG) according to application needs. ### Save as Base64 -The Signature component gets the signature as base64 using the [`GetSignatureAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSignature.html#Syncfusion_Blazor_Inputs_SfSignature_GetSignatureAsync_Syncfusion_Blazor_Inputs_SignatureFileType_) method. It also supports the PNG, JPEG, and SVG format as base64. +Retrieve the signature as a base64 string using the [`GetSignatureAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSignature.html#Syncfusion_Blazor_Inputs_SfSignature_GetSignatureAsync_Syncfusion_Blazor_Inputs_SignatureFileType_) method. PNG, JPEG, and SVG formats are supported. The base64 value can be stored, uploaded, or displayed as needed. ```cshtml @@ -89,11 +89,11 @@ The Signature component gets the signature as base64 using the [`GetSignatureAsy } ``` -![Blazor Signature Component](./images/blazor-signature-save-base.png) +![Get the signature as a base64 string](./images/blazor-signature-save-base.png) ### Save as Blob -The signature component saves the signature as Blob using [`SaveAsBlobAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSignature.html#Syncfusion_Blazor_Inputs_SfSignature_SaveAsBlobAsync) method. +Save the signature as a Blob using the [`SaveAsBlobAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSignature.html#Syncfusion_Blazor_Inputs_SfSignature_SaveAsBlobAsync) method for scenarios that require binary data handling. ```cshtml @using Syncfusion.Blazor.Inputs @@ -113,11 +113,11 @@ The signature component saves the signature as Blob using [`SaveAsBlobAsync`](ht } ``` -![Blazor Signature Component](./images/blazor-signature-save-blob.png) +![Save the signature as a Blob](./images/blazor-signature-save-blob.png) ### Save as Image -The Signature component saves the signature as an image using [`SaveAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSignature.html#Syncfusion_Blazor_Inputs_SfSignature_SaveAsync_Syncfusion_Blazor_Inputs_SignatureFileType_System_String_) method. And it accepts file name and file type as parameter. The default file type is PNG. +Save the signature as an image using the [`SaveAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSignature.html#Syncfusion_Blazor_Inputs_SfSignature_SaveAsync_Syncfusion_Blazor_Inputs_SignatureFileType_System_String_) method. Provide the file type and file name as parameters; the default file type is PNG. The example below uses a SplitButton to choose the output format. ```cshtml @using Syncfusion.Blazor.Inputs @@ -166,13 +166,13 @@ The Signature component saves the signature as an image using [`SaveAsync`](http } ``` -![Blazor Signature Component](./images/blazor-signature-save-image.png) +![Save the signature as an image file](./images/blazor-signature-save-image.png) ## Save with Background -The Signature component saves the signature with its background by using the [`SaveWithBackground`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSignature.html#Syncfusion_Blazor_Inputs_SfSignature_SaveWithBackground) property. Its default value is true. +Control whether the signature background is included in the saved output using the [`SaveWithBackground`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSignature.html#Syncfusion_Blazor_Inputs_SfSignature_SaveWithBackground) property (default: true). Set this property based on whether a solid background should be preserved (for example, keep background for JPEG) or excluded (for transparency in PNG/SVG when set to false). -In the following sample, the background color is set as ‘rgb(103, 58, 183)’ and save with background as true. +In the following sample, the background color is set to rgb(103, 58, 183) and the signature is saved with the background. ```cshtml @using Syncfusion.Blazor.Inputs @@ -221,4 +221,4 @@ In the following sample, the background color is set as ‘rgb(103, 58, 183)’ } ``` -![Blazor Signature Component](./images/blazor-signature-save-bg.png) \ No newline at end of file +![Save the signature with a background color](./images/blazor-signature-save-bg.png) \ No newline at end of file diff --git a/blazor/signature/user-interaction.md b/blazor/signature/user-interaction.md index e2d4db0a79..8472a0c8bb 100644 --- a/blazor/signature/user-interaction.md +++ b/blazor/signature/user-interaction.md @@ -9,29 +9,35 @@ documentation: ug # User Interactions in Blazor Signature component -The [Blazor Signature](https://www.syncfusion.com/blazor-components/blazor-signature) component supports various interaction like Undo, Redo, Clear, Disabled, and ReadOnly. Every changes occurred in signature can be taken as a snap and saved to collection for handling the above user interactions. +The [Blazor Signature](https://www.syncfusion.com/blazor-components/blazor-signature) component supports the following interactions and states: +- Undo/Redo: Revert the last action or the last undo. +- Clear: Remove all strokes and reset the canvas. +- Disabled: Prevent any interaction with the component. +- Read-only: Prevent editing while keeping the existing signature visible. + +Internally, the component snapshots changes to support undo/redo. The helper methods [`CanUndoAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSignature.html#Syncfusion_Blazor_Inputs_SfSignature_CanUndoAsync), [`CanRedoAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSignature.html#Syncfusion_Blazor_Inputs_SfSignature_CanRedoAsync), and [`IsEmptyAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSignature.html#Syncfusion_Blazor_Inputs_SfSignature_IsEmptyAsync) are used to determine availability of each action. ## Undo -It reverts the last action of signature using the [`UndoAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSignature.html#Syncfusion_Blazor_Inputs_SfSignature_UndoAsync) method. It removes the latest snap from the collection and load a previous snap to signature. Here, [`CanUndoAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSignature.html#Syncfusion_Blazor_Inputs_SfSignature_CanUndoAsync) method is used to ensure whether undo can be performed or not. +Revert the most recent stroke or action using [`UndoAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSignature.html#Syncfusion_Blazor_Inputs_SfSignature_UndoAsync). Use `CanUndoAsync` to check whether undo is available before invoking it. ## Redo -It reverts the last undo action of the signature using the [`RedoAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSignature.html#Syncfusion_Blazor_Inputs_SfSignature_RedoAsync) method. Here, [`CanRedoAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSignature.html#Syncfusion_Blazor_Inputs_SfSignature_CanRedoAsync) method is used to ensure whether redo can be performed or not. +Reapply the last undone action using [`RedoAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSignature.html#Syncfusion_Blazor_Inputs_SfSignature_RedoAsync). Use `CanRedoAsync` to check whether redo is available. ## Clear -It clears the signature and makes the canvas empty using the [`ClearAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSignature.html#Syncfusion_Blazor_Inputs_SfSignature_ClearAsync) method. Here, [`IsEmptyAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSignature.html#Syncfusion_Blazor_Inputs_SfSignature_IsEmptyAsync) method is used to ensure whether the signature is empty or not. +Clear the canvas using [`ClearAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSignature.html#Syncfusion_Blazor_Inputs_SfSignature_ClearAsync). Use `IsEmptyAsync` to determine if there is anything to clear. ## Disabled -It disables the signature component using the [`Disabled`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSignature.html#Syncfusion_Blazor_Inputs_SfSignature_Disabled) property. +Disable user interaction by setting the [`Disabled`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSignature.html#Syncfusion_Blazor_Inputs_SfSignature_Disabled) property to true. -## ReadOnly +## Read-only -It prevents the signature from editing using the [`IsReadOnly`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSignature.html#Syncfusion_Blazor_Inputs_SfSignature_IsReadOnly) property. +Prevent editing while keeping the content visible by setting [`IsReadOnly`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSignature.html#Syncfusion_Blazor_Inputs_SfSignature_IsReadOnly) to true. -The following sample explains about user interactions available in signature. +The following sample demonstrates these interactions controlled by buttons and checkboxes. The [`Changed`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSignature.html#Syncfusion_Blazor_Inputs_SfSignature_Changed) event is used to update the UI state after each stroke. Note: In the sample code, the button enable/disable logic should reflect the availability checks (for example, set undoBtn.Disabled to !canUndo). Also, consider awaiting async calls where appropriate. ```cshtml @using Syncfusion.Blazor.Inputs From 94f5afd411790db34e5fd36e32bd2557df470da8 Mon Sep 17 00:00:00 2001 From: Ashwini-SF5049 Date: Fri, 10 Oct 2025 13:16:16 +0530 Subject: [PATCH 17/30] 983104: Updated --- blazor/check-box/getting-started-with-web-app.md | 8 ++++---- blazor/check-box/getting-started.md | 6 ++---- blazor/check-box/how-to/right-to-left.md | 4 ++-- blazor/check-box/label-and-size.md | 2 +- blazor/chip/getting-started.md | 5 +++-- blazor/chip/types.md | 2 +- blazor/message/getting-started.md | 7 +++---- blazor/signature/getting-started.md | 6 ++---- blazor/signature/how-to/integration-toolbar.md | 2 +- 9 files changed, 19 insertions(+), 23 deletions(-) diff --git a/blazor/check-box/getting-started-with-web-app.md b/blazor/check-box/getting-started-with-web-app.md index 60298e6734..81f35df703 100644 --- a/blazor/check-box/getting-started-with-web-app.md +++ b/blazor/check-box/getting-started-with-web-app.md @@ -21,9 +21,9 @@ This section explains how to include the [Blazor CheckBox](https://www.syncfusio ## Create a new Blazor Web App in Visual Studio -Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft templates](https://learn.microsoft.com/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -Configure the appropriate [interactive render mode](https://learn.microsoft.com/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) when creating the Blazor Web App. +Configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application. ## Install Syncfusion® Blazor Buttons and Themes NuGet in the Blazor Web App @@ -54,9 +54,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -Create a **Blazor Web App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Configure the appropriate [interactive render mode](https://learn.microsoft.com/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) when creating the Blazor Web App. +Configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application. For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. diff --git a/blazor/check-box/getting-started.md b/blazor/check-box/getting-started.md index ef1f8a4bb5..cbf01efd2a 100644 --- a/blazor/check-box/getting-started.md +++ b/blazor/check-box/getting-started.md @@ -28,7 +28,7 @@ To get started quickly with the CheckBox component, watch the following video or ## Create a new Blazor App in Visual Studio -Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft templates](https://learn.microsoft.com/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ## Install Syncfusion® Blazor Buttons and Themes NuGet in the App @@ -55,7 +55,7 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). Alternatively, create a WebAssembly application using the following commands in the integrated terminal (Ctrl+`). @@ -129,8 +129,6 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -N> A valid Syncfusion license is required to use the components in production. For details, see [Syncfusion licensing](https://blazor.syncfusion.com/documentation/getting-started/licensing). - ## Add stylesheet and script resources The theme stylesheet and script are provided via NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Add the stylesheet and script references in the `` section of **~/index.html**. diff --git a/blazor/check-box/how-to/right-to-left.md b/blazor/check-box/how-to/right-to-left.md index 95bf98f67b..ac8b7eceef 100644 --- a/blazor/check-box/how-to/right-to-left.md +++ b/blazor/check-box/how-to/right-to-left.md @@ -9,7 +9,7 @@ documentation: ug # Right-To-Left in Blazor CheckBox Component -The CheckBox component supports right-to-left (RTL) layouts, which reverse content flow and align the checkbox and label for languages such as Arabic, Hebrew, and Persian. Enable RTL by setting [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfCheckBox-1.html) to `true` on the SfCheckBox component. EnableRtl applies at the component level and can override page-level direction. RTL can also be enabled globally by setting dir="rtl" on a container or the html element. For more information, see the CheckBox overview (https://blazor.syncfusion.com/documentation/checkbox/) and the SfCheckBox API (https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfCheckBox.html). +Checkbox component has RTL support. This can be achieved by setting [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfCheckBox-1.html) as `true`. The following example illustrates how to enable right-to-left support in CheckBox component. @@ -25,4 +25,4 @@ The following example illustrates how to enable right-to-left support in CheckBo ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/htVgiLhmVyZvKJzz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor CheckBox with right-to-left (RTL) layout enabled](./../images/blazor-checkbox-right-to-left.png) \ No newline at end of file +![Right to Left in Blazor CheckBox](./../images/blazor-checkbox-right-to-left.png) \ No newline at end of file diff --git a/blazor/check-box/label-and-size.md b/blazor/check-box/label-and-size.md index 29c163dc4c..2171b5ef4c 100644 --- a/blazor/check-box/label-and-size.md +++ b/blazor/check-box/label-and-size.md @@ -55,7 +55,7 @@ The CheckBox supports two sizes: default and small. To render a small CheckBox, ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/BNLAiVVQVzGyDwWz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor CheckBox size comparison: small vs. default](./images/blazor-checkbox-size.png) +![Blazor CheckBox size](./images/blazor-checkbox-size.png) ## See also diff --git a/blazor/chip/getting-started.md b/blazor/chip/getting-started.md index d1cad13131..d705cd4de5 100644 --- a/blazor/chip/getting-started.md +++ b/blazor/chip/getting-started.md @@ -26,7 +26,7 @@ To get started quickly with the Blazor Chip component, watch the following video ## Create a new Blazor App in Visual Studio -Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft templates](https://learn.microsoft.com/en-us/aspnetcore/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ## Install Syncfusion® Blazor Buttons and Themes NuGet in the App @@ -53,7 +53,8 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnetcore/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). + Alternatively, create a WebAssembly application using the following command in the terminal (Ctrl+`). diff --git a/blazor/chip/types.md b/blazor/chip/types.md index c04bf6bf5c..ec32683a24 100644 --- a/blazor/chip/types.md +++ b/blazor/chip/types.md @@ -114,7 +114,7 @@ An action chip triggers actions such as click or delete. Use the [`OnClick`](htt ### Deletable Chip -A deletable chip includes a delete affordance to remove a chip from the list. Enable deletion by setting the [`EnableDelete`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfChip.html#Syncfusion_Blazor_Buttons_SfChip_EnableDelete) property to `true`. +Deletable Chip allows you to delete a chip from Chip/ChipItems. It can be enabled by setting the [`EnableDelete`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfChip.html#Syncfusion_Blazor_Buttons_SfChip_EnableDelete) property to `true`. ```cshtml @using Syncfusion.Blazor.Buttons diff --git a/blazor/message/getting-started.md b/blazor/message/getting-started.md index 487f039c4f..f523573b4a 100644 --- a/blazor/message/getting-started.md +++ b/blazor/message/getting-started.md @@ -25,7 +25,7 @@ To get started quickly with the Blazor Message component, watch this video or ex ## Create a new Blazor App in Visual Studio -Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft templates](https://learn.microsoft.com/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ## Install Syncfusion® Blazor Notifications and Themes NuGet in the App @@ -52,7 +52,8 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). + Alternatively, create a WebAssembly application using the following commands in the terminal (Ctrl+`). @@ -126,8 +127,6 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -N> A valid Syncfusion license is required for production use. For details and registration steps, see [Syncfusion licensing](https://blazor.syncfusion.com/documentation/getting-started/licensing). - ## Add Stylesheet The theme stylesheet can be referenced from NuGet via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Add the stylesheet reference in the `` section of **~/index.html**. To enable component scripts, also add the Syncfusion script reference as described in [Adding script references](https://blazor.syncfusion.com/documentation/common/adding-script-references). diff --git a/blazor/signature/getting-started.md b/blazor/signature/getting-started.md index 7d3f692f19..ff2c174df5 100644 --- a/blazor/signature/getting-started.md +++ b/blazor/signature/getting-started.md @@ -26,7 +26,7 @@ To get started quickly with the Blazor Signature component, watch the following ## Create a new Blazor App in Visual Studio -Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft templates](https://learn.microsoft.com/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ## Install Syncfusion® Blazor Inputs and Themes NuGet in the App @@ -53,7 +53,7 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). Alternatively, create a WebAssembly application using the following commands in the terminal (Ctrl+`). @@ -127,8 +127,6 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -N> A valid Syncfusion license is required for production use. For details and registration steps, see [Syncfusion licensing](https://blazor.syncfusion.com/documentation/getting-started/licensing). - ## Add stylesheet and script resources The theme stylesheet and script can be referenced from NuGet via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Add the stylesheet and script references in the `` section of **~/index.html**. diff --git a/blazor/signature/how-to/integration-toolbar.md b/blazor/signature/how-to/integration-toolbar.md index 148a7a35e4..ac86dbec1e 100644 --- a/blazor/signature/how-to/integration-toolbar.md +++ b/blazor/signature/how-to/integration-toolbar.md @@ -370,4 +370,4 @@ The Signature component can be integrated with a toolbar to provide common actio ``` -![Blazor Signature integrated with toolbar controls for undo, redo, save (format selection), color pickers, stroke width, clear, and disable toggle](../images/blazor-signature-toolbar.PNG) \ No newline at end of file +![Blazor Signature integrated with toolbar controls](../images/blazor-signature-toolbar.PNG) \ No newline at end of file From df2063b8f7ebf6c50e7eb3f6c8ac57f14a8909b4 Mon Sep 17 00:00:00 2001 From: Ashwini-SF5049 Date: Fri, 10 Oct 2025 14:12:13 +0530 Subject: [PATCH 18/30] 983104: Updated the UG Documentation for Skeleton,spinner,button,buttongroup and badge --- blazor/badge/getting-started-with-web-app.md | 44 +++++++-------- blazor/badge/getting-started.md | 30 +++++------ blazor/button-group/accessibility.md | 24 ++++----- .../getting-started-with-web-app.md | 48 ++++++++--------- blazor/button-group/getting-started.md | 28 +++++----- blazor/button-group/native-event.md | 36 ++++++------- blazor/button-group/selection-and-nesting.md | 12 ++--- blazor/button-group/style-and-appearance.md | 11 ++-- blazor/button-group/types-and-styles.md | 36 ++++++------- blazor/button/accessibility.md | 15 +++--- blazor/button/getting-started-with-web-app.md | 53 +++++++++---------- blazor/button/getting-started.md | 30 +++++------ blazor/button/how-to/create-a-block-button.md | 4 +- .../how-to/customize-button-appearance.md | 4 +- .../button/how-to/html-attribute-support.md | 14 +++-- blazor/button/how-to/repeat-button.md | 6 +-- blazor/button/how-to/right-to-left.md | 4 +- .../button/how-to/set-the-disabled-state.md | 6 +-- blazor/button/how-to/tooltip-for-button.md | 4 +- blazor/button/native-event.md | 26 ++++----- blazor/button/style-and-appearance.md | 16 +++--- blazor/button/types-and-styles.md | 44 +++++++-------- blazor/skeleton/accessibility.md | 19 ++++--- blazor/skeleton/effects.md | 8 +-- blazor/skeleton/getting-started-webapp.md | 48 ++++++++--------- blazor/skeleton/getting-started.md | 31 ++++++----- blazor/skeleton/shapes.md | 14 ++--- blazor/skeleton/styles.md | 8 +-- blazor/spinner/customization.md | 31 ++++------- blazor/spinner/events.md | 10 ++-- blazor/spinner/getting-started-webapp.md | 50 ++++++++--------- blazor/spinner/getting-started.md | 32 +++++------ blazor/spinner/spinner-integration.md | 6 +-- blazor/spinner/style.md | 6 ++- 34 files changed, 382 insertions(+), 376 deletions(-) diff --git a/blazor/badge/getting-started-with-web-app.md b/blazor/badge/getting-started-with-web-app.md index 5471546568..51946ea2ed 100644 --- a/blazor/badge/getting-started-with-web-app.md +++ b/blazor/badge/getting-started-with-web-app.md @@ -3,13 +3,13 @@ layout: post title: Getting Started with Syncfusion Badge Component in Blazor Web App description: Checkout and learn about the documentation for getting started with Blazor Badge Component in Blazor Web App. platform: Blazor -component: Badge +control: Badge documentation: ug --- # Getting Started with Blazor Badge Component in Blazor Web App -This section briefly explains about how to include [`Blazor Badge`](https://blazor.syncfusion.com/demos/badge/defaultfunctionalities?theme=bootstrap5) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section briefly explains how to include the [Blazor Badge](https://blazor.syncfusion.com/demos/badge/defaultfunctionalities?theme=bootstrap5) in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) or Visual Studio Code. {% tabcontents %} @@ -21,17 +21,17 @@ This section briefly explains about how to include [`Blazor Badge`](https://blaz ## Create a new Blazor Web App in Visual Studio -You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a Blazor Web App using Visual Studio 2022 via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application. +Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) when creating the app. ## Install Syncfusion® Blazor Themes NuGet in the App -To add **Blazor Badge** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the Blazor Badge to the app, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for, and install [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If you use `WebAssembly` or `Auto` render modes in the Blazor Web App, you need to install the Syncfusion® Blazor component NuGet packages in the client project. -Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, you can use the following Package Manager command: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -41,7 +41,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. {% endtabcontent %} @@ -53,9 +53,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a Blazor Web App using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application. +Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) when creating the app. For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. @@ -69,15 +69,15 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). +N> For more information on creating a Blazor Web App with various interactive modes and locations, refer to this [getting started guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). ## Install Syncfusion® Blazor Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If you use `WebAssembly` or `Auto` render modes in the Blazor Web App, you need to install the Syncfusion® Blazor component NuGet packages in the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) NuGet package and ensure all dependencies are installed. +* Ensure you are in the project directory where the `.csproj` file is located. +* Run the following commands to install [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes): {% tabs %} @@ -90,7 +90,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. {% endtabcontent %} @@ -98,7 +98,7 @@ N> Syncfusion® Blazor components are availa ## Add stylesheet -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section in the **~/Components/App.razor** file as shown below: +The theme stylesheet can be referenced via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section of the `~/Components/App.razor` file as shown below. If the app uses the `HeadOutlet` component, you can alternatively add the link using `` in a layout or page. ```html @@ -107,11 +107,11 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. +N> See [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) for other ways to reference themes, including [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator). ## Add Syncfusion® Blazor Badge component -Add the Syncfusion® Blazor Badge component in the **~Pages/.razor** file. If an interactivity location as `Per page/component` in the web app, define a render mode at the top of the `~Pages/.razor` component, as follows: +Add a badge to a page in `~/Pages/YourPage.razor`. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `~/Pages/YourPage.razor` component as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | @@ -120,12 +120,12 @@ Add the Syncfusion® Blazor Badge component | | Server | @rendermode InteractiveServer | | | None | --- | -N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default. +N> If the interactivity location is set to `Global` and the render mode is `Auto`, `WebAssembly`, or `Server`, the render mode is configured in the `App.razor` file by default. {% tabs %} {% highlight razor %} -@* desired render mode define here *@ +@* Define the desired render mode here *@ @rendermode InteractiveAuto {% endhighlight %} @@ -139,8 +139,8 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Badge component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor Badge in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/BthfshXvfQkIZbeA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Badge Component](images/blazor-badge-component.png)" %} -N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Badge/BlazorWebApp). \ No newline at end of file +N> [View sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Badge/BlazorWebApp). \ No newline at end of file diff --git a/blazor/badge/getting-started.md b/blazor/badge/getting-started.md index 899c08a018..ad5989554a 100644 --- a/blazor/badge/getting-started.md +++ b/blazor/badge/getting-started.md @@ -11,9 +11,9 @@ documentation: ug # Getting Started with Blazor Badge Component -This section briefly explains about how to include [`Blazor Badge`](https://blazor.syncfusion.com/demos/badge/defaultfunctionalities?theme=bootstrap5) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This section briefly explains how to include the [Blazor Badge](https://blazor.syncfusion.com/demos/badge/defaultfunctionalities?theme=bootstrap5) component in a Blazor WebAssembly app using Visual Studio and Visual Studio Code. -To get start quickly with Blazor Badge, you can check on this video: +To get started quickly with the Blazor Badge component, check out this video: {% youtube "https://www.youtube.com/watch?v=CNkXfjZDGUQ" %} @@ -27,11 +27,11 @@ To get start quickly with Blazor Badge, you can check on this video: ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a Blazor WebAssembly app using Visual Studio via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ## Install Syncfusion® Blazor Themes NuGet in the App -To add **Blazor Badge** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the Blazor Badge component to the app, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for, and install [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can use the following Package Manager command: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -41,7 +41,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. {% endtabcontent %} @@ -53,9 +53,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a Blazor WebAssembly app using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application using the following command in the terminal (Ctrl+`). {% tabs %} @@ -71,8 +71,8 @@ cd BlazorApp ## Install Syncfusion® Blazor Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure you are in the project root directory where your `.csproj` file is located. +* Run the following commands to install [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) and ensure all dependencies are installed. {% tabs %} @@ -85,15 +85,15 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. {% endtabcontent %} {% endtabcontents %} -## Add Stylesheet +## Add stylesheet -The theme stylesheet can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section of the **~/index.html** file. +The theme stylesheet can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section of the `~/wwwroot/index.html` file. ```html @@ -105,7 +105,7 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Blazor Badge component -Add the Syncfusion® Blazor Badge component in the **~/Pages/Index.razor** file. +Add the Syncfusion® Blazor Badge component in the `~/Pages/Index.razor` file. {% tabs %} {% highlight razor %} @@ -115,8 +115,8 @@ Add the Syncfusion® Blazor Badge component {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Badge component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor Badge component in your default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/BthfshXvfQkIZbeA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Badge Component](images/blazor-badge-component.png)" %} -N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Badge). +N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Badge). \ No newline at end of file diff --git a/blazor/button-group/accessibility.md b/blazor/button-group/accessibility.md index 1cc7dca149..b8e5b90c3c 100644 --- a/blazor/button-group/accessibility.md +++ b/blazor/button-group/accessibility.md @@ -3,13 +3,13 @@ layout: post title: Accessibility in Blazor Button Group Component | Syncfusion description: Checkout and learn here all about Accessibility in Syncfusion Blazor Button component and much more. platform: Blazor -control: Button +control: ButtonGroup documentation: ug --- # Accessibility in Blazor Button Group component -The Blazor Button Group 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. +The Blazor Button Group component follows established 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/), and [WAI-ARIA roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. The accessibility compliance for the Blazor Button Group component is outlined below. @@ -18,11 +18,11 @@ The accessibility compliance for the Blazor Button Group component is outlined b | [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | Yes | | [Section 508 Support](../common/accessibility#accessibility-standards) | Yes | | [Screen Reader Support](../common/accessibility#screen-reader-support) | Yes | -| [Right-To-Left Support](../common/accessibility#right-to-left-support) | Yes | -| [Color Contrast](../common/accessibility#color-contrast) | Yes | -| [Mobile Device Support](../common/accessibility#mobile-device-support) | Yes | -| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) |Yes | -| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | Yes | +| [Right-to-left support](../common/accessibility#right-to-left-support) | Yes | +| [Color contrast](../common/accessibility#color-contrast) | Yes | +| [Mobile device support](../common/accessibility#mobile-device-support) | Yes | +| [Keyboard navigation support](../common/accessibility#keyboard-navigation-support) |Yes | +| [axe-core accessibility validation](../common/accessibility#ensuring-accessibility) | Yes | -
Yes - All features of the component meet the requirement.
+
Meets requirement - All features of the component meet the requirement.
-
Partial - Some features of the component do not meet the requirement.
+
Partially meets requirement - Some features of the component do not fully meet the requirement.
-
No - The component does not meet the requirement.
+
Does not meet requirement - The component does not meet the requirement.
## WAI-ARIA attributes -The Blazor Tooltip component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/) patterns to meet the accessibility. The following ARIA attributes are used in the Tooltip component. +The Blazor Tooltip component follows the [WAI-ARIA tooltip pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/) to meet accessibility requirements. The following ARIA attributes are used in the Tooltip component. | Attributes | Purpose | | --- | --- | -| role=”tooltip” | The element that serves as the container for the Tooltip has the ARIA role of `tooltip`. | -| aria-describedby | This attribute is added to the target element on which the Tooltip gets opened, when focusing or hovering over it. It usually holds the randomly generated `Id` value of the Tooltip element.

In case, the target element already holds an `aria-describedby` attribute with `Id` value of some other component, then the Tooltip Id value can be additionally appended to the existing `aria-describedby` attribute separated by a space as shown in the example below.

**For example**:
aria-describedby = “my-text my-tooltip”
**my-text** is the Id of some other component.
**my-tooltip** is the id of Tooltip component.

When the Tooltip is closed, the `aria-describedby` attribute is removed from the target. | -| aria-hidden | This attribute is assigned to the Tooltip element whose default value is `true`.

When `true`, it denotes that the Tooltip element is in a hidden or a closed state. When the Tooltip appears on the screen, it’s value changes to `false`. | +| `role="tooltip"` | The element that serves as the container for the tooltip has the ARIA role of `tooltip`. | +| `aria-describedby` | This attribute is applied to the target element when the tooltip is shown by focus or hover. It typically contains the unique `ID` of the tooltip element.

If the target element already has an `aria-describedby` attribute referencing another component, the tooltip `ID` is appended, separated by a space.

For example:
`aria-describedby="my-text my-tooltip"`
my-text is the ID of another component.
my-tooltip is the ID of the tooltip component.

When the tooltip is hidden, the tooltip `ID` is removed from `aria-describedby`. | +| `aria-hidden` | This attribute is set on the tooltip element. The default value is `true` (hidden). When the tooltip is visible, its value changes to `false`. | ## Keyboard interaction -The Blazor Tooltip component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Tooltip component. +The Blazor Tooltip component follows the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/#keyboardinteraction) guideline, making it accessible for people who use assistive technologies and those who rely on keyboard navigation. The following keyboard shortcuts are supported by the Tooltip component. | Windows | Mac | Actions | | --- | --- | --- | -| Escape | Escape | Closes or dismisses the Tooltip. | -| Tab | Tab | A form control receiving focus (say through tab key), opens the Tooltip, and on focus out closes it. | +| Escape | Escape | Closes or dismisses the tooltip. | +| Tab | Tab | When a form control receives focus via the Tab key, the tooltip opens; when focus moves away, it closes. | ## Ensuring accessibility -The Blazor Tooltip component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) software tool during automated testing. - -The accessibility compliance of the Tooltip component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/tooltip) in a new window to evaluate the accessibility of the Tooltip component with accessibility tools. +The Blazor Tooltip component's accessibility levels are validated with the [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) tool during automated testing. +The accessibility compliance of the Tooltip component is demonstrated in the following sample. Open the [Tooltip accessibility sample](https://blazor.syncfusion.com/accessibility/tooltip) in a new window to evaluate the component with accessibility tools. ## See also * [Accessibility in Syncfusion® Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility) \ No newline at end of file diff --git a/blazor/tooltip/content.md b/blazor/tooltip/content.md index 1807001d53..0a3227cda2 100644 --- a/blazor/tooltip/content.md +++ b/blazor/tooltip/content.md @@ -9,11 +9,11 @@ documentation: ug # Content in Blazor Tooltip Component -The Blazor Tooltip component allows you to display additional information when users hover over or interact with elements on your web page. Here's how you can explore and implement various content within your Tooltip to enhance its functionality and appearance. +The Blazor Tooltip component displays supplemental information when users hover over or interact with elements on a web page. This article explains multiple options for defining tooltip content and when to use each approach to enhance clarity and appearance. ## Simple Text Content -The simplest way to use a Tooltip is with a string of text using the [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_Content) property. A text or a piece of information assigned to the Tooltip’s `Content` property will be displayed as the main text stream of the Tooltip. +The simplest way to configure tooltip content is to provide a text string using the [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_Content) property. The value assigned to the `Content` property is rendered as the primary text of the tooltip. ```cshtml @using Syncfusion.Blazor.Popups @@ -29,13 +29,13 @@ The simplest way to use a Tooltip is with a string of text using the [Content](h } ``` -This displays a simple text message when users hover over the button. +This configuration displays a plain text message when the button receives hover or focus. The example text is illustrative and can be replaced with task-specific content. -![Blazor Tooltip with Content](images/blazor-tooltip-string-content.gif) +![Blazor Tooltip displaying simple text content](images/blazor-tooltip-string-content.gif) ## Using the Title Attribute -You can also use the **title** attribute of the target element as the Tooltip content. By using the [Target](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_Target) property which allows the Tooltip to use the title attribute of the target element as its content. +The tooltip can also derive its content from the title attribute of the target element. The [Target](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_Target) property defines the elements to which the tooltip is applied, and when those elements include a title attribute, that value is used as the tooltip content. ```cshtml @using Syncfusion.Blazor.Buttons @@ -53,16 +53,16 @@ You can also use the **title** attribute of the target element as the Tooltip co ``` -This approach is useful when you want to enhance existing HTML title attributes with a more stylish Tooltip. +This approach is effective for enhancing existing title attributes with a styled tooltip, especially when retrofitting existing markup. The example includes a placeholder hyperlink (href="#") for demonstration. -![Blazor Tooltip with Content](images/blazor-tooltip-title-content.gif) +![Blazor Tooltip using title attribute content](images/blazor-tooltip-title-content.gif) ## Using Template -The Tooltip's Template property enables you to completely customize the layout and incorporate custom elements into the Tooltip. You can insert any content or HTML elements as Tooltip content by specifying them within the [`ContentTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_ContentTemplate) property of the Tooltip component. Additionally, the [`ContentTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_ContentTemplate) property supports the `RenderFragment` type, enabling dynamic and interactive content within the Tooltip. +The Tooltip's Template capability enables full customization and the inclusion of custom elements. Provide any content or HTML elements through the [`ContentTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_ContentTemplate) property to compose rich content. The [`ContentTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_ContentTemplate) property supports the `RenderFragment` type, enabling dynamic and interactive content. -Check out the following code example to see how to include an HTML template inside the Tooltip. +The following example shows how to include an HTML template inside the tooltip. ```cshtml @using Syncfusion.Blazor.Buttons; @@ -176,14 +176,13 @@ The SfTooltip is used to display dynamic content generated using a RenderFragmen } ``` -This approach gives you full control over the Tooltip's content, allowing for interactive elements and dynamic data. +This approach provides full control over the tooltip content and supports interactivity and dynamic data. When adding interactive elements, consider accessibility and focus behavior to ensure a predictable user experience. -![Blazor Tooltip with Template](images/blazor-tooltip-renderfragment-content.gif) +![Blazor Tooltip rendering dynamic content via RenderFragment](images/blazor-tooltip-renderfragment-content.gif) ## Rendering HTML content using MarkupString -By default, the Tooltip can show any kind of formatted content. To improve its layout or create a custom visual element, utilize the [`ContentTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_ContentTemplate) property to establish the desired structure. You can also use [`@(MarkupString)`](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.markupstring?view=aspnetcore-7.0) to dynamically render HTML content. - +By default, the tooltip can show formatted content. To improve the layout or create a custom visual element, use the [`ContentTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_ContentTemplate) property to define the structure. The [`@(MarkupString)`](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.markupstring?view=aspnetcore-7.0) type can also be used to render HTML content from a string dynamically. ```cshtml @using Syncfusion.Blazor.Popups @@ -213,8 +212,8 @@ By default, the Tooltip can show any kind of formatted content. To improve its l } ``` -This is useful when you need to render HTML content that's stored as a string, perhaps from a database or API. +This option is useful when rendering HTML stored as a string from a database or API. Do not render untrusted HTML without sanitization, as doing so may introduce cross-site scripting (XSS) vulnerabilities. ![Blazor Tooltip with Content](images/blazor-tooltip-with-content.gif) -By using these different content options, you can create Tooltips that range from simple text hints to rich, interactive information displays, enhancing the user experience of your Blazor application. +By selecting the appropriate approach—plain text via `Content`, title attribute content via `Target`, rich layouts via `ContentTemplate`, dynamic UI via `RenderFragment`, or string-based HTML via `MarkupString`—the tooltip can convey anything from simple hints to rich, interactive information to improve the user experience. \ No newline at end of file diff --git a/blazor/tooltip/customization.md b/blazor/tooltip/customization.md index 56234edb09..69aec12339 100644 --- a/blazor/tooltip/customization.md +++ b/blazor/tooltip/customization.md @@ -9,11 +9,11 @@ documentation: ug # Customization in Blazor Tooltip Component -The Tooltip can be customized by using the [`CssClass`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_CssClass) property, which accepts custom CSS class names that defines the specific user-defined styles and themes to be applied on the Tooltip element. +The Tooltip can be customized by using the [`CssClass`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_CssClass) property, which applies one or more custom CSS class names. These classes allow defining user-specific styles and themes that are applied to the tooltip wrapper and its elements. ## Tip pointer customization -Styling the tip pointer's size, background, and border colors can be done using the [`CssClass`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_CssClass) property, as given below. +Style the tip pointer size, background, and border colors using the [`CssClass`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_CssClass) property as shown below. The selectors target the generated tooltip wrapper and pointer elements that are set at runtime based on placement. ```cshtml @using Syncfusion.Blazor.Popups @@ -80,11 +80,11 @@ Styling the tip pointer's size, background, and border colors can be done using ``` -![Blazor Tooltip with Custom Tip Pointer](images/blazor-tooltip-custom-tip-pointer.png) +![Customized tooltip pointer size and colors](images/blazor-tooltip-custom-tip-pointer.png) ## Tooltip customization -The complete look and feel of the Tooltip can be customized by changing it's background color, opacity, content font, etc. +The complete look and feel of the Tooltip can be customized by changing its background color, opacity, content font, and related styles. The following example demonstrates overriding theme styles by scoping CSS to a custom class applied through `CssClass`. ```cshtml @using Syncfusion.Blazor.Popups diff --git a/blazor/tooltip/getting-started-webapp.md b/blazor/tooltip/getting-started-webapp.md index efe7dd1768..03cb3bc9f3 100644 --- a/blazor/tooltip/getting-started-webapp.md +++ b/blazor/tooltip/getting-started-webapp.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Tooltip in Blazor Web App -This section briefly explains about how to include [Blazor Tooltip](https://www.syncfusion.com/blazor-components/blazor-tooltip) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section explains how to include the [Blazor Tooltip](https://www.syncfusion.com/blazor-components/blazor-tooltip) component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. {% tabcontents %} @@ -21,17 +21,17 @@ This section briefly explains about how to include [Blazor Tooltip](https://www. ## Create a new Blazor Web App in Visual Studio -You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) when creating the Blazor Web App. ## Install Syncfusion® Blazor Popups and Themes NuGet in the App -To add **Blazor Tooltip** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Popups](https://www.nuget.org/packages/Syncfusion.Blazor.Popups) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor Tooltip** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Popups](https://www.nuget.org/packages/Syncfusion.Blazor.Popups) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly` or `Auto` render modes in a Blazor Web App, install the Syncfusion® Blazor NuGet packages in the client project. -Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, use the following Package Manager commands. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -42,7 +42,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on NuGet. See the [NuGet packages list](https://blazor.syncfusion.com/documentation/nuget-packages) for available packages and component details. {% endtabcontent %} @@ -54,9 +54,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor Web App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) when creating the Blazor Web App. For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. @@ -70,15 +70,15 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). +N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to the [render interactive modes](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes) section. ## Install Syncfusion® Blazor Popups and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using `WebAssembly` or `Auto` render modes in a Blazor Web App, install the Syncfusion® Blazor components NuGet packages within the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Popups](https://www.nuget.org/packages/Syncfusion.Blazor.Popups) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure the current directory contains the project `.csproj` file. +* Run the following commands to install [Syncfusion.Blazor.Popups](https://www.nuget.org/packages/Syncfusion.Blazor.Popups) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/), and restore dependencies. {% tabs %} @@ -92,7 +92,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on NuGet. See the [NuGet packages list](https://blazor.syncfusion.com/documentation/nuget-packages) for available packages and component details. {% endtabcontent %} @@ -102,10 +102,10 @@ N> Syncfusion® Blazor components are availa | Interactive Render Mode | Description | | -- | -- | -| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| -| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| +| WebAssembly or Auto | Open **~/_Imports.razor** from the client project.| +| Server | Open **~/_Imports.razor** in the `Components` folder.| -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Popups` namespace. +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Popups` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -116,9 +116,9 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Popups` namespace. {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. +Now register the Syncfusion® Blazor service in the **~/Program.cs** file of the Blazor Web App. -If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. +If the **Interactive Render Mode** is `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in both **~/Program.cs** files of the Blazor Web App. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -152,7 +152,7 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion® Blazor Service only in that **~/Program.cs** file. +If the **Interactive Render Mode** is `Server`, the project contains a single **~/Program.cs** file. In this case, register the Syncfusion® Blazor service only in that **~/Program.cs** file. {% tabs %} {% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} @@ -175,7 +175,7 @@ var app = builder.Build(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: +The theme stylesheet and script are provided via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` and the script reference at the end of the `` in **~/Components/App.razor** as shown below: ```html @@ -189,11 +189,11 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> See [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) for theme reference options ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)). See [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) for script inclusion options. ## Add Syncfusion® Blazor Tooltip component -Add the Syncfusion® Blazor Tooltip component with the Syncfusion® Blazor [Button](https://blazor.syncfusion.com/documentation/button/getting-started) component in the **~Pages/.razor** file. If an interactivity location as `Per page/component` in the web app, define a render mode at the top of the **~Pages/.razor** component, as follows: +Add the Syncfusion® Blazor Tooltip component with the Syncfusion® Blazor [Button](https://blazor.syncfusion.com/documentation/button/getting-started) component in the **~Pages/.razor** file. If the interactivity location is `Per page/component`, define a render mode at the top of the **~Pages/.razor** component as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | @@ -202,7 +202,7 @@ Add the Syncfusion® Blazor Tooltip componen | | Server | @rendermode InteractiveServer | | | None | --- | -N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default. +N> If the **Interactivity location** is `Global` and the **Render mode** is `Auto`, `WebAssembly`, or `Server`, the render mode is configured in the `App.razor` file by default. {% tabs %} {% highlight razor %} @@ -231,13 +231,13 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Tooltip component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor Tooltip component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/BDLJNWgNzHwucLWE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Tooltip Component](./images/blazor-tooltip.gif)" %} -N> The Tooltip component in our system uses the HTML element's id or class name to identify the target for the tooltip. However, when using a GUID as the target ID, it is not able to recognize IDs that start with a digit. +N> The Tooltip component uses the HTML element ID or class name to identify the target. If using a GUID as the target ID that begins with a digit, the selector may not be recognized without proper CSS escaping. -N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Tooltip/BlazorWebApp). +N> [View the GitHub sample](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Tooltip/BlazorWebApp). ## See also @@ -253,4 +253,4 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- * [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) -N> You can also explore our [Blazor Tooltip example](https://blazor.syncfusion.com/demos/tooltip/default?) that shows you how to render and configure the tooltip \ No newline at end of file +N> You can also explore the [Blazor Tooltip demo](https://blazor.syncfusion.com/demos/tooltip/default?) to learn how to render and configure the tooltip. \ No newline at end of file diff --git a/blazor/tooltip/getting-started.md b/blazor/tooltip/getting-started.md index c77936da21..dfe14c622d 100644 --- a/blazor/tooltip/getting-started.md +++ b/blazor/tooltip/getting-started.md @@ -9,9 +9,9 @@ documentation: ug # Getting Started with Blazor Tooltip Component -This section briefly explains about how to include [Blazor Tooltip](https://www.syncfusion.com/blazor-components/blazor-tooltip) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This section explains how to include the [Blazor Tooltip](https://www.syncfusion.com/blazor-components/blazor-tooltip) component in a Blazor WebAssembly app using Visual Studio and Visual Studio Code. -To get start quickly with the Blazor Tooltip, check on this video or or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Tooltip) sample. +To get started quickly with the Blazor Tooltip, watch the following video or explore the [Tooltip getting started GitHub sample](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Tooltip). {% youtube "youtube:https://www.youtube.com/watch?v=Lzpm6x6TXO8"%} @@ -26,11 +26,11 @@ To get start quickly with the Blazor Tooltip, check on this video or or [GitHub] ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ## Install Syncfusion® Blazor Popups and Themes NuGet in the App -To add **Blazor Tooltip** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Popups](https://www.nuget.org/packages/Syncfusion.Blazor.Popups) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor Tooltip** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Popups](https://www.nuget.org/packages/Syncfusion.Blazor.Popups) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -53,9 +53,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application using the following command in the terminal (Ctrl+`). {% tabs %} @@ -71,8 +71,8 @@ cd BlazorApp ## Install Syncfusion® Blazor Popups and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Popups](https://www.nuget.org/packages/Syncfusion.Blazor.Popups) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure you are in the project root directory where the `.csproj` file is located. +* Run the following command to install [Syncfusion.Blazor.Popups](https://www.nuget.org/packages/Syncfusion.Blazor.Popups) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) and ensure all dependencies are installed. If the examples use `SfButton`, install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons/) as well. {% tabs %} @@ -94,7 +94,7 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Popups` namespace. +Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Popups` namespace. If using `SfButton`, also import `Syncfusion.Blazor.Buttons`. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -129,7 +129,7 @@ await builder.Build().RunAsync(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. +The theme stylesheet and script are provided via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. ```html @@ -142,7 +142,7 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Blazor Tooltip component -Integrate the Syncfusion® Blazor Tooltip component with the Syncfusion® Blazor [Button](https://blazor.syncfusion.com/documentation/button/getting-started) component in the **~/Pages/Index.razor** file. +Integrate the Syncfusion® Blazor Tooltip component with the Syncfusion® Blazor [Button](https://blazor.syncfusion.com/documentation/button/getting-started) component in the **~/Pages/Index.razor** file. If using `SfButton`, ensure the `Syncfusion.Blazor.Buttons` namespace is imported. {% tabs %} {% highlight razor %} @@ -162,11 +162,11 @@ Integrate the Syncfusion® Blazor Tooltip co {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Tooltip component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor Tooltip component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/BDLJNWgNzHwucLWE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Tooltip Component](./images/blazor-tooltip.gif)" %} -N> The Tooltip component in our system uses the HTML element's id or class name to identify the target for the tooltip. However, when using a GUID as the target ID, it is not able to recognize IDs that start with a digit. +N> The Tooltip component uses the HTML element ID or class name to identify the target. When using a GUID as the target ID that starts with a digit, the selector may not be recognized without proper CSS escaping. ## See also @@ -182,4 +182,4 @@ N> The Tooltip component in our system uses the HTML element's id or class name * [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) -N> You can also explore our [Blazor Tooltip example](https://blazor.syncfusion.com/demos/tooltip/default?theme=bootstrap5) that shows you how to render and configure the tooltip +N> You can also explore our [Blazor Tooltip example](https://blazor.syncfusion.com/demos/tooltip/default?theme=bootstrap5) that shows you how to render and configure the tooltip \ No newline at end of file diff --git a/blazor/tooltip/open-mode.md b/blazor/tooltip/open-mode.md index d92fa9e9e6..954574524a 100644 --- a/blazor/tooltip/open-mode.md +++ b/blazor/tooltip/open-mode.md @@ -9,23 +9,22 @@ documentation: ug # Open Mode in Blazor Tooltip Component -The mode on which the Tooltip is to be opened on a page, i.e., on hovering, focusing, or clicking on the target elements can be decided. +Control when the Tooltip opens by configuring the [`OpensOn`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_OpensOn) property. Tooltips can open on hover, focus, or click of the target element. N> On mobile devices, Tooltips appear when you tap and hold the element, even if the [`OpensOn`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_OpensOn) option is assigned with `Hover`. -
Tooltips are also displayed as long as the element is continued to tap and hold. On lift, it disappears in the next 1.5 seconds. -
If there is another action before that time ends, then the Tooltip disappears. + Tooltips remain visible while the element is pressed and held, then disappear about 1.5 seconds after release. If another action occurs before that time, the tooltip closes immediately. The [`OpensOn`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_OpensOn) property can take either a single or a combination of multiple values, separated by space from the following options. The table below explains how the Tooltip opens on both desktop and mobile based on the value(s) assigned to the `OpensOn` property. By default, it takes `Auto` value. | Values | Desktop | Mobile | | ------------- | ------------- | ------------- | -| `Auto` | Tooltip appears when you hover over the target or when the target element receives the focus. | Tooltip opens on tap and hold of the target element. | +| `Auto` | Tooltip appears when you hover over the target or when the target element receives focus. | Tooltip opens on tap and hold of the target element. | | `Hover` | Tooltip appears when you hover over the target. | Tooltip opens on tap and hold of the target element. | | `Click` | Tooltip appears when you click a target element. | Tooltip appears when you single tap the target element. | -| `Focus` | Tooltip appears when you focus (say through tab key) on a target element. | Tooltip appears with a single tap on the target element. | -| `Custom` | Tooltip is not triggered by any default action. So, you have to bind your own events and use either `open` or `close` public methods. | Same as Desktop. | +| `Focus` | Tooltip appears when you focus on a target element (for example, via the Tab key). | Tooltip appears with a single tap on the target element. | +| `Custom` | Tooltip is not triggered by any default action. Bind your own events and invoke the tooltip’s open/close methods programmatically. | Same as Desktop. | -To open the Tooltip for multiple actions, say while hovering over or clicking on a target element, the `OpensOn` property can be assigned with multiple values, separated by space as `Hover Click`. +To open the tooltip for multiple actions, such as both hover and click on the target element, assign `OpensOn` with multiple values separated by a space, for example: `Hover Click`. N> `Auto` value cannot be used with any combination for multiple values. @@ -94,7 +93,7 @@ N> `Auto` value cannot be used with any combination for multiple values. ## Sticky mode -With this mode set to `true`, Tooltips can be made to show up on the screen as long as the close icon is pressed. In this mode, close icon is attached to the Tooltip located at the top right corner. This mode can be enabled or disabled using the [`IsSticky`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_IsSticky) property. +When `IsSticky` is set to `true`, the tooltip stays visible until the close icon is selected. In this mode, a close icon appears in the top-right corner of the tooltip. Enable or disable this behavior with the [`IsSticky`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_IsSticky) property. ```cshtml @using Syncfusion.Blazor.Popups @@ -126,7 +125,7 @@ With this mode set to `true`, Tooltips can be made to show up on the screen as l ## Open or Close Tooltip with delay -The Tooltips can be opened or closed after some delay by using the [`OpenDelay`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_OpenDelay) and [`CloseDelay`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_CloseDelay) properties. +Open or close the tooltip after a specified delay using the [`OpenDelay`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_OpenDelay) and [`CloseDelay`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_CloseDelay) properties. Use delays judiciously to avoid hindering user interactions. ```cshtml @using Syncfusion.Blazor.Popups diff --git a/blazor/tooltip/position.md b/blazor/tooltip/position.md index 26be47acc5..d887196bb3 100644 --- a/blazor/tooltip/position.md +++ b/blazor/tooltip/position.md @@ -9,7 +9,7 @@ documentation: ug # Position in Blazor Tooltip Component -Tooltips can be attached to 12 static locations around the target. On initializing the Tooltip, set the [**Position**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_Position) property with any one of the following values: +Tooltips can be positioned at 12 predefined locations around the target. Set the [**Position**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_Position) property to one of the following values: * `TopLeft` * `TopCenter` @@ -24,7 +24,7 @@ Tooltips can be attached to 12 static locations around the target. On initializi * `RightCenter` * `RightBottom` -N> By default, Tooltip is placed at the **TopCenter** of the target element. +N> By default, the tooltip is placed at the **TopCenter** of the target element. ```cshtml @using Syncfusion.Blazor.Popups @@ -40,11 +40,11 @@ N> By default, Tooltip is placed at the **TopCenter** of the target element. } ``` -![Changing Blazor Tooltip Position](images/blazor-tooltip-position.gif) +![Changing tooltip position around the target element](images/blazor-tooltip-position.gif) ## Mouse trailing -Tooltips can be positioned relative to the mouse pointer. This behavior can be enabled or disabled by using the [`MouseTrail`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_MouseTrail) property. By default, it is set to `false`. +Position the tooltip relative to the mouse pointer by enabling the [`MouseTrail`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_MouseTrail) property. By default, this property is `false`. ```cshtml @using Syncfusion.Blazor.Popups @@ -73,14 +73,14 @@ Tooltips can be positioned relative to the mouse pointer. This behavior can be e ![Blazor Tooltip with Mouse Trail](images/blazor-tooltip-mouse-trail.gif) -N> When mouse trailing option is enabled, the tip pointer position gets auto adjusted based on the target, and other position values like start, end, and middle are not applied (to prevent the pointer from moving out of target). +N> When mouse trailing is enabled, the tip pointer alignment is auto-adjusted based on the target and cursor, and alignment options such as start, end, and middle are not applied (to keep the pointer within the target area). Consider accessibility needs when using pointer-tracking behavior. ## Setting offset values -Offset values are set to specify the distance between the target and Tooltip element. [`OffsetX`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_OffsetX) and [`OffsetY`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_OffsetY) properties are used to specify the offset left and top values. +Use offsets to control the distance between the target and the tooltip element. [`OffsetX`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_OffsetX) and [`OffsetY`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_OffsetY) specify horizontal and vertical offsets relative to the chosen position. -* `OffsetX` specifies the distance between the target and Tooltip element in X axis. -* `OffsetY` specifies the distance between the target and Tooltip element in Y axis. +* `OffsetX` specifies the distance on the X-axis between the target and the tooltip element. +* `OffsetY` specifies the distance on the Y-axis between the target and the tooltip element. ```cshtml @using Syncfusion.Blazor.Popups @@ -110,11 +110,11 @@ Offset values are set to specify the distance between the target and Tooltip ele ![Blazor Tooltip with Offset Value](images/blazor-tooltip-offset-value.gif) -N> By default, collision is handled automatically and therefore when collision is detected the Tooltip fits horizontally and flips vertically. +N> Collision is handled automatically. When a collision is detected, the tooltip fits horizontally and flips vertically to remain visible within the viewport. Use offsets sparingly to avoid overlap and maintain readability. ## Change collision target to viewport when setting Target -You can set the [WindowCollision](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_WindowCollision) property to change collision target to `viewport` instead of parent of Tooltip element. +Set the [WindowCollision](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_WindowCollision) property to change the collision target to the browser viewport instead of the tooltip’s parent. ```cshtml @using Syncfusion.Blazor.Popups @@ -132,4 +132,4 @@ You can set the [WindowCollision](https://help.syncfusion.com/cr/blazor/Syncfusi ![Blazor Tooltip with Window Collision](images/blazor-tooltip-window-collision.png) -N>[View Sample in GitHub](https://github.com/SyncfusionExamples/Change-collision-target-to-viewport-in-Blazor-Tooltip). +N> [View sample on GitHub](https://github.com/SyncfusionExamples/Change-collision-target-to-viewport-in-Blazor-Tooltip). \ No newline at end of file diff --git a/blazor/tooltip/setting-dimension.md b/blazor/tooltip/setting-dimension.md index 7340013c71..3b0b0365b3 100644 --- a/blazor/tooltip/setting-dimension.md +++ b/blazor/tooltip/setting-dimension.md @@ -11,8 +11,7 @@ documentation: ug ## Height and width -The Tooltip can either be assigned with auto height and width values or specific pixel values. The [`Width`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_Width) and [`Height`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_Height) properties are used to set the outer dimension of the Tooltip element. The default value for both the properties is `auto`. It also accepts string and number values in pixels. - +Configure the outer dimensions of the tooltip using the [`Width`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_Width) and [`Height`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_Height) properties. The default for both properties is `auto`. These properties accept values in pixels (for example, "200px") as strings or numbers. Choose values that maintain readability across different screen sizes. ```cshtml @using Syncfusion.Blazor.Popups @@ -32,7 +31,7 @@ The Tooltip can either be assigned with auto height and width values or specific ### Scroll mode -When [`Height`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_Height) is specified with a certain pixel value and the Tooltip content overflows, the scrolling mode gets enabled. +When a specific pixel value is set for [`Height`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_Height) and the tooltip content exceeds that height, vertical scrolling is automatically enabled within the tooltip container. ```cshtml @using Syncfusion.Blazor.Popups @@ -55,6 +54,6 @@ When [`Height`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.S } ``` -![Scrolling in Blazor Tooltip](images/blazor-tooltip-scrolling.gif) +![Blazor Tooltip showing vertical scrolling when content overflows fixed height](images/blazor-tooltip-scrolling.gif) -N> The scrolling mode can best be seen when the sticky mode of the Tooltip is enabled. To enable sticky mode, set the [`IsSticky`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_IsSticky) property to true. \ No newline at end of file +N> Sticky mode is not required for scrolling but can help demonstrate overflow behavior. To enable sticky mode, set the [`IsSticky`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_IsSticky) property to `true`. \ No newline at end of file diff --git a/blazor/tooltip/style.md b/blazor/tooltip/style.md index bc9ace1113..9c8b1e8c63 100644 --- a/blazor/tooltip/style.md +++ b/blazor/tooltip/style.md @@ -13,7 +13,7 @@ The following content provides the exact CSS structure that can be used to modif ## Customizing the tooltip -Use the following CSS to customize the tooltip. +Apply the following CSS to customize the overall tooltip wrapper. ```css .e-tooltip-wrap { @@ -24,8 +24,7 @@ Use the following CSS to customize the tooltip. ## Customizing the Tooltip popup -Use the following CSS to customize the Tooltip popup properties. - +Use the following CSS to style the tooltip popup container (background and border). ```css .e-tooltip-wrap.e-popup { background-color: #fff; @@ -35,7 +34,7 @@ Use the following CSS to customize the Tooltip popup properties. ## Customizing the Tooltip content -Use the following CSS to customize the Tooltip content. +Use the following CSS to customize tooltip content typography and spacing. Ensure sufficient color contrast for accessibility. ```css .e-tooltip-wrap .e-tip-content { @@ -47,7 +46,7 @@ Use the following CSS to customize the Tooltip content. ## Customizing the Tooltip arrow tip -Use the following CSS to customize the Tooltip arrow tip. +Use the following CSS to position and size the outer arrow tip for each placement. ```css /* To customize the arrow tip at bottom */ @@ -85,7 +84,7 @@ Use the following CSS to customize the Tooltip arrow tip. ## Customizing the Tooltip inner tip -Use the following CSS to customize the Tooltip inner tip. +Use the following CSS to style the inner arrow tip that overlays the outer tip. ```css .e-tooltip-wrap .e-arrow-tip-inner.e-tip-bottom { @@ -96,7 +95,7 @@ Use the following CSS to customize the Tooltip inner tip. ## Customizing the Tooltip outer tip -Use the following CSS to customize the Tooltip outer tip. +Use the following CSS to style the outer arrow tip borders for each placement. ```css /* To customize the arrow tip at bottom */ diff --git a/blazor/tooltip/target.md b/blazor/tooltip/target.md index f2a0eb9338..599bc6a5bc 100644 --- a/blazor/tooltip/target.md +++ b/blazor/tooltip/target.md @@ -9,7 +9,7 @@ documentation: ug # Target -The [`Target`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_Target) property specifies the target selector where the Tooltip needs to be displayed. It enables Tooltip activation on specific DOM elements based on user interactions like hover or focus. +The [`Target`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_Target) property accepts a CSS selector that identifies the elements the tooltip should attach to. Matching elements display a tooltip based on user interactions such as hover, focus, or click, depending on the configured `OpensOn` setting. ```cshtml @@ -21,9 +21,9 @@ The [`Target`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.Sf ## Displaying Tooltip for dynamically created target element -The Tooltip component can be configured to display Tooltips for elements that are added to the DOM after the initial page load. This behavior is useful in applications where target is rendered dynamically, such as in response to user actions, API calls, or conditional logic. +Tooltips can be shown for elements that are added to the DOM after the initial render. This is useful when targets are rendered dynamically in response to user actions, API results, or conditional logic. -Set the [`TargetContainer`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_TargetContainer) property using a CSS selector that defines the container in which Tooltip target elements will be automatically display Tooltips. All elements inside this container that match the Target selector will automatically show Tooltips, including those added after the component is rendered—no extra setup needed. +Set the [`TargetContainer`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_TargetContainer) property to a CSS selector that scopes where target discovery occurs. All descendants of this container that match the `Target` selector will automatically display tooltips, including elements added after the component is rendered—no additional configuration is required. Interactions follow the configured `OpensOn` behavior. For keyboard accessibility, ensure targets are focusable when relying on focus or click. ```cshtml @using Syncfusion.Blazor.Popups @@ -50,6 +50,6 @@ Set the [`TargetContainer`](https://help.syncfusion.com/cr/blazor/Syncfusion.Bla } ``` -The [`TargetContainer`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_TargetContainer) property enables automatic Tooltip registration for newly added elements, enhancing dynamic content interactivity. +The [`TargetContainer`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_TargetContainer) property enables automatic tooltip registration for newly added elements within the specified container, improving interactivity in dynamic content scenarios. -![Blazor Tooltip with Dynamic Targets](images/dynamic-target.gif) +![Blazor Tooltip showing on elements added dynamically after render](images/dynamic-target.gif) \ No newline at end of file From 50f61fabf55de936a85a7c242839601a186f6d59 Mon Sep 17 00:00:00 2001 From: Ramya Date: Fri, 10 Oct 2025 15:19:38 +0530 Subject: [PATCH 20/30] Revamping the Ug --- blazor/diagram/annotations/appearance.md | 20 ++++++++--------- .../annotations/connector-annotation.md | 4 ++-- blazor/diagram/annotations/interactions.md | 2 +- blazor/diagram/annotations/node-annotation.md | 8 +++---- blazor/diagram/bpmn-shapes/bpmn-activity.md | 18 +++++++-------- blazor/diagram/bpmn-shapes/bpmn-connectors.md | 22 +++++++++---------- .../diagram/bpmn-shapes/bpmn-data-object.md | 2 +- blazor/diagram/bpmn-shapes/bpmn-data-store.md | 2 +- blazor/diagram/bpmn-shapes/bpmn-event.md | 6 ++--- .../bpmn-shapes/bpmn-expanded-sub-process.md | 12 +++++----- blazor/diagram/bpmn-shapes/bpmn-gateway.md | 2 +- .../bpmn-shapes/bpmn-text-annotation.md | 4 ++-- 12 files changed, 51 insertions(+), 51 deletions(-) diff --git a/blazor/diagram/annotations/appearance.md b/blazor/diagram/annotations/appearance.md index f34faeabe3..d0f34cf281 100644 --- a/blazor/diagram/annotations/appearance.md +++ b/blazor/diagram/annotations/appearance.md @@ -11,7 +11,7 @@ documentation: ug ## How to Customize Annotation Size -The annotation size can be customized using the `Height` and `Width` properties. By default, 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 are 0, which means the annotation inherits the size of its parent node or connector. The following code example demonstrates how to customize the annotation size. +The annotation size can be customized using the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Width) properties. By default, the `Width` and `Height` properties are **0**, which means the annotation inherits the size of its parent node or connector. The following code example demonstrates how to customize the annotation size. ```cshtml @using Syncfusion.Blazor.Diagram @@ -100,7 +100,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ### How to Display Text in Annotation Hyperlinks -The Content property of the Hyperlink can be set to display custom text for the link. +The [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Content) property of the `Hyperlink` can be set to display custom text for the link. ```cshtml @using Syncfusion.Blazor.Diagram @@ -202,13 +202,13 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ### How to Control 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. +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. * **Wrap**: Wraps the text to the next line when it exceeds its bounds. * **Ellipsis**: Truncates the overflown text and renders an ellipsis ("...") to represent the clipped text. * **Clip**: Clips the text, and the overflowed text will not be visible. -The following code sample demonstrates how the TextOverflow property works with different TextWrapping settings. +The following code sample demonstrates how the `TextOverflow` property works with different `TextWrapping` settings. ```cshtml @using Syncfusion.Blazor.Diagram @@ -407,7 +407,7 @@ Annotations can be edited at runtime either programmatically or interactively. B * Programmatically: Invoke the [StartTextEdit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_StartTextEdit_Syncfusion_Blazor_Diagram_IDiagramObject_System_String_) method of the diagram component. * Interactively: * Double-click the annotation. - * Select the parent and press the F2 key. + * Select the parent and press the F2 or enter key. Double-clicking an annotation enables edit mode. For a object with multiple annotations, double-clicking the object itself will start the edit for the first annotation in its collection. When the focus of editor is lost, the annotation content is updated. @@ -540,7 +540,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ![Blazor Diagram with Multiple Annotations](../images/blazor-diagram-multiple-annotations.png) N>* Type of the annotation’s property of the node or connector is ObservableCollection. -
* Default value of the annotation will be null. +
* Default value of the annotation will be **null**.
* All customization options are applicable to each annotation in the collection.
* When double-clicking a node or connector, text editing is initiated only for the first annotation in the collection. @@ -548,7 +548,7 @@ N>* Type of the annotation’s property of the node or connector is ObservableCo [AnnotationConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html) are used to enable or disable certain behaviors of an annotation. Constraints are provided as flag enumerations, allowing multiple behaviors to be combined using bitwise operators. -AnnotationConstraints may have multiple behaviors as follows: +`AnnotationConstraints` may have multiple behaviors as follows: | Constraints | Usages | |---|---| @@ -562,7 +562,7 @@ Refer to [Constraints](https://blazor.syncfusion.com/documentation/diagram/const ## How to Define Templates in Annotations -The Diagram component supports templating for annotations. HTML content can be defined within the DiagramTemplates tag and linked to an annotation by setting the [UseTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_UseTemplate) property to true. To define separate templates for individual annotations, use the ID property to differentiate them. +The Diagram component supports templating for annotations. HTML content can be defined within the `DiagramTemplates` tag and linked to an annotation by setting the [UseTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_UseTemplate) property to **true**. To define separate templates for individual annotations, use the ID property to differentiate them. The following code illustrates how to define a template for both a node's and a connector's annotation. ```cshtml @@ -667,7 +667,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn The [AdditionalInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_AdditionalInfo) property of an annotation allows you to store extra information associated with the annotation in a flexible way. This can be useful for maintaining metadata or additional details that need to be accessed programmatically. -The following code demonstrates how to set a value for the AdditionalInfo property. +The following code demonstrates how to set a value for the `AdditionalInfo` property. ```cshtml @using Syncfusion.Blazor.Diagram @@ -712,7 +712,7 @@ The following code demonstrates how to set a value for the AdditionalInfo proper A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AdditionalInfoProperty) -**Note:** The AdditionalInfo property can accept any type of object as its value. +**Note:** The `AdditionalInfo` property can accept any type of object as its value. ## See also diff --git a/blazor/diagram/annotations/connector-annotation.md b/blazor/diagram/annotations/connector-annotation.md index 58c0c81082..4f374b1fe0 100644 --- a/blazor/diagram/annotations/connector-annotation.md +++ b/blazor/diagram/annotations/connector-annotation.md @@ -21,7 +21,7 @@ Connector annotations can be precisely positioned using several properties of th ## How to Update Offset Position for Annotations -The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PathAnnotation.html#Syncfusion_Blazor_Diagram_PathAnnotation_Offset) property positions an annotation along the length of the connector segment. It accepts a fractional value from 0 to 1, where 0 represents the beginning of the segment, 1 represents the end, and 0.5 represents the center. +The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PathAnnotation.html#Syncfusion_Blazor_Diagram_PathAnnotation_Offset) property positions an annotation along the length of the connector segment. It accepts a fractional value from **0** to **1**, where **0** represents the beginning of the segment, **1** represents the end, and **0.5** represents the center. ```cshtml @using Syncfusion.Blazor.Diagram @@ -228,7 +228,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn | True | ![Blazor Diagram Annotation in Vertical Position](../images/blazor-diagram-annotation-in-vertical-position.png) | | False | ![Blazor Diagram Annotation in Horizontal Position](../images/blazor-diagram-annotation-in-horizontal-position.png) | -N> By default, the SegmentAngle property is disabled (false). +N> By default, the `SegmentAngle` property is disabled (false). The `HorizontalAlignment`, `VerticalAlignment` and `Margin` properties were explained in the [NodeAnnotation](./node-annotation). diff --git a/blazor/diagram/annotations/interactions.md b/blazor/diagram/annotations/interactions.md index 1e6771aab9..3b80687aac 100644 --- a/blazor/diagram/annotations/interactions.md +++ b/blazor/diagram/annotations/interactions.md @@ -79,7 +79,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ## How to rotate a Annotation using the RotationAngle property -The [RotationAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_RotationAngle) property sets the rotation angle of an annotation in degrees. This determines how much the annotation text is tilted from its normal position. The default value is 0. +The [RotationAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_RotationAngle) property sets the rotation angle of an annotation in degrees. This determines how much the annotation text is tilted from its normal position. The default value is **0**. The following code examples illustrate how to configure `RotationAngle` for an annotation. diff --git a/blazor/diagram/annotations/node-annotation.md b/blazor/diagram/annotations/node-annotation.md index 7c5151434a..ee16f73522 100644 --- a/blazor/diagram/annotations/node-annotation.md +++ b/blazor/diagram/annotations/node-annotation.md @@ -20,7 +20,7 @@ The diagram allows you to customize the position and appearance of the annotatio ## How to Change Annotation Offset Position -The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeAnnotation.html#Syncfusion_Blazor_Diagram_ShapeAnnotation_Offset) property of an annotation is used to align the annotations based on fractions. It is defined by a `DiagramPoint` where the X and Y values are fractions of the node's width and height, respectively. A value of 0 represents the top or left edge, 1 represents the bottom or right edge, and 0.5 represents the center. +The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeAnnotation.html#Syncfusion_Blazor_Diagram_ShapeAnnotation_Offset) property of an annotation is used to align the annotations based on fractions. It is defined by a `DiagramPoint` where the X and Y values are fractions of the node's width and height, respectively. A value of **0** represents the top or left edge, **1** represents the bottom or right edge, and **0.5** represents the center. The following code demonstrates how to set an annotation's `Offset`. @@ -78,7 +78,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn >**Note:** > * Type of the offset property for node’s shape annotation is [DiagramPoint](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramPoint.html). -> * Type of the offset property for a connector’s path annotation is double. +> * Type of the offset property for a connector’s path annotation is **double**. > * Node 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 Annotation Alignment @@ -148,7 +148,7 @@ N>* The value of the `HorizontalAlignment` is [Center](https://help.syncfusion.c ## How to Change Annotation Margin -The [Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Margin) property adds space around the annotation. The annotations can be displaced with the margin property. The following code example explains how to align an annotation based on its Offset, HorizontalAlignment, VerticalAlignment, and Margin values. +The [Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Margin) property adds space around the annotation. The annotations can be displaced with the margin property. The following code example explains how to align an annotation based on its `Offset`, `HorizontalAlignment`, `VerticalAlignment`, and `Margin` values. ```cshtml @using Syncfusion.Blazor.Diagram @@ -195,7 +195,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ## How to Align the Text -The [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextAlign) property of an annotation's Style allows you to set how the text should be aligned (Left, Right, Center, or Justify) inside the text block. The following code explains how to set TextAlign for an annotation. +The [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextAlign) property of an annotation's Style allows you to set how the text should be aligned (Left, Right, Center, or Justify) inside the text block. The following code explains how to set `TextAlign` for an annotation. ```cshtml @using Syncfusion.Blazor.Diagram diff --git a/blazor/diagram/bpmn-shapes/bpmn-activity.md b/blazor/diagram/bpmn-shapes/bpmn-activity.md index 9a88ccb3dc..28a8020ee3 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-activity.md +++ b/blazor/diagram/bpmn-shapes/bpmn-activity.md @@ -60,7 +60,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ## How to Create a BPMN Activity Task -The [TaskType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_TaskType) property of the [Bpmn Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html) allows specification of the task type, such as sending, receiving, or user-based tasks. By default, the TaskType property is set to None, which is visually represented by a small event symbol in the top corner of the activity shape. +The [TaskType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_TaskType) property of the [Bpmn Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html) allows specification of the task type, such as sending, receiving, or user-based tasks. By default, the TaskType property is set to **None**, which is visually represented by a small event symbol in the top corner of the activity shape. The following code explains how to create different types of BPMN tasks. @@ -121,7 +121,7 @@ The available BPMN task types are described below. ## How to Create a BPMN Activity Collapsed Sub-Process -A [Collapsed Sub-Process](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_CollapsedSubProcess) is a group of tasks that is used to hide or reveal details of additional levels. The following code explains how to create a [Collapsed Sub-Process](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_CollapsedSubProcess). +A [Collapsed Sub-Process](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_CollapsedSubProcess) is a group of tasks that is used to hide or reveal details of additional levels. The following code explains how to create a `Collapsed Sub-Process`. ```cshtml @using Syncfusion.Blazor.Diagram @@ -167,7 +167,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ### How to Set Loop Type -[Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_Loop) is a task that is internally being looped. The [Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_Loop) property of [Bpmn Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html) allows you to define the type of loop. The default value for [Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_Loop) is [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnLoopCharacteristic.html#Syncfusion_Blazor_Diagram_BpmnLoopCharacteristic_None). +[Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_Loop) is a task that is internally being looped. The `Loop` property of `Bpmn Activity` allows you to define the type of loop. The default value for `Loop` is [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnLoopCharacteristic.html#Syncfusion_Blazor_Diagram_BpmnLoopCharacteristic_None). You can define the `Loop` property in BPMN Activity, as shown in the following code. @@ -224,7 +224,7 @@ The available loop types are described below. ### How to Enable Compensation -[IsCompensation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsCompensation) is triggered when the operation is partially failed and enabled it with the [IsCompensation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsCompensation) property of the [Bpmn Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html). By default, the [IsCompensation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsCompensation) property is set to false. +[IsCompensation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsCompensation) is triggered when the operation is partially failed and enabled it with the `IsCompensation` property of the `Bpmn Activity`. By default, the `IsCompensation` property is set to **false**. ```cshtml @using Syncfusion.Blazor.Diagram @@ -271,9 +271,9 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ### How to Enable Call -A [Call](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsCall) activity is a global sub-process that is reused at various points of the business flow. To create a Call activity, enable the [IsCall](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsCall) property of the [Bpmn Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html). +A [Call](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsCall) activity is a global sub-process that is reused at various points of the business flow. To create a Call activity, enable the [IsCall](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsCall) property of the `Bpmn Activity`. -N>* By default, the [IsCall](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsCall) property is false. +N>* By default, the `IsCall` property is **false**.
* This Property is only applicable for [Task](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_Task) Type Activity. ```cshtml @@ -321,9 +321,9 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ### How to Enable Ad-Hoc -An ad-hoc sub-process is a group of tasks that are executed in any order or skipped in order to fulfill the end condition and set it with the [IsAdhoc](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsAdhoc) property of [Bpmn Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html). +An ad-hoc sub-process is a group of tasks that are executed in any order or skipped in order to fulfill the end condition and set it with the [IsAdhoc](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsAdhoc) property of `Bpmn Activity`. -N>* By default, the [IsAdhoc](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsAdhoc) property is false. +N>* By default, the `IsAdhoc` property is **false**.
* This Property is only applicable for [Collapsed Sub-Process](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_CollapsedSubProcess) Type Activity. ```cshtml @@ -369,7 +369,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ### How to Set Sub-Process Type -The `SubProcessType` property represents the type of task being processed within a BPMN subprocess. The [SubProcessType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_SubProcessType) property of the subprocess allows specification of the subprocess type. By default, it is set to Default. +The [SubProcessType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_SubProcessType) property represents the type of task being processed within a BPMN subprocess. The `SubProcessType` property of the subprocess allows specification of the subprocess type. By default, it is set to **Default**. ```cshtml @using Syncfusion.Blazor.Diagram diff --git a/blazor/diagram/bpmn-shapes/bpmn-connectors.md b/blazor/diagram/bpmn-shapes/bpmn-connectors.md index 57cfe83f18..020092fab5 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-connectors.md +++ b/blazor/diagram/bpmn-shapes/bpmn-connectors.md @@ -23,9 +23,9 @@ To create an Association, set the [Flow](https://help.syncfusion.com/cr/blazor/S The available association types are: -* DirectionalAssociationFlow: A dotted graphical line with one side arrow. -* BiDirectionalAssociationFlow: A dotted graphical line with double side arrow. -* AssociationFlow: A dotted graphical line with an opened arrow. +* **DirectionalAssociationFlow**: A dotted graphical line with one side arrow. +* **BiDirectionalAssociationFlow**: A dotted graphical line with double side arrow. +* **AssociationFlow**: A dotted graphical line with an opened arrow. The following code example explains how to create an association. @@ -76,13 +76,13 @@ The following table shows the visual representation of association flows. ## How to Create a Sequence -A `Sequence` flow shows the order that the activities are performed in a BPMN process and is represented by a solid graphical line. To create a SequenceFlow,set the [Flow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html#Syncfusion_Blazor_Diagram_BpmnFlow_Flow) property of the [BpmnFlowShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html) shape to one of the sequence types. +A `Sequence` flow shows the order that the activities are performed in a BPMN process and is represented by a solid graphical line. To create a SequenceFlow,set the `Flow` property of the `BpmnFlowShape` shape to one of the sequence types. The available sequence types are: -* SequenceFlow: Sequence flows represent the typical path between the two flow objects. -* ConditionalSequenceFlow: Conditional sequence flows are used to control the flow of a process based on certain conditions. -* DefaultSequenceFlow: Default sequence flows are represented by an arrow with a tic mark on one end. +* **SequenceFlow**: Sequence flows represent the typical path between the two flow objects. +* **ConditionalSequenceFlow**: Conditional sequence flows are used to control the flow of a process based on certain conditions. +* **DefaultSequenceFlow**: Default sequence flows are represented by an arrow with a tic mark on one end. The following code example explains how to create a sequence flow. @@ -135,13 +135,13 @@ N> The default value for the property `Sequence` is **Normal.** ## How to Create a Message -A `Message` flows are used when two separately controlled processes communicate and collaborate with one another. An activity or event in one pool can initiate a message to the another pool. Message Flows are depicted as lines with an empty circle indicating where the message originates and an empty arrowhead where the message terminates. To create a MessageFlow, the [Flow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html#Syncfusion_Blazor_Diagram_BpmnFlow_Flow) property of the [BpmnFlowShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html) should be set to one of the message types. +A `Message` flows are used when two separately controlled processes communicate and collaborate with one another. An activity or event in one pool can initiate a message to the another pool. Message Flows are depicted as lines with an empty circle indicating where the message originates and an empty arrowhead where the message terminates. To create a MessageFlow, the `Flow` property of the `BpmnFlowShape` should be set to one of the message types. The available message flow types are: -* InitiatingMessageFlow: An activity or event in one pool can initiate a message to another pool. -* NonInitiatingMessageFlow: An activity or event in one pool cannot initiate a message to another pool. -* MessageFlow: A MessageFlow shows the flow of messages between two participants and is represented by line. +* **InitiatingMessageFlow**: An activity or event in one pool can initiate a message to another pool. +* **NonInitiatingMessageFlow**: An activity or event in one pool cannot initiate a message to another pool. +* **MessageFlow**: A MessageFlow shows the flow of messages between two participants and is represented by line. The following code example explains how to define a message flow. diff --git a/blazor/diagram/bpmn-shapes/bpmn-data-object.md b/blazor/diagram/bpmn-shapes/bpmn-data-object.md index c4ef6c2c6e..d017e24e58 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-data-object.md +++ b/blazor/diagram/bpmn-shapes/bpmn-data-object.md @@ -9,7 +9,7 @@ documentation: ug # BPMN Data Object in Diagram Component -A `BPMN Data Object` represents information flowing through the process, such as data placed into the process, data resulting from the process, data that needs to be collected, or data that must be stored. To define a [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html), the node property [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shape.html) should be set as [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html), and the [DataObjectType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html#Syncfusion_Blazor_Diagram_BpmnDataObject_DataObjectType) property defines whether data is an input or output. You can indicate the collection of data object by setting the [IsCollectiveData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html#Syncfusion_Blazor_Diagram_BpmnDataObject_IsCollectiveData) property of [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html) as **True.** +A `BPMN Data Object` represents information flowing through the process, such as data placed into the process, data resulting from the process, data that needs to be collected, or data that must be stored. To define a [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html), the node property [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shape.html) should be set as [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html), and the [DataObjectType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html#Syncfusion_Blazor_Diagram_BpmnDataObject_DataObjectType) property defines whether data is an input or output. You can indicate the collection of data object by setting the [IsCollectiveData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html#Syncfusion_Blazor_Diagram_BpmnDataObject_IsCollectiveData) property of `BpmnDataObject` as **True.** ```cshtml @using Syncfusion.Blazor.Diagram diff --git a/blazor/diagram/bpmn-shapes/bpmn-data-store.md b/blazor/diagram/bpmn-shapes/bpmn-data-store.md index a63567cb55..0abab2a75d 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-data-store.md +++ b/blazor/diagram/bpmn-shapes/bpmn-data-store.md @@ -9,7 +9,7 @@ documentation: ug # BPMN Data Store in Blazor Diagram Component -A DataStore is used to store or access data associated with a business process. To create a `Data Store` shape, the node property [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shape.html) should be set to [BpmnDataStore](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataStore.html). The following code example explains how to create a data source. +A `DataStore` is used to store or access data associated with a business process. To create a `Data Store` shape, the node property [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shape.html) should be set to [BpmnDataStore](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataStore.html). The following code example explains how to create a data store. ```cshtml @using Syncfusion.Blazor.Diagram diff --git a/blazor/diagram/bpmn-shapes/bpmn-event.md b/blazor/diagram/bpmn-shapes/bpmn-event.md index 6dfa0d17ef..b0a094e042 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-event.md +++ b/blazor/diagram/bpmn-shapes/bpmn-event.md @@ -11,9 +11,9 @@ documentation: ug An [Event](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnEvent.html) is a common BPMN process model element that represents something that happens during a business process and is notated with a circle. The type of events are as follows: -* Start - Indicates the beginning of the process and every business process start with an event. -* Intermediate - Indicates the middle of the process. -* End - Indicates the end of the process, and every business process ends with an event. +* **Start** - Indicates the beginning of the process and every business process start with an event. +* **Intermediate** - Indicates the middle of the process. +* **End** - Indicates the end of the process, and every business process ends with an event. The [EventType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnEvent.html#Syncfusion_Blazor_Diagram_BpmnEvent_EventType) property of the node allows you to define the type of the event. The default value of the event is [Start](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnEventType.html#Syncfusion_Blazor_Diagram_BpmnEventType_Start). The following code example explains how to create a BPMN event. diff --git a/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md b/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md index 9b76b67a25..cfdb746466 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md +++ b/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md @@ -55,7 +55,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ## How to Add BPMN Nodes into a BPMN Expanded Sub-Process -To add a BpmnNode into [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html), define the BpmnNodeViewModel object and add it to the [Children](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_Children) collection of the [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html). +To add a Bpmn node into [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html), define the BpmnNodeViewModel object and add it to the [Children](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_Children) collection of the `BpmnExpandedSubProcess`. The following code example explains how to add a BPMN node to an BPMN Expanded Sub-Process using the `Children` property. @@ -121,8 +121,8 @@ The following image shows how to add BPMN node into the BPMN ExpandedSubProcess ### How to Set Loop Type - The [Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_Loop) property in the [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html) component defines the type of loop behavior for a task that is internally repeated. By default, the Loop property is set to [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnLoopCharacteristic.html#Syncfusion_Blazor_Diagram_BpmnLoopCharacteristic_None). - The Loop property can be configured within the BpmnExpandedSubProcess component, as demonstrated in the following example. + The [Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_Loop) property in the `BpmnExpandedSubProcess` component defines the type of loop behavior for a task that is internally repeated. By default, the Loop property is set to [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnLoopCharacteristic.html#Syncfusion_Blazor_Diagram_BpmnLoopCharacteristic_None). + The Loop property can be configured within the `BpmnExpandedSubProcess` component, as demonstrated in the following example. ```cshtml @using Syncfusion.Blazor.Diagram @@ -176,7 +176,7 @@ The following table describes the available loop types for an Expanded Sub-Proce ### How to Enable Compensation -[IsCompensation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_IsCompensation) is triggered when the operation is partially failed and can be enabled with the [IsCompensation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_IsCompensation) property of the [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html). By default, the [IsCompensation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_IsCompensation) is set to false. +[IsCompensation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_IsCompensation) is triggered when the operation is partially failed and can be enabled with the `IsCompensation` property of the `BpmnExpandedSubProcess`. By default, the `IsCompensation` is set to **false**. ```cshtml @using Syncfusion.Blazor.Diagram @@ -221,7 +221,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ### How to Enable Ad-Hoc -An `Ad-Hoc` Expanded Sub-Process is a group of tasks that are executed in any order or skipped in order to fulfill the end condition and can be set with the [IsAdhoc](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_IsAdhoc) property of [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html). +An `Ad-Hoc` Expanded Sub-Process is a group of tasks that are executed in any order or skipped in order to fulfill the end condition and can be set with the [IsAdhoc](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_IsAdhoc) property of `BpmnExpandedSubProcess`. ```cshtml @using Syncfusion.Blazor.Diagram @@ -266,7 +266,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ### How to Set Sub-Process Type -The `SubProcessType` represents the type of task being processed within a BPMN expanded subprocess. The [SubProcessType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_SubProcessType) property of the [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html) component allows specification of the subprocess type. By default, it is set to [Default](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnSubProcessType.html#Syncfusion_Blazor_Diagram_BpmnSubProcessType_Default). +The [SubProcessType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_SubProcessType) represents the type of task being processed within a BPMN expanded subprocess. The `SubProcessType` property of the `BpmnExpandedSubProcess` component allows specification of the subprocess type. By default, it is set to [Default](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnSubProcessType.html#Syncfusion_Blazor_Diagram_BpmnSubProcessType_Default). ```cshtml @using Syncfusion.Blazor.Diagram diff --git a/blazor/diagram/bpmn-shapes/bpmn-gateway.md b/blazor/diagram/bpmn-shapes/bpmn-gateway.md index 1dd2cb098d..b8e7fa346e 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-gateway.md +++ b/blazor/diagram/bpmn-shapes/bpmn-gateway.md @@ -9,7 +9,7 @@ documentation: ug # BPMN Gateway in Diagram Component -A `BPMN Gateway` is used to control the flow of a process and it is represented in diamond shape. The [GatewayType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html#Syncfusion_Blazor_Diagram_BpmnGateway_GatewayType) property of the [BpmnGateway](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html) can be set with any of the appropriate gateways. By default, the value of [GatewayType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html#Syncfusion_Blazor_Diagram_BpmnGateway_GatewayType) is [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGatewayType.html#Syncfusion_Blazor_Diagram_BpmnGatewayType_None). The following code example explains how to create a BPMN Gateway. +A `BPMN Gateway` is used to control the flow of a process and it is represented in diamond shape. The [GatewayType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html#Syncfusion_Blazor_Diagram_BpmnGateway_GatewayType) property of the [BpmnGateway](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html) can be set with any of the appropriate gateways. By default, the value of `GatewayType` is [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGatewayType.html#Syncfusion_Blazor_Diagram_BpmnGatewayType_None). The following code example explains how to create a BPMN Gateway. ```cshtml @using Syncfusion.Blazor.Diagram diff --git a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md index 98411851e3..006b540eaa 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md +++ b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md @@ -11,7 +11,7 @@ documentation: ug * A BPMN object can be associated with a text annotation that does not affect the flow but provides information about objects within a flow. -* A TextAnnotation points to or references another BPMN shape, which we call the [TextAnnotationTarget](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTextAnnotation.html#Syncfusion_Blazor_Diagram_BpmnTextAnnotation_TextAnnotationTarget) of the TextAnnotation. When a target shape is moved, copied, or deleted, any TextAnnotations attached to the shape will be moved, copied, or deleted too. Thus, the TextAnnotations remain with their target shapes though you can reposition the TextAnnotation to any offset from its target. The [TextAnnotationTarget](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTextAnnotation.html#Syncfusion_Blazor_Diagram_BpmnTextAnnotation_TextAnnotationTarget) property of the [BpmnTextAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTextAnnotation.html) is used to connect an annotation element to the BPMN Node. +* A TextAnnotation points to or references another BPMN shape, which we call the [TextAnnotationTarget](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTextAnnotation.html#Syncfusion_Blazor_Diagram_BpmnTextAnnotation_TextAnnotationTarget) of the TextAnnotation. When a target shape is moved, copied, or deleted, any TextAnnotations attached to the shape will be moved, copied, or deleted too. Thus, the TextAnnotations remain with their target shapes though you can reposition the TextAnnotation to any offset from its target. The `TextAnnotationTarget` property of the [BpmnTextAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTextAnnotation.html) is used to connect an annotation element to the BPMN Node. * The annotation element can be switched from a BPMN node to another BPMN node simply by dragging the source end of the annotation connector into the other BPMN node. @@ -19,7 +19,7 @@ documentation: ug * The [TextAnnotationDirection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTextAnnotation.html#Syncfusion_Blazor_Diagram_BpmnTextAnnotation_TextAnnotationDirection) property is used to set the shape direction of the text annotation. -* By default, the [TextAnnotationDirection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTextAnnotation.html#Syncfusion_Blazor_Diagram_BpmnTextAnnotation_TextAnnotationDirection) is set to a [Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextAnnotationDirection.html#Syncfusion_Blazor_Diagram_TextAnnotationDirection_Left). +* By default, the `TextAnnotationDirection` is set to a [Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextAnnotationDirection.html#Syncfusion_Blazor_Diagram_TextAnnotationDirection_Left). * To set the size for text annotation, use the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_Height) properties of the node. From b894122b8ba8c6e326d5b35920cdcc5a81b9fddd Mon Sep 17 00:00:00 2001 From: Ashwini-SF5049 Date: Fri, 10 Oct 2025 15:30:50 +0530 Subject: [PATCH 21/30] 983104: Updated --- blazor/tooltip/content.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor/tooltip/content.md b/blazor/tooltip/content.md index 0a3227cda2..cd95c7e477 100644 --- a/blazor/tooltip/content.md +++ b/blazor/tooltip/content.md @@ -212,7 +212,7 @@ By default, the tooltip can show formatted content. To improve the layout or cre } ``` -This option is useful when rendering HTML stored as a string from a database or API. Do not render untrusted HTML without sanitization, as doing so may introduce cross-site scripting (XSS) vulnerabilities. +This is useful when you need to render HTML content that's stored as a string, perhaps from a database or API. ![Blazor Tooltip with Content](images/blazor-tooltip-with-content.gif) From 96c78fea66b06205fe397cc9be3bd4be92c6ffbc Mon Sep 17 00:00:00 2001 From: Ashwini-SF5049 Date: Fri, 10 Oct 2025 15:55:27 +0530 Subject: [PATCH 22/30] 983104: Updated --- blazor/tooltip/target.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/blazor/tooltip/target.md b/blazor/tooltip/target.md index 599bc6a5bc..79f2da0fd3 100644 --- a/blazor/tooltip/target.md +++ b/blazor/tooltip/target.md @@ -1,13 +1,13 @@ --- layout: post title: Target support in Blazor Tooltip Component | Syncfusion -description: Checkout and learn here all about setting target elements in the Syncfusion Blazor Tooltip component, and explore built-in support for displaying Tooltips on elements added dynamically after the initial render and more. +description: Checkout and learn here all about setting target elements in the Syncfusion Blazor Tooltip component render and more. platform: Blazor control: Tooltip documentation: ug --- -# Target +# Configure target and container selectors in Blazor Tooltip The [`Target`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_Target) property accepts a CSS selector that identifies the elements the tooltip should attach to. Matching elements display a tooltip based on user interactions such as hover, focus, or click, depending on the configured `OpensOn` setting. From 267b46e7b518172b6fa5510ae4b773e5803440e9 Mon Sep 17 00:00:00 2001 From: Ashwini-SF5049 Date: Fri, 10 Oct 2025 16:07:37 +0530 Subject: [PATCH 23/30] 983104: Updated the UG Documentation for Toggle-switch-button --- blazor/toggle-switch-button/accessibility.md | 14 +++--- .../getting-started-webapp.md | 48 +++++++++---------- .../toggle-switch-button/getting-started.md | 36 +++++++------- .../how-to/change-size.md | 2 +- ...change-switch-state-using-toggle-method.md | 4 +- .../customize-the-appearance-of-a-switch.md | 10 ++-- .../toggle-switch-button/how-to/enable-rtl.md | 2 +- .../how-to/set-disabled-state.md | 6 +-- .../how-to/toggle-switch-model-binding.md | 7 ++- blazor/toggle-switch-button/native-event.md | 15 +++--- .../style-and-appearance.md | 18 +++---- 11 files changed, 80 insertions(+), 82 deletions(-) diff --git a/blazor/toggle-switch-button/accessibility.md b/blazor/toggle-switch-button/accessibility.md index 2b0d4eb933..bd86dc6512 100644 --- a/blazor/toggle-switch-button/accessibility.md +++ b/blazor/toggle-switch-button/accessibility.md @@ -9,7 +9,7 @@ documentation: ug # Accessibility in Blazor Toggle Switch Button Component -The Blazor Toggle Switch Button 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. +The Blazor Toggle Switch Button 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. The accessibility compliance for the Blazor Toggle Switch Button component is outlined below. @@ -38,24 +38,24 @@ The accessibility compliance for the Blazor Toggle Switch Button component is ou ## WAI-ARIA attributes -The Blazor Toggle Switch Button component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/switch/) patterns to meet the accessibility. The following ARIA attributes are used in the Blazor Toggle Switch Button component: +The Blazor Toggle Switch Button component follows the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/switch/) pattern to meet accessibility requirements. The following ARIA attributes are used in the Blazor Toggle Switch Button component. The component uses the switch role and reflects its state to assistive technologies. Ensure a clear, accessible label is provided via visible text, `aria-label`, or `aria-labelledby` as appropriate. | Attributes | Purpose | | --- | --- | -| `role` | Indicates the Toggle Switch Button component. | -| `aria-disabled` | Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. | +| `role` | Identifies the element as a switch control. | +| `aria-disabled` | Indicates that the element is disabled and is not operable. | ## Keyboard interaction -The Blazor Toggle Switch Button component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/switch/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor Toggle Switch Button component. +The Blazor Toggle Switch Button component follows the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/switch/#keyboardinteraction) guideline, making it usable for people who rely on assistive technologies (AT) and keyboard navigation. The following keyboard shortcuts are supported. | Windows | Mac | Actions | | --- | --- | --- | -| Space | space | When the Toggle Switch Button has focus, pressing the Space key changes the state of the Toggle Switch Button. | +| Space | Space | When the toggle switch has focus, pressing Space toggles the switch state. | ## Ensuring accessibility -The Blazor Toggle Switch Button component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests. +The Blazor Toggle Switch Button component’s accessibility levels are validated using [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with Playwright tests. The accessibility compliance of the Blazor Toggle Switch Button component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/switch) in a new window to evaluate the accessibility of the Blazor Toggle Switch Button component with accessibility tools. diff --git a/blazor/toggle-switch-button/getting-started-webapp.md b/blazor/toggle-switch-button/getting-started-webapp.md index 7de1f49887..dde0d7c32d 100644 --- a/blazor/toggle-switch-button/getting-started-webapp.md +++ b/blazor/toggle-switch-button/getting-started-webapp.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Toggle Switch Button in Blazor Web App -This section briefly explains about how to include [Blazor Toggle Switch Button](https://www.syncfusion.com/blazor-components/blazor-toggle-switch-button) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section explains how to include the [Blazor Toggle Switch Button](https://www.syncfusion.com/blazor-components/blazor-toggle-switch-button) component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. {% tabcontents %} @@ -21,17 +21,17 @@ This section briefly explains about how to include [Blazor Toggle Switch Button] ## Create a new Blazor Web App in Visual Studio -You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) when creating the Blazor Web App. ## Install Syncfusion® Blazor Buttons and Themes NuGet in the App -To add **Blazor Toggle Switch Button** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor Toggle Switch Button** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly` or `Auto` render modes in a Blazor Web App, install the Syncfusion® Blazor NuGet packages in the client project. -Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, use the following Package Manager commands. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -42,7 +42,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages list](https://blazor.syncfusion.com/documentation/nuget-packages) for available packages and component details. {% endtabcontent %} @@ -54,9 +54,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor Web App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) when creating the Blazor Web App. For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. @@ -70,15 +70,15 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). +N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to the [render interactive modes](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes) section. ## Install Syncfusion® Blazor Buttons and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using `WebAssembly` or `Auto` render modes in a Blazor Web App, install the Syncfusion® Blazor components NuGet packages within the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure the current directory contains the project `.csproj` file. +* Run the following commands to install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/), and restore dependencies. {% tabs %} @@ -92,7 +92,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages list](https://blazor.syncfusion.com/documentation/nuget-packages) for available packages and component details. {% endtabcontent %} @@ -103,9 +103,9 @@ N> Syncfusion® Blazor components are availa | Interactive Render Mode | Description | | -- | -- | | WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| -| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| +| Server | Open **~/_Imports.razor** file, which is located in the `Components` folder.| -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespace. +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -116,9 +116,9 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespace. {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. +Now, register the Syncfusion® Blazor service in the **~/Program.cs** file of the Blazor Web App. -If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in both **~/Program.cs** files of the Blazor Web App. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -152,7 +152,7 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion® Blazor Service only in that **~/Program.cs** file. +If the **Interactive Render Mode** is set to `Server`, the project contains a single **~/Program.cs** file. In this case, register the Syncfusion® Blazor service only in that **~/Program.cs** file. {% tabs %} {% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} @@ -189,7 +189,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> See [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) for theme reference options ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)). Choose a theme that matches the application (for example, Bootstrap 5, Fluent, or Material). The script reference enables required JavaScript interop for Syncfusion components. ## Add Syncfusion® Blazor Toggle Switch Button component @@ -202,7 +202,7 @@ Add the Syncfusion® Blazor Toggle Switch Bu | | Server | @rendermode InteractiveServer | | | None | --- | -N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default. +N> If the **Interactivity location** is set to `Global` and the **Render mode** is `Auto`, `WebAssembly`, or `Server`, the render mode is configured in the `App.razor` file by default. {% tabs %} {% highlight razor %} @@ -227,13 +227,13 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Toggle Switch Button component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor Toggle Switch Button component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/BXBpXsqjfdrkkiow?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toggle Switch Button Component](./images/blazor-toggle-switch-button.png)" %} ## Setting On and Off Text -On and Off text can be set using [OnLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSwitch-1.html#Syncfusion_Blazor_Buttons_SfSwitch_1_OnLabel) and [OffLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSwitch-1.html#Syncfusion_Blazor_Buttons_SfSwitch_1_OffLabel) properties of Toggle Switch Button component. In the following example, `onLabel` is set as `ON` and `offLabel` is set as `OFF`. +On and Off text can be set using the [OnLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSwitch-1.html#Syncfusion_Blazor_Buttons_SfSwitch_1_OnLabel) and [OffLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSwitch-1.html#Syncfusion_Blazor_Buttons_SfSwitch_1_OffLabel) properties of the Toggle Switch Button component. In the following example, `onLabel` is set as `ON` and `offLabel` is set as `OFF`. {% tabs %} {% highlight razor %} @@ -247,7 +247,7 @@ On and Off text can be set using [OnLabel](https://help.syncfusion.com/cr/blazor {% endhighlight %} {% endtabs %} -N> Switch does not have text support for material themes, and does not support long custom text. +N> The switch does not have text support in Material themes and does not support long custom text. {% previewsample "https://blazorplayground.syncfusion.com/embed/BXLzZiKtzdAdnBzy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toggle Switch Button With Label Sample](./images/blazor-toggle-switch-button-label.png)" %} diff --git a/blazor/toggle-switch-button/getting-started.md b/blazor/toggle-switch-button/getting-started.md index 0842b83ef5..0824aba3ea 100644 --- a/blazor/toggle-switch-button/getting-started.md +++ b/blazor/toggle-switch-button/getting-started.md @@ -11,9 +11,9 @@ documentation: ug # Getting Started with Blazor Toggle Switch Button Component -This section briefly explains about how to include [Blazor Toggle Switch Button](https://www.syncfusion.com/blazor-components/blazor-toggle-switch-button) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This section explains how to add the [Blazor Toggle Switch Button](https://www.syncfusion.com/blazor-components/blazor-toggle-switch-button) component to a Blazor WebAssembly App using Visual Studio and Visual Studio Code. -To get start quickly with Toggle Switch Button Component using Blazor, check on this video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ToggleSwitchButton) sample. +To get started quickly with the Toggle Switch Button component in Blazor, watch the following video or explore the [GitHub getting started sample](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ToggleSwitchButton). {% youtube "youtube:https://www.youtube.com/watch?v=u_5050Ws9JM"%} @@ -28,11 +28,11 @@ To get start quickly with Toggle Switch Button Component using Blazor, check on ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ## Install Syncfusion® Blazor Buttons and Themes NuGet in the App -To add **Blazor Toggle Switch Button** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor Toggle Switch Button** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following Package Manager commands. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -43,7 +43,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for a list of available packages and component details. {% endtabcontent %} @@ -55,9 +55,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application using the following command in the terminal (Ctrl+`). {% tabs %} @@ -73,8 +73,8 @@ cd BlazorApp ## Install Syncfusion® Blazor Buttons and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure you are in the project root directory where the `.csproj` file is located. +* Run the following commands to install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/), and restore dependencies. {% tabs %} @@ -88,7 +88,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for a list of available packages and component details. {% endtabcontent %} @@ -96,7 +96,7 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespace. +Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespaces. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -107,7 +107,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +Now, register the Syncfusion® Blazor services in the **~/Program.cs** file of the Blazor WebAssembly app. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -131,7 +131,7 @@ await builder.Build().RunAsync(); ## Add stylesheet -The theme stylesheet can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet references in the `` section of the **~/index.html** file. +The theme stylesheet is provided via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section of the **~/index.html** file. Any Syncfusion theme can be used (for example, Bootstrap 5, Fluent, or Material); the following uses Bootstrap 5 as an example. ```html @@ -139,7 +139,7 @@ The theme stylesheet can be accessed from NuGet through [Static Web Assets](http ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. +N> See [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) for theme reference options ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)). ## Add Blazor Toggle Switch Button component @@ -159,13 +159,13 @@ Add the Syncfusion® Blazor Toggle Switch Bu {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Toggle Switch Button component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor Toggle Switch Button component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/BXBpXsqjfdrkkiow?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toggle Switch Button Component](./images/blazor-toggle-switch-button.png)" %} ## Setting On and Off Text -On and Off text can be set using [OnLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSwitch-1.html#Syncfusion_Blazor_Buttons_SfSwitch_1_OnLabel) and [OffLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSwitch-1.html#Syncfusion_Blazor_Buttons_SfSwitch_1_OffLabel) properties of Toggle Switch Button component. In the following example, `onLabel` is set as `ON` and `offLabel` is set as `OFF`. +On and Off text can be set using [OnLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSwitch-1.html#Syncfusion_Blazor_Buttons_SfSwitch_1_OnLabel) and [OffLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSwitch-1.html#Syncfusion_Blazor_Buttons_SfSwitch_1_OffLabel) properties of the Toggle Switch Button component. In the following example, `onLabel` is set to `ON` and `offLabel` is set to `OFF`. {% tabs %} {% highlight razor %} @@ -179,7 +179,7 @@ On and Off text can be set using [OnLabel](https://help.syncfusion.com/cr/blazor {% endhighlight %} {% endtabs %} -N> Switch does not have text support for material themes, and does not support long custom text. +N> The switch does not have text support in Material themes and does not support long custom text. {% previewsample "https://blazorplayground.syncfusion.com/embed/BXLzZiKtzdAdnBzy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toggle Switch Button With Label Sample](./images/blazor-toggle-switch-button-label.png)" %} @@ -187,4 +187,4 @@ N> Switch does not have text support for material themes, and does not support l * [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) * [Getting Started with Syncfusion® Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) +* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) \ No newline at end of file diff --git a/blazor/toggle-switch-button/how-to/change-size.md b/blazor/toggle-switch-button/how-to/change-size.md index 9ae5c03deb..457886ff06 100644 --- a/blazor/toggle-switch-button/how-to/change-size.md +++ b/blazor/toggle-switch-button/how-to/change-size.md @@ -9,7 +9,7 @@ documentation: ug # Change Size in Blazor Toggle Switch Button Component -The different Toggle Switch Button sizes available are default and small. To reduce the size of default Toggle Switch Button to small, set the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSwitch-1.html) property to `e-small`. +The Toggle Switch Button supports three sizes: default, small, and bigger. Size is controlled through the CssClass utility classes. To render a smaller switch, set the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSwitch-1.html) property to `e-small`. To render a larger switch, use `e-bigger`. When no size class is applied, the component renders at the default size. ```cshtml @using Syncfusion.Blazor.Buttons diff --git a/blazor/toggle-switch-button/how-to/change-switch-state-using-toggle-method.md b/blazor/toggle-switch-button/how-to/change-switch-state-using-toggle-method.md index 801351f2a3..7f8724d9e9 100644 --- a/blazor/toggle-switch-button/how-to/change-switch-state-using-toggle-method.md +++ b/blazor/toggle-switch-button/how-to/change-switch-state-using-toggle-method.md @@ -9,7 +9,7 @@ documentation: ug # Change Blazor Toggle Switch Button state using toggle method -This section explains about how to toggle between the Toggle Switch Button states using [Toggle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSwitch-1.html) method. +This section describes how to programmatically switch between Toggle Switch Button states using the [Toggle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSwitch-1.html) method. ```cshtml @@ -30,4 +30,4 @@ This section explains about how to toggle between the Toggle Switch Button state ![Changing Blazor Toggle Switch Button State](./../images/blazor-toggle-switch-button-state.png) -N> Switch triggers [OnChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSwitch-1.html) event on every state stage to perform custom operations. \ No newline at end of file +N> The switch triggers the [OnChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSwitch-1.html) event on every state stage to perform custom operations. \ No newline at end of file diff --git a/blazor/toggle-switch-button/how-to/customize-the-appearance-of-a-switch.md b/blazor/toggle-switch-button/how-to/customize-the-appearance-of-a-switch.md index 9fee457091..7e18253cae 100644 --- a/blazor/toggle-switch-button/how-to/customize-the-appearance-of-a-switch.md +++ b/blazor/toggle-switch-button/how-to/customize-the-appearance-of-a-switch.md @@ -9,13 +9,13 @@ documentation: ug # Customize the appearance of a Blazor Toggle Switch Button Component -The appearance of the Toggle Switch Button component can be customized using the CSS rules. Define your own CSS rules according to your requirement and assign the class name to the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSwitch-1.html) property. +The appearance of the Toggle Switch Button can be customized using CSS. Define the required CSS rules and assign the class name to the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSwitch-1.html) property to apply them to the component. ## Customize Toggle Switch Button bar and handle -Toggle Switch Button bar and handle can be customized as per requirement using CSS rules. Toggle Switch Button bar and handle customized using [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSwitch-1.html) property. In the following sample, the `border-radius` CSS property for `e-switch-inner` and `e-switch-handle` elements was changed border radius circle to square shape. +Toggle Switch Button bar and handle can be customized using CSS rules by applying a custom class through the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSwitch-1.html) property. In the following example, the border-radius of the `e-switch-inner` and `e-switch-handle` elements is changed from circular to square. -N> For this customization, refer the `fabric.css` file. This could be found from our [CDN](https://cdn.syncfusion.com/ej2/fabric.css) link. +N> For this customization, reference the theme stylesheet used by the application. The example below assumes the Fabric theme and references `fabric.css` from the CDN. If using a different theme (for example, Material, Bootstrap 5, or Fluent), reference the corresponding theme stylesheet instead. This file can be found at the following [CDN](https://cdn.syncfusion.com/ej2/fabric.css) link. ```cshtml @using Syncfusion.Blazor.Buttons @@ -132,9 +132,9 @@ N> For this customization, refer the `fabric.css` file. This could be found from ## Color the Toggle Switch Button -Toggle Switch Button colors can be customized as per the requirement using CSS rules. Toggle Switch Button bar and handle colors customized using [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSwitch-1.html) property. In the following sample, the `e-switch-inner` and `e-switch-off` elements background and border colors were changed from default colors. +Toggle Switch Button colors can be customized using CSS rules by adding a custom class through the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSwitch-1.html) property. In the following example, the background and border colors of the `e-switch-inner` and `e-switch-off` elements are changed from their default values. -N> For this customization you need to refer the `bootstrap.css` file. This could be found from our [CDN](https://cdn.syncfusion.com/ej2/bootstrap.css) link. +N> For this customization, reference the theme stylesheet that matches the application. The example below references `bootstrap.css` from the CDN. If using Bootstrap 5, Material, or Fluent themes, include the appropriate theme stylesheet to ensure selectors and variables match. The file can be found at the following [CDN](https://cdn.syncfusion.com/ej2/bootstrap.css) link. When choosing colors, ensure sufficient contrast for accessibility and verify appearance in dark mode and RTL layouts as needed. ```cshtml @using Syncfusion.Blazor.Buttons diff --git a/blazor/toggle-switch-button/how-to/enable-rtl.md b/blazor/toggle-switch-button/how-to/enable-rtl.md index ebc74aa2f8..20d353ba84 100644 --- a/blazor/toggle-switch-button/how-to/enable-rtl.md +++ b/blazor/toggle-switch-button/how-to/enable-rtl.md @@ -9,7 +9,7 @@ documentation: ug # Enable RTL in Blazor Toggle Switch Button Component -Toggle Switch Button component has RTL support. This can be achieved by setting [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSwitch-1.html) as `true`. +The Toggle Switch Button supports right-to-left (RTL) layouts. Enable RTL by setting the[EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSwitch-1.html) as `true`. The following example illustrates how to enable right-to-left support in Toggle Switch Button component. diff --git a/blazor/toggle-switch-button/how-to/set-disabled-state.md b/blazor/toggle-switch-button/how-to/set-disabled-state.md index 3f8c2b6522..0fb5777602 100644 --- a/blazor/toggle-switch-button/how-to/set-disabled-state.md +++ b/blazor/toggle-switch-button/how-to/set-disabled-state.md @@ -9,9 +9,9 @@ documentation: ug # Set disabled state in Blazor Toggle Switch Button Component -Toggle Switch Button can be disabled by setting the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSwitch-1.html) property to true. +Toggle Switch Button can be disabled by setting the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSwitch-1.html) property to `true`. -The following example illustrates how to disable support in Toggle Switch Button component. +The following example illustrates how to disable the Toggle Switch Button component. ```cshtml @using Syncfusion.Blazor.Buttons @@ -24,4 +24,4 @@ The following example illustrates how to disable support in Toggle Switch Button ``` -![Blazor Toggle Switch Button in Disable State](./../images/blazor-toggle-switch-button-disable-state.png) \ No newline at end of file +![Blazor Toggle Switch Button in disabled state](./../images/blazor-toggle-switch-button-disable-state.png) \ No newline at end of file diff --git a/blazor/toggle-switch-button/how-to/toggle-switch-model-binding.md b/blazor/toggle-switch-button/how-to/toggle-switch-model-binding.md index acc5a177a3..53c6ce255b 100644 --- a/blazor/toggle-switch-button/how-to/toggle-switch-model-binding.md +++ b/blazor/toggle-switch-button/how-to/toggle-switch-model-binding.md @@ -7,12 +7,11 @@ control: Toggle Switch Button documentation: ug --- -# Model binding in Blazor Toggle Switch Button Component +# Model Binding in Blazor Toggle Switch Button Component This section demonstrates the strongly typed extension support in Toggle Switch Button. The view that can bind with any model is called as strongly typed view. You can bind any class as model to view. The model properties can be accessed on that view. The data associated with model can be used to render the component. -In this sample, first check the option and click the submit button to post the selected value in the Toggle Switch Button. When value is not checked, validation error message will be shown below the Toggle Switch Button. - +In this sample, select the option and click the Submit button to post the value bound to the model. If the value is not checked, a validation error message is displayed below the toggle switch, enforced by the `Range` attribute configured to require `true`. The text content inside the `SfSwitch` acts as its label. To handle form submission logic, use `OnValidSubmit` and `OnInvalidSubmit` on the `EditForm` as needed. The `SfButton` is configured as a submit button using `HtmlAttributes` with `type="submit"`. ```cshtml @using Syncfusion.Blazor.Buttons @@ -44,4 +43,4 @@ In this sample, first check the option and click the submit button to post the s ``` -![Model Binding in Blazor Toggle Switch Button](./../images/blazor-toggle-switch-button-model-binding.png) \ No newline at end of file +![Model binding and validation in Blazor Toggle Switch Button](./../images/blazor-toggle-switch-button-model-binding.png) \ No newline at end of file diff --git a/blazor/toggle-switch-button/native-event.md b/blazor/toggle-switch-button/native-event.md index 277ab250a5..aa64edcd03 100644 --- a/blazor/toggle-switch-button/native-event.md +++ b/blazor/toggle-switch-button/native-event.md @@ -3,7 +3,7 @@ layout: post title: Events in Blazor Toggle Switch Button Component | Syncfusion description: Checkout and learn here all about events in Syncfusion Blazor Toggle Switch Button component and more. platform: Blazor -control: Toggle Switch Button +control: Toggle Switch Button documentation: ug --- @@ -11,7 +11,7 @@ documentation: ug ## ValueChange Event -The ValueChange event will trigger when switch state has been changed by user interaction. ValueChange event argument type is [ChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.ChangeEventArgs-1.html). [ChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.ChangeEventArgs-1.html) contains [Checked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.ChangeEventArgs-1.html#Syncfusion_Blazor_Buttons_ChangeEventArgs_1_Checked) and [Event](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.ChangeEventArgs-1.html#Syncfusion_Blazor_Buttons_ChangeEventArgs_1_Event) properties. +The ValueChange event triggers when the switch state changes due to user interaction. The event argument type is [ChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.ChangeEventArgs-1.html). [ChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.ChangeEventArgs-1.html) provides the [Checked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.ChangeEventArgs-1.html#Syncfusion_Blazor_Buttons_ChangeEventArgs_1_Checked) and [Event](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.ChangeEventArgs-1.html#Syncfusion_Blazor_Buttons_ChangeEventArgs_1_Event) properties. ```csharp @@ -33,10 +33,9 @@ N> Toggle Switch Button has support for nullable boolean ## Native Events -The native event can be defined using `event` attribute in component. The value of attribute is treated as an event handler. The event specific data will be available in event arguments. - -The different event argument types for each event are, +The native event can be defined using `event` attributes (for example, @onfocus, @onkeydown). The value of the attribute is an event handler method, and event-specific data is exposed through the corresponding event argument type. +The event argument types are: * Focus Events - UIFocusEventArgs * Mouse Events - UIMouseEventArgs * Keyboard Events - UIKeyboardEventArgs @@ -51,11 +50,11 @@ The following native event support has been provided to the Toggle Switch Button * onfocusin * onkeydown * onkeyup -* Onkeypress +* onkeypress ## How to bind focus event to Toggle Switch Button -The `onfocus` attribute is used to bind the focus event for Toggle Switch Button. Here, we have explained about the sample code snippets of Toggle Switch Button. +The `onfocus` attribute is used to bind the focus event for Toggle Switch Button. The following example shows how to bind the focus event to the Toggle Switch Button. ```cshtml @using Syncfusion.Blazor.Buttons @@ -75,4 +74,4 @@ The `onfocus` attribute is used to bind the focus event for Toggle Switch Button } } -``` +``` \ No newline at end of file diff --git a/blazor/toggle-switch-button/style-and-appearance.md b/blazor/toggle-switch-button/style-and-appearance.md index 3483b4d78d..bf137d1fd8 100644 --- a/blazor/toggle-switch-button/style-and-appearance.md +++ b/blazor/toggle-switch-button/style-and-appearance.md @@ -3,7 +3,7 @@ layout: post title: Styles and Appearances in Blazor Toggle Switch Button | Syncfusion description: Learn here all about styles and appearances in Syncfusion Blazor Toggle Switch Button component and more. platform: Blazor -control: Toggle Switch Button +control: Toggle Switch Button documentation: ug --- @@ -13,11 +13,11 @@ To modify the Switch appearance, the default CSS of Switch component has to be o |CSS Class | Purpose of Class | |-----|-----| -|.e-switch-wrapper .e-switch-inner|To customize the line of the switch in off mode.| -|.e-switch-wrapper .e-switch-handle|To customize the handle of the switch in off mode.| -|.e-switch-wrapper:not(.e-switch-disabled):hover .e-switch-handle:not(.e-switch-active)|To customize the handle of the switch in off mode when hover.| -|.e-switch-wrapper:not(.e-switch-disabled):hover .e-switch-inner:not(.e-switch-active)|To customize the line of the switch in off mode when hover.| -|.e-switch-wrapper .e-switch-handle.e-switch-active|To customize the handle of the switch in on mode.| -|.e-switch-wrapper .e-switch-on|To customize the line of the switch in on mode.| -|.e-switch-wrapper:hover .e-switch-handle.e-switch-active|To customize the handle of the switch in on mode when hover.| -|.e-switch-wrapper:hover .e-switch-inner.e-switch-active .e-switch-on|To customize the line of the switch in on mode when hover.| \ No newline at end of file +|.e-switch-wrapper .e-switch-inner|Customizes the switch track in the off state.| +|.e-switch-wrapper .e-switch-handle|Customizes the switch handle (thumb) in the off state.| +|.e-switch-wrapper:not(.e-switch-disabled):hover .e-switch-handle:not(.e-switch-active)|Customizes the switch handle (thumb) in the off state on hover.| +|.e-switch-wrapper:not(.e-switch-disabled):hover .e-switch-inner:not(.e-switch-active)|Customizes the switch track in the off state on hover.| +|.e-switch-wrapper .e-switch-handle.e-switch-active|Customizes the switch handle (thumb) in the on state.| +|.e-switch-wrapper .e-switch-on|Customizes the switch track in the on state.| +|.e-switch-wrapper:hover .e-switch-handle.e-switch-active|Customizes the switch handle (thumb) in the on state on hover.| +|.e-switch-wrapper:hover .e-switch-inner.e-switch-active .e-switch-on|Customizes the switch track in the on state on hover.| \ No newline at end of file From d61302d239899358622270b992b05486b5fbf670 Mon Sep 17 00:00:00 2001 From: Ramya Date: Fri, 10 Oct 2025 17:34:30 +0530 Subject: [PATCH 24/30] Revamping the Ug --- blazor/diagram/annotations/labels.md | 4 ++-- blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md | 4 ++-- blazor/diagram/bpmn-shapes/bpmn-gateway.md | 2 +- blazor/diagram/bpmn-shapes/bpmn-text-annotation.md | 8 ++++---- 4 files changed, 9 insertions(+), 9 deletions(-) diff --git a/blazor/diagram/annotations/labels.md b/blazor/diagram/annotations/labels.md index e34685446f..bea1f635a3 100644 --- a/blazor/diagram/annotations/labels.md +++ b/blazor/diagram/annotations/labels.md @@ -82,7 +82,7 @@ N>* Each annotation's [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz ## How to Add an Annotation at Runtime -An annotation can be added to the Annotations collection of a node or connector at runtime by using the `Add` methods. +An annotation can be added to the `Annotations` collection of a node or connector at runtime by using the `Add` method. The following code explains how to add an annotation to a node at runtime by using `Add` method. @@ -146,7 +146,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ## How to Remove an Annotation at Runtime -An annotation can be removed from a node or connector's Annotations collection by using the `RemoveAt` method. The following code explains how to remove an annotation from a node. +An annotation can be removed from a node or connector's `Annotations` collection by using the `RemoveAt` method. The following code explains how to remove an annotation from a node. ```cshtml @using Syncfusion.Blazor.Diagram diff --git a/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md b/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md index cfdb746466..2768ed8de5 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md +++ b/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md @@ -55,7 +55,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ## How to Add BPMN Nodes into a BPMN Expanded Sub-Process -To add a Bpmn node into [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html), define the BpmnNodeViewModel object and add it to the [Children](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_Children) collection of the `BpmnExpandedSubProcess`. +To add a BPMN node into [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html), define the BpmnNodeViewModel object and add it to the [Children](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_Children) collection of the `BpmnExpandedSubProcess`. The following code example explains how to add a BPMN node to an BPMN Expanded Sub-Process using the `Children` property. @@ -266,7 +266,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ### How to Set Sub-Process Type -The [SubProcessType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_SubProcessType) represents the type of task being processed within a BPMN expanded subprocess. The `SubProcessType` property of the `BpmnExpandedSubProcess` component allows specification of the subprocess type. By default, it is set to [Default](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnSubProcessType.html#Syncfusion_Blazor_Diagram_BpmnSubProcessType_Default). +The [SubProcessType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_SubProcessType) represents the type of task being processed within a BPMN expanded subprocess. The `SubProcessType` property of the `BpmnExpandedSubProcess` component allows specification of the subprocess type. By default, it is set to **Default**. ```cshtml @using Syncfusion.Blazor.Diagram diff --git a/blazor/diagram/bpmn-shapes/bpmn-gateway.md b/blazor/diagram/bpmn-shapes/bpmn-gateway.md index b8e7fa346e..65136e964c 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-gateway.md +++ b/blazor/diagram/bpmn-shapes/bpmn-gateway.md @@ -9,7 +9,7 @@ documentation: ug # BPMN Gateway in Diagram Component -A `BPMN Gateway` is used to control the flow of a process and it is represented in diamond shape. The [GatewayType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html#Syncfusion_Blazor_Diagram_BpmnGateway_GatewayType) property of the [BpmnGateway](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html) can be set with any of the appropriate gateways. By default, the value of `GatewayType` is [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGatewayType.html#Syncfusion_Blazor_Diagram_BpmnGatewayType_None). The following code example explains how to create a BPMN Gateway. +A `BPMNGateway` is used to control the flow of a process and it is represented in diamond shape. The [GatewayType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html#Syncfusion_Blazor_Diagram_BpmnGateway_GatewayType) property of the [BpmnGateway](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html) can be set with any of the appropriate gateways. By default, the value of `GatewayType` is `None`. The following code example explains how to create a BPMNGateway. ```cshtml @using Syncfusion.Blazor.Diagram diff --git a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md index 006b540eaa..573a53aa4e 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md +++ b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md @@ -11,15 +11,15 @@ documentation: ug * A BPMN object can be associated with a text annotation that does not affect the flow but provides information about objects within a flow. -* A TextAnnotation points to or references another BPMN shape, which we call the [TextAnnotationTarget](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTextAnnotation.html#Syncfusion_Blazor_Diagram_BpmnTextAnnotation_TextAnnotationTarget) of the TextAnnotation. When a target shape is moved, copied, or deleted, any TextAnnotations attached to the shape will be moved, copied, or deleted too. Thus, the TextAnnotations remain with their target shapes though you can reposition the TextAnnotation to any offset from its target. The `TextAnnotationTarget` property of the [BpmnTextAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTextAnnotation.html) is used to connect an annotation element to the BPMN Node. +* A BPMNTextAnnotation points to or references another BPMN shape, which we call the [TextAnnotationTarget](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTextAnnotation.html#Syncfusion_Blazor_Diagram_BpmnTextAnnotation_TextAnnotationTarget) of the BPMNTextAnnotation. When a target shape is moved, copied, or deleted, any BPMNTextAnnotation attached to the shape will be moved, copied, or deleted too. Thus, the BPMNTextAnnotations remain with their target shapes though you can reposition the BPMNTextAnnotation to any offset from its target. The `TextAnnotationTarget` property of the [BpmnTextAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTextAnnotation.html) is used to connect an annotation element to the BPMN Node. * The annotation element can be switched from a BPMN node to another BPMN node simply by dragging the source end of the annotation connector into the other BPMN node. -* By default, the `TextAnnotation` shape has a connection. +* By default, the `BPMNTextAnnotation` shape has a connection. * The [TextAnnotationDirection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTextAnnotation.html#Syncfusion_Blazor_Diagram_BpmnTextAnnotation_TextAnnotationDirection) property is used to set the shape direction of the text annotation. -* By default, the `TextAnnotationDirection` is set to a [Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextAnnotationDirection.html#Syncfusion_Blazor_Diagram_TextAnnotationDirection_Left). +* By default, the `TextAnnotationDirection` is set to a **Left**. * To set the size for text annotation, use the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_Height) properties of the node. @@ -142,7 +142,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ![Auto BPMN Shape](../images/bpmn-text-annotation_WithTarget.png) -## How to Connect a Text Annotation to a BPMN Node +## How to Connect a BPMN Text Annotation to a BPMN Node Drag and drop any bpmn shapes from the palette to the diagram and connect the BPMN Node and TextAnnotation. From 10f3dd87a600754e8491dee12ad8c99c7b93c867 Mon Sep 17 00:00:00 2001 From: Ashwini-SF5049 Date: Fri, 10 Oct 2025 17:34:41 +0530 Subject: [PATCH 25/30] 983104: Updated the UG Documentation for Timepicker --- blazor/timepicker/accessibility.md | 48 +++++++-------- blazor/timepicker/data-binding.md | 4 +- blazor/timepicker/events.md | 20 +++---- blazor/timepicker/getting-started-webapp.md | 59 +++++++++---------- blazor/timepicker/getting-started.md | 37 ++++++------ blazor/timepicker/globalization.md | 6 +- blazor/timepicker/how-to/css-customization.md | 26 ++++---- .../how-to/limitation-of-time-span.md | 9 ++- .../how-to/open-popup-on-input-click.md | 12 ++-- blazor/timepicker/mask-support.md | 24 ++++---- blazor/timepicker/native-events.md | 26 ++++---- blazor/timepicker/strict-mode.md | 17 +++--- blazor/timepicker/style-appearance.md | 14 ++--- blazor/timepicker/time-format.md | 10 ++-- blazor/timepicker/time-range.md | 10 ++-- blazor/timepicker/timeonly-support.md | 9 ++- 16 files changed, 159 insertions(+), 172 deletions(-) diff --git a/blazor/timepicker/accessibility.md b/blazor/timepicker/accessibility.md index e3d8cd772d..bb909a6425 100644 --- a/blazor/timepicker/accessibility.md +++ b/blazor/timepicker/accessibility.md @@ -9,22 +9,22 @@ documentation: ug # Accessibility in Blazor TimePicker Component -The web accessibility makes web applications and its content more accessible to people with disabilities without any barriers. It especially tracks the dynamic value changes and DOM changes. +Web accessibility ensures that applications and their content are usable by people with disabilities. It includes support for dynamic value updates and DOM changes that assistive technologies can detect. -The [Blazor TimePicker](https://www.syncfusion.com/blazor-components/blazor-timepicker) 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. +The [Blazor TimePicker](https://www.syncfusion.com/blazor-components/blazor-timepicker) follows widely recognized accessibility standards and guidelines, including the Americans with Disabilities Act[ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WAI-ARIA roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. -The accessibility compliance for the Blazor TimePicker component is outlined below. +The accessibility compliance for the Blazor TimePicker is outlined below. | Accessibility Criteria | Compatibility | | -- | -- | -| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | Yes | -| [Section 508 Support](../common/accessibility#accessibility-standards) | Yes | -| [Screen Reader Support](../common/accessibility#screen-reader-support) | Yes | -| [Right-To-Left Support](../common/accessibility#right-to-left-support) | Yes | -| [Color Contrast](../common/accessibility#color-contrast) | Yes | -| [Mobile Device Support](../common/accessibility#mobile-device-support) | Yes | -| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | Yes | -| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | Yes | +| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | Meets requirement | +| [Section 508 Support](../common/accessibility#accessibility-standards) | Meets requirement | +| [Screen Reader Support](../common/accessibility#screen-reader-support) | Meets requirement | +| [Right-To-Left Support](../common/accessibility#right-to-left-support) | Meets requirement | +| [Color Contrast](../common/accessibility#accessibility-standards) | Meets requirement | +| [Mobile Device Support](../common/accessibility#mobile-device-support) | Meets requirement | +| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | Meets requirement | +| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | Meets requirement | -
Yes - All features of the component meet the requirement.
+
Meets requirement - All features of the component meet the requirement.
-
Intermediate - Some features of the component do not meet the requirement.
+
Partially meets requirement - Some features of the component do not meet the requirement.
-
No - The component does not meet the requirement.
+
Does not meet requirement - The component does not meet the requirement.
## WAI-ARIA attributes -The Blazor TimePicker component has covered the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) specifications with the following list of WAI-ARIA attributes: `aria-haspopup`, `aria-selected`, `aria-disabled`, `aria-activedescendant`, `aria-expanded`, `aria-owns`, and `aria-autocomplete`. +The Blazor TimePicker aligns with [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) practices. The input is presented with a `role="combobox"` and the popup list with a `role="listbox"`. Depending on configuration, the component may include the following ARIA attributes: `aria-haspopup`, `aria-selected`, `aria-disabled`, `aria-activedescendant`, `aria-expanded`, `aria-owns`, and `aria-autocomplete`. In the TimePicker, the `combobox` plays the role of input element, and the `listbox` plays the role of popup element. @@ -62,26 +62,26 @@ In the TimePicker, the `combobox` plays the role of input element, and the `list ## Keyboard interaction -Keyboard accessibility is one of the most important aspects of web accessibility. Disabled people like blind and those who have motor disabilities or birth defects use keyboard shortcuts more than the mouse. +Keyboard accessibility enables efficient interaction without a mouse and is essential for users who rely on keyboards or assistive technologies. -The Blazor TimePicker component has built-in keyboard accessibility support by following the [WAI-ARIA practices](https://www.w3.org/WAI/ARIA/apg/). +The Blazor TimePicker includes built-in keyboard support following the [WAI-ARIA practices](https://www.w3.org/WAI/ARIA/apg/). -N> It supports the following list of shortcut keys to interact with the TimePicker component: +N> It supports the following shortcut keys to interact with the TimePicker: | Windows | Mac | **Description** | | --- | --- | --- | | ↑ | ↑ | Navigates and selects the previous item. | | ↓ | ↓ | Navigates and selects the next item. | -| ← | ← | Moves the cursor towards arrow key pressed direction. | -| → | → | Moves the cursor towards arrow key pressed direction. | +| ← | ← | Moves the cursor in the direction of the arrow key pressed. | +| → | → | Moves the cursor in the direction of the arrow key pressed. | | Home | Home | Navigates and selects the first item. | | End | End | Navigates and selects the last item. | -| Enter | Enter | Selects the currently focused item and close the popup. | +| Enter | Enter | Selects the currently focused item and closes the popup. | | Alt + ↑ | ⌥ + ↑ | Closes the popup. | | Alt + ↓ | ⌥ + ↓ | Opens the popup. | | Esc | Esc | Closes the popup. | -N> To focusout the TimePicker component, use the `t` keys. For additional information about native event, [click](https://blazor.syncfusion.com/documentation/timepicker/native-events) here. +N> To move focus out of the TimePicker, press the `t` key. For additional information about handling native events, see the [native events documentation](https://blazor.syncfusion.com/documentation/timepicker/native-events). ```cshtml @using Syncfusion.Blazor.Calendars @@ -102,9 +102,9 @@ N> To focusout the TimePicker component, use the `t` keys. For additional inform ## Ensuring accessibility -The Blazor TimePicker component's accessibility levels are ensured through an [axe-core](https://www.npmjs.com/package/axe-core) software tool during automated testing. +The Blazor TimePicker’s accessibility is validated using the [axe-core](https://www.npmjs.com/package/axe-core) tool during automated testing. -The accessibility compliance of the TimePicker component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/timepicker) in a new window to evaluate the accessibility of the TimePicker component with accessibility tools. +The accessibility compliance of the TimePicker is demonstrated in the following sample. Open the [TimePicker accessibility sample](https://blazor.syncfusion.com/accessibility/timepicker) in a new window to evaluate the component with accessibility tools. ## See also diff --git a/blazor/timepicker/data-binding.md b/blazor/timepicker/data-binding.md index 497854f20a..ebe80738c4 100644 --- a/blazor/timepicker/data-binding.md +++ b/blazor/timepicker/data-binding.md @@ -9,7 +9,7 @@ documentation: ug # Data Binding in Blazor TimePicker Component -This section briefly explains how to bind the value to the TimePicker component in the below different ways. +This section explains how to bind a value to the TimePicker component in the following ways. * One-Way Data Binding * Two-Way Data Binding @@ -38,7 +38,7 @@ We can bind the value to the TimePicker component directly for `Value` property ## Two-Way Data Binding -Two-way binding can be achieved by using `bind-Value` attribute and its support string, int, Enum, DateTime, bool types. If component value has been changed, it will affect all the places where we bind the variable for the **bind-value** attribute. +Two-way binding is achieved using the `bind-Value` attribute and its support string, int, Enum, DateTime, bool types. If component value has been changed, it will affect all the places where we bind the variable for the **bind-value** attribute. ```cshtml @using Syncfusion.Blazor.Calendars diff --git a/blazor/timepicker/events.md b/blazor/timepicker/events.md index a92df81cb0..7704522475 100644 --- a/blazor/timepicker/events.md +++ b/blazor/timepicker/events.md @@ -9,7 +9,7 @@ documentation: ug # Events in Blazor TimePicker Component -This section explains the list of events of the TimePicker component which will be triggered for appropriate TimePicker actions. +This section describes the TimePicker events that are raised for user and programmatic interactions. The following table maps legacy event names to current event names. | Event Name(`v17.1.*`) |Event Name(`v17.2.*`) | | ----- | ----- | @@ -20,7 +20,7 @@ This section explains the list of events of the TimePicker component which will ## Blur -`Blur` event triggers when the input loses the focus. +The `Blur` event triggered when the input loses the focus. ```cshtml @using Syncfusion.Blazor.Calendars @@ -40,7 +40,7 @@ This section explains the list of events of the TimePicker component which will ## ValueChange -`ValueChange` event triggers when the Calendar value is changed. +The `ValueChange` event triggered when the Calendar value is changed. ```cshtml @using Syncfusion.Blazor.Calendars @@ -60,7 +60,7 @@ This section explains the list of events of the TimePicker component which will ## OnClose -`OnClose` event triggers when popup is closed. +The `OnClose` event triggered when the popup is closed. ```cshtml @using Syncfusion.Blazor.Calendars @@ -80,7 +80,7 @@ This section explains the list of events of the TimePicker component which will ## Created -`Created` event triggers when the component is created. +The `Created` event triggered when the component is created. ```cshtml @using Syncfusion.Blazor.Calendars @@ -100,7 +100,7 @@ This section explains the list of events of the TimePicker component which will ## Destroyed -`Destroyed` event triggers when the component is destroyed. +The `Destroyed` event triggered when the component is destroyed. ```cshtml @using Syncfusion.Blazor.Calendars @@ -119,7 +119,7 @@ This section explains the list of events of the TimePicker component which will ## Focus -`Focus` event triggers when the input gets focus. +The `Focus` event triggered when the input gets focus. ```cshtml @using Syncfusion.Blazor.Calendars @@ -140,7 +140,7 @@ This section explains the list of events of the TimePicker component which will ## OnItemRender -`OnItemRender` event triggers while rendering the each popup list item. +The `OnItemRender` event triggered while rendering the each popup list item. ```cshtml @using Syncfusion.Blazor.Calendars @@ -159,7 +159,7 @@ This section explains the list of events of the TimePicker component which will ## OnOpen -`OnOpen` event triggers when the popup is opened. +The `OnOpen` event triggered when the popup is opened. ```cshtml @using Syncfusion.Blazor.Calendars @@ -177,4 +177,4 @@ This section explains the list of events of the TimePicker component which will } ``` -N> TimePicker will be limited with these events and new events will be added in future based on the user requests. If the event you are looking for is not in the list, then request [here](https://www.syncfusion.com/feedback/blazor-components). +N> The TimePicker currently exposes the events listed above. Additional events may be introduced based on user feedback. If an event needed for a scenario is not available, submit a request in the [Syncfusion Blazor feedback portal](https://www.syncfusion.com/feedback/blazor-components). \ No newline at end of file diff --git a/blazor/timepicker/getting-started-webapp.md b/blazor/timepicker/getting-started-webapp.md index e46b6eb109..beaa617e36 100644 --- a/blazor/timepicker/getting-started-webapp.md +++ b/blazor/timepicker/getting-started-webapp.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor TimePicker in Blazor Web App -This section briefly explains about how to include [Blazor TimePicker](https://www.syncfusion.com/blazor-components/blazor-timepicker) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section explains how to add the [Blazor TimePicker](https://www.syncfusion.com/blazor-components/blazor-timepicker) component in Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. {% tabcontents %} @@ -21,17 +21,17 @@ This section briefly explains about how to include [Blazor TimePicker](https://w ## Create a new Blazor Web App in Visual Studio -You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a Blazor Web App using Visual Studio 2022 via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application. +Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) when creating the Blazor Web App. ## Install Syncfusion® Blazor Calendars and Themes NuGet in the App -To add **Blazor TimePicker** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the Blazor TimePicker component to the app, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If you use the WebAssembly or Auto render modes in a Blazor Web App, install the Syncfusion® Blazor NuGet packages in the client project. -Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, use the following Package Manager commands: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -54,11 +54,11 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a Blazor Web App using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application. +Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) when creating the Blazor Web App. -For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. +For example, in a Blazor Web App with the Auto interactive render mode, use the following commands. {% tabs %} {% highlight c# tabtitle="Blazor Web App" %} @@ -70,15 +70,15 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). +N> For guidance on creating a Blazor Web App with different interactive modes and locations, see [Render interactive modes](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). ## Install Syncfusion® Blazor Calendars and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If you use WebAssembly or Auto render modes in a Blazor Web App, install the Syncfusion® Blazor NuGet packages in the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure you are in the project directory that contains the `.csproj` file. +* Run the following commands to install the [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) packages and restore dependencies. {% tabs %} @@ -92,7 +92,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on nuget.org. For details, see the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for a list of available packages and components. {% endtabcontent %} @@ -102,10 +102,10 @@ N> Syncfusion® Blazor components are availa | Interactive Render Mode | Description | | -- | -- | -| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| -| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| +| WebAssembly or Auto | Open **~/_Imports.razor** from the client project.| +| Server | Open **~/_Imports.razor** located in the `Components` folder.| -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace . +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -116,9 +116,9 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace . {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. +Now register the Syncfusion® Blazor service in the **~/Program.cs** file(s) of the Blazor Web App. -If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. +If the interactive render mode is set to WebAssembly or Auto, register the service in both **~/Program.cs** files of the Blazor Web App. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -152,7 +152,7 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion® Blazor Service only in that **~/Program.cs** file. +If the interactive render mode is set to Server, the project contains a single **~/Program.cs** file. Register the Syncfusion® Blazor service only in that file. {% tabs %} {% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} @@ -175,7 +175,7 @@ var app = builder.Build(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: +The theme stylesheet and script are available via NuGet as [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet in the `` and the script at the end of the `` within **~/Components/App.razor** as shown below: ```html @@ -202,7 +202,7 @@ Add the Syncfusion® Blazor TimePicker compo | | Server | @rendermode InteractiveServer | | | None | --- | -N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default. +N> If the interactivity location is set to Global and the render mode is set to Auto, WebAssembly, or Server, the render mode is configured in the `App.razor` file by default. {% tabs %} {% highlight razor %} @@ -221,18 +221,17 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor TimePicker component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor TimePicker component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/BtBJjCKtzSOIsHLx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TimePicker Component](./images/blazor-timepicker.png)" %} -N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/TimePicker/BlazorWebApp). +N> [View the sample on GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/TimePicker/BlazorWebApp). ## Setting the time format -Time format is a way of representing the time value in different string format in textbox and popup list. By default, the TimePicker’s Format is based on the culture. -But the Format of the TimePicker can be customized using the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfTimePicker-1.html#Syncfusion_Blazor_Calendars_SfTimePicker_1_Format) property. +The time format defines how the time value is displayed in the text box and the popup list. By default, the TimePicker uses the current culture’s format. The format can be customized using the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfTimePicker-1.html#Syncfusion_Blazor_Calendars_SfTimePicker_1_Format) property. -The below code demonstrates how to render TimePicker component in 24 hours Format with 60 minutes interval. The time interval is set to 60 minutes by using the [Step](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfTimePicker-1.html#Syncfusion_Blazor_Calendars_SfTimePicker_1_Step) property. +The following code demonstrates rendering the TimePicker in a 24-hour format with a 60‑minute interval. The interval is set using the [Step](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfTimePicker-1.html#Syncfusion_Blazor_Calendars_SfTimePicker_1_Step) property. {% tabs %} {% highlight razor %} @@ -250,7 +249,7 @@ The below code demonstrates how to render TimePicker component in 24 hours Forma ## See Also -* [Getting Started with Syncfusion® Blazor Web Assembly App in Visual Studio or .NET CLI](../getting-started/blazor-webassembly-app) -* [Getting Started with Syncfusion® Blazor Web App in Visual Studio or .NET CLI](../getting-started/blazor-web-app) +* [Getting started with Syncfusion® Blazor WebAssembly App in Visual Studio or .NET CLI](../getting-started/blazor-webassembly-app) +* [Getting started with Syncfusion® Blazor Web App in Visual Studio or .NET CLI](../getting-started/blazor-web-app) -N> You can also explore our [Blazor TimePicker Example](https://blazor.syncfusion.com/demos/timepicker/default-functionalities?theme=fluent) that shows you how to render and configure the TimePicker. \ No newline at end of file +N> Explore the [Blazor TimePicker example](https://blazor.syncfusion.com/demos/timepicker/default-functionalities?theme=fluent) to learn how to render and configure the TimePicker. \ No newline at end of file diff --git a/blazor/timepicker/getting-started.md b/blazor/timepicker/getting-started.md index 685b139f05..f5dbc31ccb 100644 --- a/blazor/timepicker/getting-started.md +++ b/blazor/timepicker/getting-started.md @@ -9,9 +9,9 @@ documentation: ug # Getting Started with Blazor TimePicker Component -This section briefly explains about how to include [Blazor TimePicker](https://www.syncfusion.com/blazor-components/blazor-timepicker) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This section briefly explains how to include the [Blazor TimePicker](https://www.syncfusion.com/blazor-components/blazor-timepicker) component in a Blazor WebAssembly app using Visual Studio and Visual Studio Code. -To get start quickly with Blazor TimePicker component, check on this video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/TimePicker) sample. +To get started quickly with the Blazor TimePicker component, watch this video or explore the [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/TimePicker) sample. {% youtube "youtube:https://www.youtube.com/watch?v=X6RsjJIJLIY"%} @@ -26,11 +26,11 @@ To get start quickly with Blazor TimePicker component, check on this video or [G ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ## Install Syncfusion® Blazor Calendars and Themes NuGet in the App -To add **Blazor TimePicker** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor TimePicker** component to the app, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the following Package Manager commands. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -41,7 +41,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. {% endtabcontent %} @@ -53,9 +53,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly app using the following terminal commands (Ctrl+`). {% tabs %} @@ -71,8 +71,8 @@ cd BlazorApp ## Install Syncfusion® Blazor Calendars and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure you are in the project root directory where the `.csproj` file is located. +* Run the following commands to install the [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and restore dependencies. {% tabs %} @@ -86,7 +86,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. {% endtabcontent %} @@ -94,7 +94,7 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -105,7 +105,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +Next, register the Syncfusion® Blazor service in the **~/Program.cs** file of the Blazor WebAssembly app. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -129,7 +129,7 @@ await builder.Build().RunAsync(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. +The theme stylesheet and script can be referenced from NuGet using [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. ```html @@ -138,7 +138,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> See the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic for different ways to reference themes in a Blazor app, including [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator). For script references, refer to [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references). ## Add Blazor TimePicker component @@ -152,16 +152,15 @@ Add the Syncfusion® Blazor TimePicker compo {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor TimePicker component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the app. The Syncfusion® Blazor TimePicker component will render in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/BtBJjCKtzSOIsHLx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TimePicker Component](./images/blazor-timepicker.png)" %} ## Setting the time format -Time format is a way of representing the time value in different string format in textbox and popup list. By default, the TimePicker’s Format is based on the culture. -But the Format of the TimePicker can be customized using the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfTimePicker-1.html#Syncfusion_Blazor_Calendars_SfTimePicker_1_Format) property. +The time format defines how the time value is represented in the text box and the popup list. By default, the TimePicker format is based on the current culture. The format can be customized using the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfTimePicker-1.html#Syncfusion_Blazor_Calendars_SfTimePicker_1_Format) property. -The below code demonstrates how to render TimePicker component in 24 hours Format with 60 minutes interval. The time interval is set to 60 minutes by using the [Step](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfTimePicker-1.html#Syncfusion_Blazor_Calendars_SfTimePicker_1_Step) property. +The following example demonstrates rendering the TimePicker in a 24-hour format with a 60‑minute interval. The interval is set using the [Step](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfTimePicker-1.html#Syncfusion_Blazor_Calendars_SfTimePicker_1_Step) property. {% tabs %} {% highlight razor %} @@ -183,4 +182,4 @@ The below code demonstrates how to render TimePicker component in 24 hours Forma * [Getting Started with Syncfusion® Blazor for Server-side in Visual Studio](../getting-started/blazor-server-side-visual-studio) * [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](../getting-started/blazor-web-app) -N> You can also explore our [Blazor TimePicker Example](https://blazor.syncfusion.com/demos/timepicker/default-functionalities?theme=bootstrap5) that shows you how to render and configure the TimePicker. +N> Explore the [Blazor TimePicker example](https://blazor.syncfusion.com/demos/timepicker/default-functionalities?theme=bootstrap5) to learn how to render and configure the TimePicker. \ No newline at end of file diff --git a/blazor/timepicker/globalization.md b/blazor/timepicker/globalization.md index 84ee099c9b..4358e11f28 100644 --- a/blazor/timepicker/globalization.md +++ b/blazor/timepicker/globalization.md @@ -10,12 +10,11 @@ documentation: ug # Globalization in Blazor TimePicker Component ## Localization - -[Blazor TimePicker](https://www.syncfusion.com/blazor-components/blazor-timepicker) component can be localized. Refer to [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion® Blazor components. +The [Blazor TimePicker](https://www.syncfusion.com/blazor-components/blazor-timepicker) component supports localization for culture-specific text and formatting. Refer to the [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion® Blazor components. ## Right-To-Left -The TimePicker supports RTL (right-to-left) functionality for languages like Arabic and Hebrew to display the text in the right-to-left direction. Use the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfTimePicker-1.html#Syncfusion_Blazor_Calendars_SfTimePicker_1_EnableRtl) property to set the RTL direction. +The TimePicker supports right-to-left (RTL) rendering for languages such as Arabic and Hebrew. Use the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfTimePicker-1.html#Syncfusion_Blazor_Calendars_SfTimePicker_1_EnableRtl) property to render content in the right-to-left direction. The following code example initializes the TimePicker component in `Arabic` culture. @@ -35,5 +34,4 @@ The following code example initializes the TimePicker component in `Arabic` cult } ``` - ![Right to Left in Blazor TimePicker](./images/blazor-timepicker-right-to-left.png) \ No newline at end of file diff --git a/blazor/timepicker/how-to/css-customization.md b/blazor/timepicker/how-to/css-customization.md index d2635dd441..f0f45b8ef0 100644 --- a/blazor/timepicker/how-to/css-customization.md +++ b/blazor/timepicker/how-to/css-customization.md @@ -9,24 +9,24 @@ documentation: ug # CSS Customization in Blazor TimePicker Component -TimePicker allows to customize the text box and popup list appearance to suit the application by using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.TimePickerModel-1.html#Syncfusion_Blazor_Calendars_TimePickerModel_1_CssClass) property. +TimePicker allows customization of the input and popup list appearance to suit the application by using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.TimePickerModel-1.html#Syncfusion_Blazor_Calendars_TimePickerModel_1_CssClass) property. The following code demonstrates customization of text appearance in a text box, popup button, and popup list along with hover and active state by using the `e-custom-style` class. Following is the list of available classes used to customize the entire TimePicker component: | **Class Name** | **Description** | | --- | --- | -| e-time-wrapper | Applied to TimePicker wrapper element. | -| e-timepicker | Applied to input element and TimePicker popup element. | -| e-time-wrapper.e-timepicker | Applied to input element only. | -| e-input-group-icon.e-time-icon | Applied to popup button. | -| e-float-text | Applied to floating label text element. | -| e-popup | Applied to popup element. | -| e-timepicker.e-popup | Applied to TimePicker popup element only. | -| e-list-parent | Applied to popup UL element. | -| e-timepicker.e-list-parent | Applied to TimePicker popup UL element only. | -| e-list-item | Applied to LI elements. | -| e-hover | Applied to LI element hovering time. | -| e-active | Applied to active LI element. | +| e-time-wrapper | Applied to the TimePicker wrapper element. | +| e-timepicker | Applied to the input element and the TimePicker popup element. | +| e-time-wrapper.e-timepicker | Applied to the input element only. | +| e-input-group-icon.e-time-icon | Applied to the popup button. | +| e-float-text | Applied to the floating label text element. | +| e-popup | Applied to the popup container. | +| e-timepicker.e-popup | Applied to the TimePicker popup container only. | +| e-list-parent | Applied to the popup UL element. | +| e-timepicker.e-list-parent | Applied to the TimePicker popup UL element only. | +| e-list-item | Applied to LI elements in the popup list. | +| e-hover | Applied when a list item is hovered. | +| e-active | Applied to the active (selected) list item. | ```cshtml @using Syncfusion.Blazor.Calendars diff --git a/blazor/timepicker/how-to/limitation-of-time-span.md b/blazor/timepicker/how-to/limitation-of-time-span.md index 88a17db005..145ef93b48 100644 --- a/blazor/timepicker/how-to/limitation-of-time-span.md +++ b/blazor/timepicker/how-to/limitation-of-time-span.md @@ -11,7 +11,7 @@ documentation: ug Based on [C# standard behavior](https://learn.microsoft.com/en-us/dotnet/standard/base-types/custom-timespan-format-strings), the custom TimeSpan format specifiers do not include placeholder separator symbols, such as the symbols that separate hours from minutes, or seconds from fractional seconds. Instead, these symbols must be included in the custom format string as string literals. -This means that if you want to format a TimeSpan value with custom separators, you need to include the separators in the format string yourself. For example, to format a TimeSpan value with a hyphen (-) as a separator between hours, minutes, and seconds, you would use the following format string. +This means that to format a TimeSpan value with custom separators, include the separators in the format string. For example, to format a TimeSpan value with a hyphen (-) as a separator between hours, minutes, and seconds, use the following format string. ```csharp @@ -25,7 +25,7 @@ This means that if you want to format a TimeSpan value with custom separators, y } ``` -![Blazor TimePicker with Time Span Format](../images/blazor-timepicker-time-span-format.gif) +![Blazor TimePicker displaying TimeSpan with custom hyphen separators](../images/blazor-timepicker-time-span-format.gif) N> The TimeSpan will always show the time value in 24-hour format. @@ -44,12 +44,11 @@ N> The TimeSpan will always show the time value in 24-hour format. | ff | hh:mm:ss:ff | 08:05:00:00 | | fff | hh:mm:ss:fff | 08:05:00:000 | - -N>The Blazor TimePicker component does not support the `d` or `dd` format specifier for days. +N> The Blazor TimePicker component does not support the `d` or `dd` format specifier for days. #### To display the backslashes (\\\\) in the format string, you need to escape them by doubling them. For example: -This means that if you want to display a two backslash in the format string, you need to type four backslashes. +This means that if you want to display two backslashes in the format string, type four backslashes. Additionally, when using a colon as a literal separator in a TimeSpan format, escape it with a backslash in the format pattern (for example, `hh\:mm\:ss`). In a C# string literal, each backslash must also be escaped, resulting in `"hh\\:mm\\:ss"`. #### Here is an example of how to use this in a Blazor TimePicker component: ```csharp diff --git a/blazor/timepicker/how-to/open-popup-on-input-click.md b/blazor/timepicker/how-to/open-popup-on-input-click.md index 9fe164214c..129e28b789 100644 --- a/blazor/timepicker/how-to/open-popup-on-input-click.md +++ b/blazor/timepicker/how-to/open-popup-on-input-click.md @@ -7,11 +7,12 @@ control: TimePicker documentation: ug --- -# Open the Blazor TimePicker Picker popup on Focus +# Open the Blazor TimePicker popup on focus -You can also open the TimePicker Picker popup on input focus by setting the [OpenOnFocus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfTimePicker-1.html#Syncfusion_Blazor_Calendars_SfTimePicker_1_OpenOnFocus) property to true. +This topic explains how to automatically open the TimePicker popup when the input receives focus. +Open the TimePicker popup on input focus by setting the [OpenOnFocus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfTimePicker-1.html#Syncfusion_Blazor_Calendars_SfTimePicker_1_OpenOnFocus) property to true. -The following example demonstrates how to open the TimePicker Picker popup when the input is focused. +The following example demonstrates how to open the TimePicker popup when the input is focused. ```cshtml @using Syncfusion.Blazor.Calendars @@ -19,7 +20,4 @@ The following example demonstrates how to open the TimePicker Picker popup when ``` -![Opening Blazor TimePicker Picker Popup](../images/blazor-timepicker-open-focus.gif) - - - +![Opening the Blazor TimePicker popup on focus](../images/blazor-timepicker-open-focus.gif) \ No newline at end of file diff --git a/blazor/timepicker/mask-support.md b/blazor/timepicker/mask-support.md index 1fb5b9f2fb..122d656b5d 100644 --- a/blazor/timepicker/mask-support.md +++ b/blazor/timepicker/mask-support.md @@ -9,7 +9,7 @@ documentation: ug # Mask Support in Blazor TimePicker Component -The masking feature allows users to enter a time in the correct format, as specified by the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfTimePicker-1.html#Syncfusion_Blazor_Calendars_SfTimePicker_1_Format) property. This helps to ensure that the time is entered correctly and can also make it easier for users to understand how to enter the time. The [EnableMask](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfTimePicker-1.html#Syncfusion_Blazor_Calendars_SfTimePicker_1_EnableMask) property in the TimePicker component allows you to enable or disable the masking functionality. When enabled, the input field will be displayed as masked with a specific time format pattern for entering the time. +The masking feature enforces time entry in the correct format defined by the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfTimePicker-1.html#Syncfusion_Blazor_Calendars_SfTimePicker_1_Format) property. This helps ensure accurate input and provides clear guidance on how to enter time values. Enable or disable masking using the [EnableMask](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfTimePicker-1.html#Syncfusion_Blazor_Calendars_SfTimePicker_1_EnableMask) property. When enabled, the input field displays a mask pattern that matches the specified time format. Mask behavior also respects the current [Locale](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfTimePicker-1.html#Syncfusion_Blazor_Calendars_SfTimePicker_1_Locale) and culture-specific time patterns. {% highlight Razor %} @@ -17,22 +17,19 @@ The masking feature allows users to enter a time in the correct format, as speci {% endhighlight %} - -![Blazor TimePicker with EnableMask](./images/TimePickerMask.gif) +![Blazor TimePicker with input mask enabled](./images/TimePickerMask.gif) ## MaskPlaceholder -The [TimePickerMaskPlaceholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.TimePickerMaskPlaceholder.html) directive allows you to set custom placeholder text for each segment of the time format in a `TimePicker` component. This can be used to provide additional context or instructions to the user about the expected format for the input. To use the directive, include it in the component's configuration along with the [EnableMask](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfTimePicker-1.html#Syncfusion_Blazor_Calendars_SfTimePicker_1_EnableMask) property. - -The `TimePickerMaskPlaceholder` class has the following properties: +The [TimePickerMaskPlaceholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.TimePickerMaskPlaceholder.html) directive lets you specify custom placeholder text for each segment of the time format in a `TimePicker` component. This helps communicate the expected input format to users. Use this directive together with the [EnableMask](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfTimePicker-1.html#Syncfusion_Blazor_Calendars_SfTimePicker_1_EnableMask) property. -* [Hour](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.MaskPlaceholder.html#Syncfusion_Blazor_Calendars_MaskPlaceholder_Hour) : Specifies the placeholder character for the hour (`hh`) segment of the time value. +The `TimePickerMaskPlaceholder` class exposes the following properties: -* [Minute](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.MaskPlaceholder.html#Syncfusion_Blazor_Calendars_MaskPlaceholder_Minute) : Specifies the placeholder character for the minute (`mm`) segment of the time value. +* [Hour](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.MaskPlaceholder.html#Syncfusion_Blazor_Calendars_MaskPlaceholder_Hour): Specifies the placeholder text for the hour (`hh`) segment. +* [Minute](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.MaskPlaceholder.html#Syncfusion_Blazor_Calendars_MaskPlaceholder_Minute): Specifies the placeholder text for the minute (`mm`) segment. +* [Second](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.MaskPlaceholder.html#Syncfusion_Blazor_Calendars_MaskPlaceholder_Second): Specifies the placeholder text for the second (`ss`) segment. -* [Second](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.MaskPlaceholder.html#Syncfusion_Blazor_Calendars_MaskPlaceholder_Second) : Specifies the placeholder character for the second (`ss`) segment of the time value. - -The `TimePicker` component uses placeholder text from the current culture's resources file for each segment of the time format by default. If you want to use custom placeholder text instead, you can specify it using the `TimePickerMaskPlaceholder` directive and its properties. +By default, the `TimePicker` uses placeholder text from the current culture’s resource file for each segment of the time format. To override these defaults, define custom text using the `TimePickerMaskPlaceholder` directive and its properties. If a segment (for example, `Second`) is not part of the configured `Format`, its corresponding placeholder is ignored. {% highlight Razor %} @@ -40,7 +37,6 @@ The `TimePicker` component uses placeholder text from the current culture's reso {% endhighlight %} +![Blazor TimePicker with custom mask placeholders](./images/TimePickerMaskPlaceholder.gif) -![Blazor TimePicker Mask Support with MaskPlaceholder](./images/TimePickerMaskPlaceholder.gif) - -> If you do not specify custom placeholder text for any segment of the time format, the component will use the default placeholder text from the current culture based resources file for not specified segments. \ No newline at end of file +> If custom placeholder text is not specified for a segment, the component uses the default placeholder text from the current culture-based resource file for that segment. \ No newline at end of file diff --git a/blazor/timepicker/native-events.md b/blazor/timepicker/native-events.md index 7ea72fc783..cba57b451d 100644 --- a/blazor/timepicker/native-events.md +++ b/blazor/timepicker/native-events.md @@ -9,13 +9,13 @@ documentation: ug # Native Events in Blazor TimePicker Component -The following section explains steps to include native events and pass data to event handler in TimePicker component. +The following section explains how to include native DOM events using Blazor’s `@on...` attributes and how to pass event data to handlers in the TimePicker component. ## Bind native events to TimePicker -Any native event can be accessed by using on `` attribute with a component. The attribute's value is treated as an event handler. +Attach any native DOM event by using the `@on` attribute on the component. The attribute value is treated as the event handler. -In the following example, the KeyPressed method is called every time the key is pressed on input. +In the following example, the `KeyPressed` method is called every time a key is pressed in the input. ```cshtml @using Syncfusion.Blazor.Calendars @@ -29,7 +29,7 @@ In the following example, the KeyPressed method is called every time the key is } ``` -Also, the above example code can be rewritten as follows using Lambda expressions. +The same example can be expressed using a lambda expression: ```cshtml @using Syncfusion.Blazor.Calendars @@ -39,16 +39,16 @@ Also, the above example code can be rewritten as follows using Lambda expression ## Pass event data to event handler -Blazor provides set of argument types for map to native events. The list of event types and event arguments are: +Blazor provides a set of event argument types that map to native events (from the `Microsoft.AspNetCore.Components.Web` namespace). Common event types and argument classes include: -* Focus Events - FocusEventArgs -* Mouse Events - MouseEventArgs -* Keyboard Events - KeyboardEventArgs -* Input Events - ChangeEventArgs/EventArgs -* Touch Events – TouchEventArgs -* Pointer Events – PointerEventArgs +* Focus events – `FocusEventArgs` +* Mouse events – `MouseEventArgs` +* Keyboard events – `KeyboardEventArgs` +* Input events – `ChangeEventArgs` / `EventArgs` +* Touch events – `TouchEventArgs` +* Pointer events – `PointerEventArgs` -In the following example, the KeyPressed method is called every time any key is pressed inside input. But the message will be printed when you press "5" key. +In the following example, the `KeyPressed` method is called whenever a key is pressed inside the input, but a message is printed only when the “5” key is pressed. ```cshtml @using Syncfusion.Blazor.Calendars @@ -66,7 +66,7 @@ In the following example, the KeyPressed method is called every time any key is } ``` -Using Lambda expression also, the event data can be passed to the event handler. +Using a lambda expression, the event data can also be passed directly to the event handler. ## List of Native events supported diff --git a/blazor/timepicker/strict-mode.md b/blazor/timepicker/strict-mode.md index ed605839b1..bf74d2e06c 100644 --- a/blazor/timepicker/strict-mode.md +++ b/blazor/timepicker/strict-mode.md @@ -11,11 +11,10 @@ documentation: ug The [StrictMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfTimePicker-1.html#Syncfusion_Blazor_Calendars_SfTimePicker_1_StrictMode) is an act that allows to enter only valid time value within the specified Min/Max range in the textbox. If the value is invalid, the component value sets to the previous value. If the value is out of range, the component sets the time value to Min/Max value. -The following example demonstrates the TimePicker in `StrictMode` with `Min/Max` range of `10:00 AM` to `4:00 PM` . It allows to enter only valid time within the specified range. +The following example demonstrates the TimePicker in `StrictMode` with a `Min`/`Max` range of `10:00 AM` to `4:00 PM`. It allows entering only valid times within the specified range. -* If you enter the out-of-range value like `8:00 PM`, the value sets to the Max time `4:00 PM` as the value `8:00 PM` is greater than Max value of `4:00 PM`. - -* If you enter invalid time value like `9:00 tt`, the value sets to the previous value. +* If an out-of-range value such as `8:00 PM` is entered, the value is set to the Max time `4:00 PM` because `8:00 PM` is greater than the Max value `4:00 PM`. +* If an invalid time such as `9:00 tt` is entered, the value reverts to the previous value. ```cshtml @using Syncfusion.Blazor.Calendars @@ -31,13 +30,13 @@ The following example demonstrates the TimePicker in `StrictMode` with `Min/Max` ![Blazor TimePicker in Strict Mode](./images/blazor-timepicker-strict-mode.png) -By default, the TimePicker act in `StrictMode` as `false` state, that allows to enter the invalid or out-of-range time in textbox. +By default, the TimePicker operates with `StrictMode` set to `false`, which allows entering invalid or out-of-range times in the textbox. -If the time is out-of-range or invalid, then the model value will be set to `out of range` time value or `null` respectively with highlighted `error` class to indicates the time is out of range or invalid. +If the time is out of range or invalid, then the model value will be set to the out-of-range time value or `null`, respectively, and the input is highlighted with an `error` class to indicate that the value is out of range or invalid. -The following example demonstrates the `StrictMode` as `false`. Here, it allows to enter the valid or invalid value in text box. +The following example demonstrates `StrictMode` set to `false`. In this mode, entering valid, invalid, or out-of-range values in the textbox is allowed. -* If you are entering the out-of-range or invalid time value, then the model value will be set to `out of range` time value or `null` respectively with highlighted `error` class to indicate that the time is out of range or invalid. +* When an out-of-range or invalid time value is entered, the model value is set to the out-of-range time value or `null`, respectively, and the input is highlighted with an `error` class to indicate the condition. ```cshtml @using Syncfusion.Blazor.Calendars @@ -53,4 +52,4 @@ The following example demonstrates the `StrictMode` as `false`. Here, it allows ![Blazor TimePicker without Strict Mode](./images/blazor-timepicker-without-strict-mode.png) -N> If the value of `Min` or `Max` property is changed through code behind, update the `Value` property to set within the range. \ No newline at end of file +N> If the value of the `Min` or `Max` property is changed in code-behind, update the `Value` property so that it remains within the new range. \ No newline at end of file diff --git a/blazor/timepicker/style-appearance.md b/blazor/timepicker/style-appearance.md index 37d1017601..9813976296 100644 --- a/blazor/timepicker/style-appearance.md +++ b/blazor/timepicker/style-appearance.md @@ -9,11 +9,11 @@ documentation: ug # Style and appearance in Blazor TimePicker Component -The following content provides the exact CSS structure that can be used to modify the control's appearance based on the user preference. +The following guidance shows CSS selectors that can be used to customize the TimePicker component’s appearance based on application needs. To avoid global changes, scope overrides by adding a custom class via the CssClass property and targeting that class in your styles. ## Customizing the appearance of TimePicker container element -Use the following CSS to customize the appearance of TimePicker container element. +Use the following CSS to customize the appearance of the TimePicker container element. ```css /* To specify height and font size */ @@ -25,7 +25,7 @@ Use the following CSS to customize the appearance of TimePicker container elemen ## Customizing the TimePicker icon element -Use the following CSS to customize the TimePicker icon element +Use the following CSS to customize the TimePicker icon element. ```css /* To specify background color and font size */ @@ -37,7 +37,7 @@ Use the following CSS to customize the TimePicker icon element ## Customizing the TimePicker popup -Use the following CSS to customize the TimePicker popup +Use the following CSS to customize the TimePicker popup. ```css /* To specify height */ @@ -48,7 +48,7 @@ Use the following CSS to customize the TimePicker popup ## Customizing the TimePicker popup content -Use the following CSS to customize the TimePicker popup content +Use the following CSS to customize the TimePicker popup content. ```css /* To specify height */ @@ -60,7 +60,7 @@ Use the following CSS to customize the TimePicker popup content ## Full screen mode support in mobiles and tablets -The TimePicker component's full-screen mode feature enables users to view the component popup element in full-screen mode on mobile devices with improved visibility and a better user experience. It is important to mention that this feature is exclusively available for mobile devices in both landscape and portrait orientations. To activate the full screen mode within the TimePicker component, simply set the [FullScreen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfTimePicker-1.html#Syncfusion_Blazor_Calendars_SfTimePicker_1_FullScreen) API value to `true`. This action will extend the popup element to occupy the entire screen on mobile devices. +The TimePicker component’s full-screen mode displays the popup element in full-screen on mobile devices for improved visibility and usability. This feature is supported only on mobile devices in both landscape and portrait orientations. To enable full-screen mode, set the [FullScreen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfTimePicker-1.html#Syncfusion_Blazor_Calendars_SfTimePicker_1_FullScreen) property to `true`. This expands the popup to occupy the entire screen on mobile devices. ```cshtml @using Syncfusion.Blazor.Calendars @@ -69,4 +69,4 @@ The TimePicker component's full-screen mode feature enables users to view the co ``` -![TimePickerFullScreen](./images/blazor-timepicker-full-screen-mode.gif) +![Blazor TimePicker popup in mobile full-screen mode](./images/blazor-timepicker-full-screen-mode.gif) \ No newline at end of file diff --git a/blazor/timepicker/time-format.md b/blazor/timepicker/time-format.md index e61e7dd424..7a01d69743 100644 --- a/blazor/timepicker/time-format.md +++ b/blazor/timepicker/time-format.md @@ -9,11 +9,11 @@ documentation: ug # Time Format in Blazor TimePicker Component -## Display Format +## Display format The display format can be used to specify how the time value is displayed or entered in a `TimePicker` control -By default, the TimePicker's format is based on the culture. You can also set the own [Custom Format](https://learn.microsoft.com/en-us/dotnet/standard/base-types/custom-date-and-time-format-strings) or [Standard Format](https://learn.microsoft.com/en-us/dotnet/standard/base-types/standard-date-and-time-format-strings) by using the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_Format) property. +By default, the TimePicker format is derived from the current culture. To override it, set the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfTimePicker-1.html#Syncfusion_Blazor_Calendars_SfTimePicker_1_Format) property with a custom or standard .NET date and time format string (for example, “hh:mm tt” for 12‑hour or “HH:mm” for 24‑hour formats). See the .NET guidance for [custom format strings](https://learn.microsoft.com/en-us/dotnet/standard/base-types/custom-date-and-time-format-strings) and [standard format strings](https://learn.microsoft.com/en-us/dotnet/standard/base-types/standard-date-and-time-format-strings). > Once the date format property has been defined, it will be applied consistently to all cultures, regardless of their conventions for representing the date value. In other words, the date format property serves as a standardized way of representing the date value, ensuring that it is displayed and entered consistently regardless of the culture or region in which the application is used. @@ -26,11 +26,11 @@ By default, the TimePicker's format is based on the culture. You can also set th ![Time Format in Blazor TimePicker](./images/TimePicker.png) -## Input Formats +## Input formats -The input format can be used to specify how the time value is entered in a `TimePicker` control. +Use input formats to specify how users can type time values in the TimePicker. -The string format of the time value specifies how the time should be represented as a string when entered by the user. When the user types the time in the input format, it will be automatically converted to the display format after pressing enter, tab key, or when the input loses focus. This enhances the user experience by allowing intuitive data entry through various custom input formats. You can also set your own [Custom Format](https://learn.microsoft.com/en-us/dotnet/standard/base-types/custom-date-and-time-format-strings) or [Standard Format](https://learn.microsoft.com/en-us/dotnet/standard/base-types/standard-date-and-time-format-strings) by using the [InputFormats](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfTimePicker-1.html#Syncfusion_Blazor_Calendars_SfTimePicker_1_InputFormats) property. +The string format of the time value specifies how the time should be represented as a string when entered by the user. When the user types the time in the input format, it will be automatically converted to the display format after pressing enter, tab key, or when the input loses focus. This enhances the user experience by allowing intuitive data entry through various custom input formats. can also set own [Custom Format](https://learn.microsoft.com/en-us/dotnet/standard/base-types/custom-date-and-time-format-strings) or [Standard Format](https://learn.microsoft.com/en-us/dotnet/standard/base-types/standard-date-and-time-format-strings) by using the [InputFormats](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfTimePicker-1.html#Syncfusion_Blazor_Calendars_SfTimePicker_1_InputFormats) property. {% highlight Razor %} diff --git a/blazor/timepicker/time-range.md b/blazor/timepicker/time-range.md index 25cc2595a7..8d4568f2e7 100644 --- a/blazor/timepicker/time-range.md +++ b/blazor/timepicker/time-range.md @@ -9,9 +9,9 @@ documentation: ug # Time Range in Blazor TimePicker Component -TimePicker provides an option to select a time value within a specified range by using the [Min](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfTimePicker-1.html#Syncfusion_Blazor_Calendars_SfTimePicker_1_Min) and [Max](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfTimePicker-1.html#Syncfusion_Blazor_Calendars_SfTimePicker_1_Max) properties. The Min value should always be lesser than the Max value. The `Value` property depends on the Min/Max with respect to [StrictMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfTimePicker-1.html#Syncfusion_Blazor_Calendars_SfTimePicker_1_StrictMode) property. +TimePicker provides an option to select a time value within a specified range by using the [Min](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfTimePicker-1.html#Syncfusion_Blazor_Calendars_SfTimePicker_1_Min) and [Max](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfTimePicker-1.html#Syncfusion_Blazor_Calendars_SfTimePicker_1_Max) properties. The Min value must be less than the Max value. The behavior of the `Value` property with respect to the Min/Max range depends on the [StrictMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfTimePicker-1.html#Syncfusion_Blazor_Calendars_SfTimePicker_1_StrictMode) property. -The following code allows to select a time value within a range of `9:00 AM` to `11:30 AM`. For more information about StrictMode, refer to the [Strict Mode](./strict-mode) section from the documentation. +The following code enables selecting a time value within a range of `9:00 AM` to `11:30 AM`. For more information about StrictMode, refer to the [Strict Mode](./strict-mode) section. ```cshtml @using Syncfusion.Blazor.Calendars @@ -26,7 +26,7 @@ The following code allows to select a time value within a range of `9:00 AM` to ``` -![Blazor TimePicker Value within Range](./images/blazor-timepicker-within-range.png) +![Blazor TimePicker with a value within the configured time range](./images/blazor-timepicker-within-range.png) When the `Min` and `Max` properties are configured and the selected time value is out-of-range or invalid, then the model value will be set to `out of range` time value or `null` respectively with highlighted `error` class to indicate that the time is out of range or invalid. @@ -42,6 +42,6 @@ When the `Min` and `Max` properties are configured and the selected time value i } ``` -![Blazor TimePicker Value without Time Range](./images/blazor-timepicker-value-without-range.png) +![Blazor TimePicker value without Time Range](./images/blazor-timepicker-value-without-range.png) -N> If the value of `Min` or `Max` property is changed through code behind, you have to update the `Value` property to set within the range. \ No newline at end of file +N> If the value of the `Min` or `Max` property is changed in code-behind, update the `Value` property so that it remains within the new range. \ No newline at end of file diff --git a/blazor/timepicker/timeonly-support.md b/blazor/timepicker/timeonly-support.md index c22ec76d38..04d719fe67 100644 --- a/blazor/timepicker/timeonly-support.md +++ b/blazor/timepicker/timeonly-support.md @@ -9,15 +9,14 @@ documentation: ug # TimeOnly Support in Blazor TimePicker Component -The [TimeOnly](https://learn.microsoft.com/en-us/dotnet/api/system.timeonly?view=net-7.0) type is a new type in .NET 6 that allows you to represent a time without a date component. To use it with the Blazor TimePicker component, set the type parameter to `TimeOnly`. +The [TimeOnly](https://learn.microsoft.com/en-us/dotnet/api/system.timeonly?view=net-7.0) type was introduced in .NET 6 that allows you to represent a time without a date component. To use it with the Blazor TimePicker component, set the type parameter to `TimeOnly`. -> Blazor TimePicker Component supports `TimeOnly` type in .NET 7 and above version only, even though it introduced in .NET 6 itself due to serialization problem. +> The Blazor TimePicker component supports the `TimeOnly` type in .NET 7 and later. Although TimeOnly was introduced in .NET 6, full support in Blazor requires .NET 7 due to serialization and model binding updates. -{% highlight Razor %} +{% highlight razor %} {% include_relative code-snippet/TimeOnly.razor %} {% endhighlight %} - -![Blazor TimePicker with TimeOnly](./images/TimePickerTimeOnly.gif) \ No newline at end of file +![Blazor TimePicker bound to a TimeOnly value](./images/TimePickerTimeOnly.gif) \ No newline at end of file From cd2c9be0b5eca8fbc64a2fa0f0710d9d1e4cbc4f Mon Sep 17 00:00:00 2001 From: Ramya Date: Fri, 10 Oct 2025 19:37:18 +0530 Subject: [PATCH 26/30] Revamping the Ug --- blazor/diagram/annotations/appearance.md | 6 +- .../annotations/connector-annotation.md | 4 +- blazor/diagram/annotations/interactions.md | 4 +- blazor/diagram/annotations/node-annotation.md | 6 +- blazor/diagram/bpmn-shapes/bpmn-activity.md | 71 +++++++------------ blazor/diagram/bpmn-shapes/bpmn-connectors.md | 4 +- .../bpmn-shapes/bpmn-expanded-sub-process.md | 4 +- 7 files changed, 41 insertions(+), 58 deletions(-) diff --git a/blazor/diagram/annotations/appearance.md b/blazor/diagram/annotations/appearance.md index d0f34cf281..24f1c833d6 100644 --- a/blazor/diagram/annotations/appearance.md +++ b/blazor/diagram/annotations/appearance.md @@ -413,7 +413,7 @@ Double-clicking an annotation enables edit mode. For a object with multiple anno ## How to Set Read-Only Mode for Annotations -Annotations can be set to read-only mode by configuring their Constraints. Setting the [ReadOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html#Syncfusion_Blazor_Diagram_AnnotationConstraints_ReadOnly) constraints prevents user interaction and modification. The following code explains how to enable read-only mode. +Annotations can be set to read-only mode by configuring their [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Constraints). Setting the [ReadOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html#Syncfusion_Blazor_Diagram_AnnotationConstraints_ReadOnly) constraints prevents user interaction and modification. The following code explains how to enable read-only mode. ```cshtml @using Syncfusion.Blazor.Diagram @@ -556,13 +556,13 @@ N>* Type of the annotation’s property of the node or connector is ObservableCo | [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html#Syncfusion_Blazor_Diagram_AnnotationConstraints_None) | Disables all behaviors of Annotation. | |[InheritReadOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html#Syncfusion_Blazor_Diagram_AnnotationConstraints_InheritReadOnly) |Enables or disables to inherit the ReadOnly option from the parent object.| -N> The default value for an annotation's Constraints property is [InheritReadOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html#Syncfusion_Blazor_Diagram_AnnotationConstraints_InheritReadOnly). +N> The default value for an annotation's Constraints property is **InheritReadOnly**. Refer to [Constraints](https://blazor.syncfusion.com/documentation/diagram/constraints) to learn more about how to enable or disable the annotation constraints. ## How to Define Templates in Annotations -The Diagram component supports templating for annotations. HTML content can be defined within the `DiagramTemplates` tag and linked to an annotation by setting the [UseTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_UseTemplate) property to **true**. To define separate templates for individual annotations, use the ID property to differentiate them. +The Diagram component supports templating for annotations. HTML content can be defined within the `DiagramTemplates` tag and linked to an annotation by setting the [UseTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_UseTemplate) property to **true**. To define separate templates for individual annotations, use the `ID` property to differentiate them. The following code illustrates how to define a template for both a node's and a connector's annotation. ```cshtml diff --git a/blazor/diagram/annotations/connector-annotation.md b/blazor/diagram/annotations/connector-annotation.md index 4f374b1fe0..a974684ff0 100644 --- a/blazor/diagram/annotations/connector-annotation.md +++ b/blazor/diagram/annotations/connector-annotation.md @@ -77,7 +77,7 @@ The following image shows the relationship between the annotation position and o ![Displaying Annotation based on Offset in Blazor Diagram](../images/blazor-diagram-annotation-basedon-offset.png) >**Note:** -> * By default, the Offset value of a connector annotation is 0.5. +> * By default, the `offset` value of a connector annotation is 0.5. > * An annotation's ID must not start with a number or special character and must not contain underscores(_) or spaces. ## How to Change Annotation Alignment @@ -228,7 +228,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn | True | ![Blazor Diagram Annotation in Vertical Position](../images/blazor-diagram-annotation-in-vertical-position.png) | | False | ![Blazor Diagram Annotation in Horizontal Position](../images/blazor-diagram-annotation-in-horizontal-position.png) | -N> By default, the `SegmentAngle` property is disabled (false). +N> By default, the `SegmentAngle` property is **false**. The `HorizontalAlignment`, `VerticalAlignment` and `Margin` properties were explained in the [NodeAnnotation](./node-annotation). diff --git a/blazor/diagram/annotations/interactions.md b/blazor/diagram/annotations/interactions.md index 3b80687aac..819909b43a 100644 --- a/blazor/diagram/annotations/interactions.md +++ b/blazor/diagram/annotations/interactions.md @@ -71,8 +71,8 @@ The [RotationReference](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. Value | Description | Image | | -------- | -------- | -------- | -| Page | When this option is set, the annotation remains fixed in its original orientation even if its parent node is rotated. | ![Blazor Diagram RotationReference page](../images/rotationReferencePage.gif) | -| Parent | When this option is set, the annotation rotates along with its parent node. | ![Blazor Diagram RotationReference Parent](../images/rotationReferenceParent.gif) | +| **Page** | When this option is set, the annotation remains fixed in its original orientation even if its parent node is rotated. | ![Blazor Diagram RotationReference page](../images/rotationReferencePage.gif) | +| **Parent** | When this option is set, the annotation rotates along with its parent node. | ![Blazor Diagram RotationReference Parent](../images/rotationReferenceParent.gif) | A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Interactions/RotationReference) diff --git a/blazor/diagram/annotations/node-annotation.md b/blazor/diagram/annotations/node-annotation.md index ee16f73522..711045f60f 100644 --- a/blazor/diagram/annotations/node-annotation.md +++ b/blazor/diagram/annotations/node-annotation.md @@ -9,7 +9,7 @@ documentation: ug # Node Annotation Position in Blazor Diagram Component -The diagram allows you to customize the position and appearance of the annotation efficiently. Annotations can be aligned relative to the node boundaries. It has Margin, Offset, Horizontal, and Vertical alignment settings. It is quite tricky when all four alignments are used together but gives more control over alignments properties of the [ShapeAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeAnnotation.html) class. +The diagram allows you to customize the position and appearance of the annotation efficiently. Annotations can be aligned relative to the node boundaries. It has margin, offset, horizontal, and vertical alignment settings. It is quite tricky when all four alignments are used together but gives more control over alignments properties of the [ShapeAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeAnnotation.html) class. Annotations of a node can be positioned using the following properties of `ShapeAnnotation`. @@ -78,7 +78,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn >**Note:** > * Type of the offset property for node’s shape annotation is [DiagramPoint](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramPoint.html). -> * Type of the offset property for a connector’s path annotation is **double**. +> * Type of the offset property for a connector’s path annotation is double. > * Node 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 Annotation Alignment @@ -195,7 +195,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ## How to Align the Text -The [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextAlign) property of an annotation's Style allows you to set how the text should be aligned (Left, Right, Center, or Justify) inside the text block. The following code explains how to set `TextAlign` for an annotation. +The [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextAlign) property of an annotation's style allows you to set how the text should be aligned (Left, Right, Center, or Justify) inside the text block. The following code explains how to set `TextAlign` for an annotation. ```cshtml @using Syncfusion.Blazor.Diagram diff --git a/blazor/diagram/bpmn-shapes/bpmn-activity.md b/blazor/diagram/bpmn-shapes/bpmn-activity.md index 28a8020ee3..500c4c4b87 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-activity.md +++ b/blazor/diagram/bpmn-shapes/bpmn-activity.md @@ -1,20 +1,20 @@ --- layout: post -title: BPMN Activity in Syncfusion Blazor Diagram Component | Syncfusion +title: BPMN Activity in Blazor Diagram Component | Syncfusion description: Learn here all about BPMN activity such as task, sub-process in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Activity in Diagram Component +# BPMN Activity in Blazor Diagram Component The [Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html) is the task that is performed in a business process. It is represented by a rounded rectangle. -There are two primary types of activities. They are listed as follows: +There are two types of activities. They are listed as follows: * [Task](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_Task): It occurs within a process and is not broken down to a finer level of detail. -* [Collapsed Sub-Process](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_CollapsedSubProcess): It occurs within a process and is broken down to a finer level of detail. +* [CollapsedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_CollapsedSubProcess): It occurs within a process and is broken down to a finer level of detail. You can specify the any one of the above activity type using the [ActivityType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_ActivityType) property of [Bpmn Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html). @@ -52,17 +52,13 @@ You can specify the any one of the above activity type using the [ActivityType]( } } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrIsXNHrvVrSjlR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/BpmnActivity) +You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/BpmnActivity) ![Send Task BPMN Shape](../images/Task.png) ## How to Create a BPMN Activity Task -The [TaskType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_TaskType) property of the [Bpmn Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html) allows specification of the task type, such as sending, receiving, or user-based tasks. By default, the TaskType property is set to **None**, which is visually represented by a small event symbol in the top corner of the activity shape. - -The following code explains how to create different types of BPMN tasks. +The [TaskType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_TaskType) property of the [Bpmn Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html) allows you to define the type of task such as sending, receiving, user-based task, etc. By default, the value of [TaskType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_TaskType) property is set to **None.** This is shown by a small event symbol in the top of the corner. The following code explains how to create different types of BPMN tasks. ```cshtml @using Syncfusion.Blazor.Diagram @@ -73,11 +69,11 @@ The following code explains how to create different types of BPMN tasks. @code { // Initialize the node collection with node. - DiagramObjectCollection nodes = new DiagramObjectCollection(); + DiagramObjectCollection nodes; protected override void OnInitialized() { - Node node = new Node() + nodes = new DiagramObjectCollection(); { // Position of the node. OffsetX = 100, @@ -99,14 +95,12 @@ The following code explains how to create different types of BPMN tasks. } } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLeCtDxBvEwTETe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/BpmnActivityTask) +You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/BpmnActivityTask) ![Send Task BPMN Shape](../images/Send.png) -The available BPMN task types are described below. +The various types of BPMN tasks are tabulated as follows. | Shape | Image | Description| | -------- | -------- | -------- | @@ -121,7 +115,7 @@ The available BPMN task types are described below. ## How to Create a BPMN Activity Collapsed Sub-Process -A [Collapsed Sub-Process](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_CollapsedSubProcess) is a group of tasks that is used to hide or reveal details of additional levels. The following code explains how to create a `Collapsed Sub-Process`. +A [CollapsedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_CollapsedSubProcess) is a group of tasks that is used to hide or reveal details of additional levels. The following code explains how to create a [CollapsedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_CollapsedSubProcess). ```cshtml @using Syncfusion.Blazor.Diagram @@ -158,16 +152,14 @@ A [Collapsed Sub-Process](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo } } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhoCNjHLuiTiOoy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/BpmnActivityCollapsedSubProcess) +You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/BpmnActivityCollapsedSubProcess) ![Collapsed Subprocess BPMN Shape](../images/Bpmn-CollapsedSub-Process-Loop-None.png) ### How to Set Loop Type -[Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_Loop) is a task that is internally being looped. The `Loop` property of `Bpmn Activity` allows you to define the type of loop. The default value for `Loop` is [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnLoopCharacteristic.html#Syncfusion_Blazor_Diagram_BpmnLoopCharacteristic_None). +[Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_Loop) is a task that is internally being looped. The [Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_Loop) property of [Bpmn Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html) allows you to define the type of loop. The default value for [Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_Loop) is **None**. You can define the `Loop` property in BPMN Activity, as shown in the following code. @@ -206,14 +198,12 @@ You can define the `Loop` property in BPMN Activity, as shown in the following c } } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BXhSCZDxBkiYnGrJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/Loop) +You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/Loop) ![Standard Task BPMN Shape](../images/Bpmn-Task-Loop-Standard.png) -The available loop types are described below. +The following table contains various types of BPMN loops. | LoopActivity | Task | Subprocess | Description| | -------- | -------- | --------| --------| @@ -224,7 +214,7 @@ The available loop types are described below. ### How to Enable Compensation -[IsCompensation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsCompensation) is triggered when the operation is partially failed and enabled it with the `IsCompensation` property of the `Bpmn Activity`. By default, the `IsCompensation` property is set to **false**. +[IsCompensation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsCompensation) is triggered when the operation is partially failed and enabled it with the [IsCompensation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsCompensation) property of the [Bpmn Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html). By default, the [IsCompensation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsCompensation) property is set to false. ```cshtml @using Syncfusion.Blazor.Diagram @@ -258,22 +248,20 @@ The available loop types are described below. IsCompensation = true, } }; - nodes.Add(node); + nodes.Add(node1); } } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLoWZtRLYBpywwx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/Compensation) +You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/Compensation) ![IsCompensationActivity Task BPMN Shape](../images/Bpmn-Task-Compensation.png) ### How to Enable Call -A [Call](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsCall) activity is a global sub-process that is reused at various points of the business flow. To create a Call activity, enable the [IsCall](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsCall) property of the `Bpmn Activity`. +A Call activity is a global sub-process that is reused at various points of the business flow. To create a call activity, enable the [IsCall](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsCall) property of the [Bpmn Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html). -N>* By default, the `IsCall` property is **false**. +N>* By default, the [IsCall](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsCall) property is false.
* This Property is only applicable for [Task](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_Task) Type Activity. ```cshtml @@ -312,18 +300,16 @@ N>* By default, the `IsCall` property is **false**. } } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDByWDNnVYBkymiU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/Call) +You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/Call) ![IsAdHocActivity CollapsedSub-Process BPMN Shape](../images/Bpmn-Task-Call.png) ### How to Enable Ad-Hoc -An ad-hoc sub-process is a group of tasks that are executed in any order or skipped in order to fulfill the end condition and set it with the [IsAdhoc](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsAdhoc) property of `Bpmn Activity`. +An Ad-Hoc sub-process is a group of tasks that are executed in any order or skipped in order to fulfill the end condition and set it with the [IsAdhoc](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsAdhoc) property of [Bpmn Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html). -N>* By default, the `IsAdhoc` property is **false**. +N>* By default, the [IsAdhoc](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsAdhoc) property is false.
* This Property is only applicable for [Collapsed Sub-Process](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_CollapsedSubProcess) Type Activity. ```cshtml @@ -361,15 +347,14 @@ N>* By default, the `IsAdhoc` property is **false**. } } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrosNXRhkKyQthF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/Adhoc) -A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/Adhoc) ![IsAdHocActivity CollapsedSub-Process BPMN Shape](../images/Bpmn-CollapsedSub-Process-AdHocpng.png) ### How to Set Sub-Process Type -The [SubProcessType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_SubProcessType) property represents the type of task being processed within a BPMN subprocess. The `SubProcessType` property of the subprocess allows specification of the subprocess type. By default, it is set to **Default**. +SubProcessType represents the type of task that is being processed. The [SubProcessType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_SubProcessType) property of subprocess allows you to define the type of SubProcessType. By default, it is set to [Default](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnSubProcessType.html#Syncfusion_Blazor_Diagram_BpmnSubProcessType_Default). ```cshtml @using Syncfusion.Blazor.Diagram @@ -406,13 +391,11 @@ The [SubProcessType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Dia } } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjhSCZXxLkpZmobl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/SubProcessType) +You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/SubProcessType) ![Event Boundary BPMN Shape](../images/Bpmn-CollapsedSub-Process-Event.png) -The available sub-process types are described below. +The following table contains various types of BPMN boundaries. | SubProcessType | Image | Description| | -------- | -------- | -------- | diff --git a/blazor/diagram/bpmn-shapes/bpmn-connectors.md b/blazor/diagram/bpmn-shapes/bpmn-connectors.md index 020092fab5..b4dc525754 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-connectors.md +++ b/blazor/diagram/bpmn-shapes/bpmn-connectors.md @@ -18,8 +18,8 @@ They are primarily classified into three categories: ## How to Create an Association -An `BPMN Association` flow is used to link flow objects with their corresponding text or artifact. It is represented as a dotted graphical line with an opened arrow. -To create an Association, set the [Flow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html#Syncfusion_Blazor_Diagram_BpmnFlow_Flow) property of the [BpmnFlowShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html) should be set to one of the association types. +An BPMN `AssociationFlow` is used to link flow objects with their corresponding text or artifact. It is represented as a dotted graphical line with an opened arrow. +To create an association, set the [Flow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html#Syncfusion_Blazor_Diagram_BpmnFlow_Flow) property of the [BpmnFlowShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html) should be set to one of the association types. The available association types are: diff --git a/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md b/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md index 2768ed8de5..970692114e 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md +++ b/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md @@ -9,10 +9,10 @@ documentation: ug # BPMN Expanded Sub-Process in Blazor Diagram Component -An `BPMN Expanded Sub-Process` is used to frame a part of the diagram, shows that elements included in it logically belong together, and has no other semantics other than organizing elements. It is represented by a rounded rectangle. +An `BpmnExpandedSubProcess` is used to frame a part of the diagram, shows that elements included in it logically belong together, and has no other semantics other than organizing elements. It is represented by a rounded rectangle. ## How to Create an Expanded Sub-Process -To create an `Expanded Sub-Process`, define the `Shape` property of the node as [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html) and enable allow drop property of the node. +To create an Expanded Sub-Process, define the `Shape` property of the node as [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html) and enable `AllowDrop` constraint of the node. The following code example explains how to create a BPMN Expanded Sub-Process. From 43b255f5beb53ea1955a6d3948a7cfcc69c36158 Mon Sep 17 00:00:00 2001 From: Ramya Date: Fri, 10 Oct 2025 20:22:16 +0530 Subject: [PATCH 27/30] Revamping the Ug --- blazor/diagram/bpmn-shapes/bpmn-activity.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/blazor/diagram/bpmn-shapes/bpmn-activity.md b/blazor/diagram/bpmn-shapes/bpmn-activity.md index 500c4c4b87..2bb50c0f3b 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-activity.md +++ b/blazor/diagram/bpmn-shapes/bpmn-activity.md @@ -1,13 +1,13 @@ --- layout: post -title: BPMN Activity in Blazor Diagram Component | Syncfusion -description: Learn here all about BPMN activity such as task, sub-process in Syncfusion Blazor Diagram component and more. +title: BPMN Activity in Syncfusion Blazor Diagram Component | Syncfusion +description: Learn here all about BPMN activity such as task, sub-process in Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Activity in Blazor Diagram Component +# BPMN Activity in Diagram Component The [Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html) is the task that is performed in a business process. It is represented by a rounded rectangle. From abb52b56b9d495965042b88dfcd6d5e3e273ff37 Mon Sep 17 00:00:00 2001 From: Ramya Date: Fri, 10 Oct 2025 20:51:17 +0530 Subject: [PATCH 28/30] Revamping the Ug --- blazor/diagram/bpmn-shapes/bpmn-activity.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor/diagram/bpmn-shapes/bpmn-activity.md b/blazor/diagram/bpmn-shapes/bpmn-activity.md index 2bb50c0f3b..499069bb25 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-activity.md +++ b/blazor/diagram/bpmn-shapes/bpmn-activity.md @@ -1,7 +1,7 @@ --- layout: post title: BPMN Activity in Syncfusion Blazor Diagram Component | Syncfusion -description: Learn here all about BPMN activity such as task, sub-process in Blazor Diagram component and more. +description: Learn here all about BPMN activity such as task, sub-process in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug From 33957861b87f52cf723724e3d19390468a03cc6b Mon Sep 17 00:00:00 2001 From: SuganthiK963 <69144533+SuganthiK963@users.noreply.github.com> Date: Sat, 11 Oct 2025 14:35:43 +0530 Subject: [PATCH 29/30] Revamping the Ug --- blazor/diagram/bpmn-shapes/bpmn-data-object.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor/diagram/bpmn-shapes/bpmn-data-object.md b/blazor/diagram/bpmn-shapes/bpmn-data-object.md index d017e24e58..c57cb5258f 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-data-object.md +++ b/blazor/diagram/bpmn-shapes/bpmn-data-object.md @@ -9,7 +9,7 @@ documentation: ug # BPMN Data Object in Diagram Component -A `BPMN Data Object` represents information flowing through the process, such as data placed into the process, data resulting from the process, data that needs to be collected, or data that must be stored. To define a [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html), the node property [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shape.html) should be set as [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html), and the [DataObjectType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html#Syncfusion_Blazor_Diagram_BpmnDataObject_DataObjectType) property defines whether data is an input or output. You can indicate the collection of data object by setting the [IsCollectiveData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html#Syncfusion_Blazor_Diagram_BpmnDataObject_IsCollectiveData) property of `BpmnDataObject` as **True.** +A [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html) represents information flowing through the process, such as data placed into the process, data resulting from the process, data that needs to be collected, or data that must be stored. To define a [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html), the node property [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shape.html) should be set as `BpmnDataObject`, and the [DataObjectType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html#Syncfusion_Blazor_Diagram_BpmnDataObject_DataObjectType) property defines whether data is an input or output. You can indicate the collection of data object by setting the [IsCollectiveData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html#Syncfusion_Blazor_Diagram_BpmnDataObject_IsCollectiveData) property of `BpmnDataObject` as **True.** ```cshtml @using Syncfusion.Blazor.Diagram From 245a8f064ac77f9a8f6757f2fb0f3c41e8b7ead7 Mon Sep 17 00:00:00 2001 From: Ramya Date: Mon, 13 Oct 2025 19:18:32 +0530 Subject: [PATCH 30/30] Revamping the Ug --- blazor/diagram/bpmn-shapes/bpmn-data-store.md | 2 +- blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md | 8 ++++---- blazor/diagram/bpmn-shapes/bpmn-gateway.md | 2 +- blazor/diagram/bpmn-shapes/bpmn-text-annotation.md | 2 +- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/blazor/diagram/bpmn-shapes/bpmn-data-store.md b/blazor/diagram/bpmn-shapes/bpmn-data-store.md index 0abab2a75d..514f4a688f 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-data-store.md +++ b/blazor/diagram/bpmn-shapes/bpmn-data-store.md @@ -9,7 +9,7 @@ documentation: ug # BPMN Data Store in Blazor Diagram Component -A `DataStore` is used to store or access data associated with a business process. To create a `Data Store` shape, the node property [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shape.html) should be set to [BpmnDataStore](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataStore.html). The following code example explains how to create a data store. +A data store is used to store or access data associated with a business process. To create a data store shape, the node property [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shape.html) should be set to **BpmnDataStore**. The following code example explains how to create a data store. ```cshtml @using Syncfusion.Blazor.Diagram diff --git a/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md b/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md index 970692114e..40ffc61c14 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md +++ b/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md @@ -55,7 +55,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ## How to Add BPMN Nodes into a BPMN Expanded Sub-Process -To add a BPMN node into [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html), define the BpmnNodeViewModel object and add it to the [Children](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_Children) collection of the `BpmnExpandedSubProcess`. +To add a BPMN node into [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html), define the BPMN node object and add it to the [Children](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_Children) collection of the `BpmnExpandedSubProcess`. The following code example explains how to add a BPMN node to an BPMN Expanded Sub-Process using the `Children` property. @@ -121,8 +121,8 @@ The following image shows how to add BPMN node into the BPMN ExpandedSubProcess ### How to Set Loop Type - The [Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_Loop) property in the `BpmnExpandedSubProcess` component defines the type of loop behavior for a task that is internally repeated. By default, the Loop property is set to [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnLoopCharacteristic.html#Syncfusion_Blazor_Diagram_BpmnLoopCharacteristic_None). - The Loop property can be configured within the `BpmnExpandedSubProcess` component, as demonstrated in the following example. + The [Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_Loop) property in the `BpmnExpandedSubProcess` component defines the type of loop behavior for a task that is internally repeated. By default, the Loop property is set to **None**. + The `Loop` property can be configured within the `BpmnExpandedSubProcess` component, as demonstrated in the following example. ```cshtml @using Syncfusion.Blazor.Diagram @@ -221,7 +221,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ### How to Enable Ad-Hoc -An `Ad-Hoc` Expanded Sub-Process is a group of tasks that are executed in any order or skipped in order to fulfill the end condition and can be set with the [IsAdhoc](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_IsAdhoc) property of `BpmnExpandedSubProcess`. +An Ad-Hoc Expanded Sub-Process is a group of tasks that are executed in any order or skipped in order to fulfill the end condition and can be set with the [IsAdhoc](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_IsAdhoc) property of `BpmnExpandedSubProcess`. ```cshtml @using Syncfusion.Blazor.Diagram diff --git a/blazor/diagram/bpmn-shapes/bpmn-gateway.md b/blazor/diagram/bpmn-shapes/bpmn-gateway.md index 65136e964c..9c6867d3a1 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-gateway.md +++ b/blazor/diagram/bpmn-shapes/bpmn-gateway.md @@ -9,7 +9,7 @@ documentation: ug # BPMN Gateway in Diagram Component -A `BPMNGateway` is used to control the flow of a process and it is represented in diamond shape. The [GatewayType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html#Syncfusion_Blazor_Diagram_BpmnGateway_GatewayType) property of the [BpmnGateway](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html) can be set with any of the appropriate gateways. By default, the value of `GatewayType` is `None`. The following code example explains how to create a BPMNGateway. +A [BpmnGateway](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html) is used to control the flow of a process and it is represented in diamond shape. The [GatewayType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html#Syncfusion_Blazor_Diagram_BpmnGateway_GatewayType) property of the `BpmnGateway` can be set with any of the appropriate gateways. By default, the value of `GatewayType` is `None`. The following code example explains how to create a `BPMNGateway`. ```cshtml @using Syncfusion.Blazor.Diagram diff --git a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md index 573a53aa4e..05ab547859 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md +++ b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md @@ -11,7 +11,7 @@ documentation: ug * A BPMN object can be associated with a text annotation that does not affect the flow but provides information about objects within a flow. -* A BPMNTextAnnotation points to or references another BPMN shape, which we call the [TextAnnotationTarget](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTextAnnotation.html#Syncfusion_Blazor_Diagram_BpmnTextAnnotation_TextAnnotationTarget) of the BPMNTextAnnotation. When a target shape is moved, copied, or deleted, any BPMNTextAnnotation attached to the shape will be moved, copied, or deleted too. Thus, the BPMNTextAnnotations remain with their target shapes though you can reposition the BPMNTextAnnotation to any offset from its target. The `TextAnnotationTarget` property of the [BpmnTextAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTextAnnotation.html) is used to connect an annotation element to the BPMN Node. +* A [BpmnTextAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTextAnnotation.html) points to or references another BPMN shape, which we call the [TextAnnotationTarget](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTextAnnotation.html#Syncfusion_Blazor_Diagram_BpmnTextAnnotation_TextAnnotationTarget) of the `BPMNTextAnnotation`. When a target shape is moved, copied, or deleted, any `BPMNTextAnnotation` attached to the shape will be moved, copied, or deleted too. Thus, the `BPMNTextAnnotation` remain with their target shapes though you can reposition the `BPMNTextAnnotation` to any offset from its target. The `TextAnnotationTarget` property of the `BpmnTextAnnotation` is used to connect an annotation element to the BPMN Node. * The annotation element can be switched from a BPMN node to another BPMN node simply by dragging the source end of the annotation connector into the other BPMN node.