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..81f35df703 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/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 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 -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/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 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. @@ -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..cbf01efd2a 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/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 -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/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 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" %} @@ -131,7 +131,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 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 +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, 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 +159,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 +169,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..ac8b7eceef 100644 --- a/blazor/check-box/how-to/right-to-left.md +++ b/blazor/check-box/how-to/right-to-left.md @@ -3,7 +3,7 @@ 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 --- @@ -11,7 +11,7 @@ documentation: ug 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. +The following example illustrates how to enable right-to-left support in CheckBox component. ```cshtml @using Syncfusion.Blazor.Buttons diff --git a/blazor/check-box/label-and-size.md b/blazor/check-box/label-and-size.md index 648fd6d416..2171b5ef4c 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](./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..d705cd4de5 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/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 -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,10 @@ 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 application using the following command in the terminal (Ctrl+`). {% tabs %} @@ -71,8 +72,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 +87,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 +95,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 +106,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 +139,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 +159,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 +225,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..ec32683a24 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,8 +110,7 @@ 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 @@ -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..f523573b4a 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/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 -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,10 @@ 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 application using the following commands in the terminal (Ctrl+`). {% tabs %} @@ -70,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 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 +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 package list and component details. {% endtabcontent %} @@ -93,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" %} @@ -104,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" %} @@ -128,7 +129,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 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 +137,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 +156,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..ff2c174df5 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/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 -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/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 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" %} @@ -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 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 +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> 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 +152,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 +166,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..ac86dbec1e 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](../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