From d6d1c2a178b989fd8c52df17ac0ac31fe6335bd9 Mon Sep 17 00:00:00 2001 From: Ashwini-SF5049 Date: Thu, 9 Oct 2025 16:10:14 +0530 Subject: [PATCH 1/4] 983104: Updated the UG Documentation for the Toast and TextBox --- blazor/textarea/events.md | 17 +++---- blazor/textarea/floating-label.md | 10 ++-- blazor/textarea/form-support.md | 8 ++- blazor/textarea/getting-started-webapp.md | 50 +++++++++---------- blazor/textarea/getting-started.md | 31 ++++++------ blazor/textarea/max-length.md | 9 ++-- blazor/textarea/methods.md | 16 +++--- blazor/textarea/resize.md | 20 ++++---- blazor/textarea/rows-columns.md | 8 ++- blazor/textarea/styles-appearance.md | 24 ++++----- blazor/toast/accessibility.md | 16 +++--- blazor/toast/action-buttons.md | 4 +- blazor/toast/animation.md | 4 +- blazor/toast/config.md | 25 +++++----- blazor/toast/events.md | 12 ++--- blazor/toast/getting-started-webapp.md | 50 +++++++++---------- blazor/toast/getting-started.md | 34 ++++++------- blazor/toast/how-to/access-specific-toast.md | 4 +- blazor/toast/how-to/add-dynamic-template.md | 2 +- .../change-toast-content-dynamically.md | 2 +- .../how-to/close-the-toast-with-click-tap.md | 4 +- .../prevent-toast-close-with-mobile-swipe.md | 4 +- .../how-to/show-different-types-of-toast.md | 12 +++-- ...ow-multiple-toasts-in-various-positions.md | 2 +- blazor/toast/position.md | 12 ++--- blazor/toast/style.md | 10 ++-- blazor/toast/template.md | 6 +-- blazor/toast/timeout.md | 11 ++-- 28 files changed, 198 insertions(+), 209 deletions(-) diff --git a/blazor/textarea/events.md b/blazor/textarea/events.md index 22b7166517..7a14f5f0c0 100644 --- a/blazor/textarea/events.md +++ b/blazor/textarea/events.md @@ -3,17 +3,17 @@ layout: post title: Events in Blazor TextArea Component | Syncfusion description: Handling events triggered by user interactions or changes of the Syncfusion Blazor Textarea component and much more. platform: Blazor -control: Textarea +control: TextArea documentation: ug --- # Events in Blazor TextArea Component -This section describes the TextArea events that will be triggered when appropriate actions are performed. The following events are available in the TextArea component. +This topic explains the TextArea events that are raised during user interaction and component lifecycle. The following events are available: Created, Input, ValueChange, Focus, Blur, and Destroyed. ## Created event -The TextArea component triggers the [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_Created) event when the TextArea component is created. This event provides users with an opportunity to perform actions immediately after the TextArea has been created and initialized. +The TextArea component triggers the [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_Created) event after the component is created and initialized. Use this event to perform one-time initialization or configuration logic. ```cshtml @using Syncfusion.Blazor.Inputs @@ -48,8 +48,7 @@ The [TextAreaInputEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Bl ## ValueChange event -The TextArea component triggers the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_ValueChange) event when the content of TextArea has changed and gets focus-out. This event provides users with an opportunity to execute specific actions in response to changes made by the user. -The [TextAreaValueChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.TextAreaValueChangeEventArgs.html) passed as an event argument provides the details about the changes in the TextArea's value. +The TextArea component triggers the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_ValueChange) event when the content changes and the component loses focus (blur). Use this event to react to committed value changes. The [TextAreaValueChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.TextAreaValueChangeEventArgs.html) argument provides details about the value change. ```cshtml @using Syncfusion.Blazor.Inputs @@ -65,8 +64,7 @@ The [TextAreaValueChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfus ## Focus event -The TextArea component triggers the [Focus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_Focus ) when the TextArea gains focus. This event allows developers to execute specific actions when the user interacts with the TextArea by focusing on it. -The [TextAreaFocusInEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.TextAreaFocusInEventArgs.html) passed as an argument provides details about the focus event in the TextArea. +The TextArea component triggers the [Focus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_Focus) event when the TextArea gains focus. Use this event to run logic when the user focuses the component. The [TextAreaFocusInEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.TextAreaFocusInEventArgs.html) argument provides details about the focus event. ```cshtml @using Syncfusion.Blazor.Inputs @@ -83,8 +81,7 @@ The [TextAreaFocusInEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion. ## Blur event -The TextArea component triggers the [Blur](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_Blur) when the TextArea loses focus. This event allows users to execute specific actions when the user interacts with the TextArea by moving focus away from it. -The [TextAreaFocusOutEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.TextAreaFocusOutEventArgs.html) passed as an argument provides details about the blur event in the TextArea. +The TextArea component triggers the [Blur](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_Blur) event when the TextArea loses focus. Use this event to handle actions when focus moves away from the component. The [TextAreaFocusOutEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextAreaFocusOutEventArgs.html) argument provides details about the blur event. ```cshtml @using Syncfusion.Blazor.Inputs @@ -101,7 +98,7 @@ The [TextAreaFocusOutEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion ## Destroyed event -The TextArea component triggers the [Destroyed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_Destroyed) when the TextArea component is destroyed. +The TextArea component triggers the [Destroyed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_Destroyed) event when the component is disposed. Use this lifecycle event to release resources or perform cleanup. ```cshtml @using Syncfusion.Blazor.Inputs diff --git a/blazor/textarea/floating-label.md b/blazor/textarea/floating-label.md index c243654704..b719b3f5e6 100644 --- a/blazor/textarea/floating-label.md +++ b/blazor/textarea/floating-label.md @@ -3,18 +3,20 @@ layout: post title: Floating Label in Blazor TextArea Component | Syncfusion description: Checkout and learn about the Floating Label of the Syncfusion Blazor Textarea component and much more. platform: Blazor -control: Textarea +control: TextArea documentation: ug --- # Floating Label in Blazor TextArea Component -The floating label functionality in the TextArea Component allows the placeholder text to float above the TextArea while the user interacts with it, providing a more intuitive user experience. This feature can be achieved using the [FloatLabelType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_FloatLabelType) API, which offers various options for defining the floating behavior: +The floating label functionality in the TextArea component displays the placeholder as a floating label above the TextArea while the user interacts with it, improving readability and conserving space in forms. Use the [FloatLabelType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_FloatLabelType) property to control this behavior. By default, the floating label is disabled (Never). + +The options below describe when the label floats and typical usage patterns: | Type | Description | | -- | -- | -| Auto | The label floats above the TextArea when it receives focus or input, returning to its initial position when the TextArea loses focus and contains no value. | -| Always | The label always remains floating above the TextArea, regardless of user interaction. | +| Auto | The label floats above the TextArea when it receives focus or input. If a value is present, the label remains floated after blur; if empty, it returns to its initial position. | +| Always | The label always remains floating above the TextArea, regardless of user interaction or value. | | Never | The label never floats; it remains in its default position within the TextArea. | {% tabs %} diff --git a/blazor/textarea/form-support.md b/blazor/textarea/form-support.md index 664988d103..f5c20b68da 100644 --- a/blazor/textarea/form-support.md +++ b/blazor/textarea/form-support.md @@ -3,15 +3,13 @@ layout: post title: Form Support in Blazor TextArea Component | Syncfusion description: Checkout and learn about the Form support of the Syncfusion Blazor Textarea component and much more. platform: Blazor -control: Textarea +control: TextArea documentation: ug --- # Form Support in Blazor TextArea Component -The TextArea component seamlessly integrates with HTML forms, enabling efficient submission of longer text data. By including TextArea inputs within HTML forms, users can conveniently input multiline text content and submit it as part of form submissions. - -This integration enhances the usability of forms, allowing users to provide detailed feedback, enter lengthy descriptions, or input other multiline text data seamlessly. Please find the demo link [here](https://blazor.syncfusion.com/demos/textarea/formsvalidation?theme=fluent). +The TextArea component integrates with HTML forms and Blazor’s EditForm to capture and submit multiline text efficiently. Typical scenarios include collecting detailed feedback, descriptions, and other long-form inputs as part of a form submission. See the TextArea forms and validation demo for a working example: TextArea forms and validation demo. {% tabs %} {% highlight razor %} @@ -51,4 +49,4 @@ This integration enhances the usability of forms, allowing users to provide deta TextArea component seamlessly integrates with the `FormValidator` component, allowing users to incorporate textarea inputs into form validation processes efficiently. -By integrating TextArea component with the `FormValidator` component, users can enforce validation rules specific to text inputs, such as required fields, minimum and maximum length constraints, pattern matching, and more. This ensures that user-submitted text data meets specified criteria and maintains data integrity. +By integrating The TextArea component with the `FormValidator` component, users can enforce validation rules specific to text inputs, such as required fields, minimum and maximum length constraints, pattern matching, and more. This ensures that user-submitted text data meets specified criteria and maintains data integrity. diff --git a/blazor/textarea/getting-started-webapp.md b/blazor/textarea/getting-started-webapp.md index 98ec8f8227..ebe5fc54fd 100644 --- a/blazor/textarea/getting-started-webapp.md +++ b/blazor/textarea/getting-started-webapp.md @@ -9,9 +9,9 @@ documentation: ug # Getting Started with Blazor TextArea in Blazor Web App -This section briefly explains about how to include [Blazor TextArea](https://www.syncfusion.com/blazor-components/blazor-TextArea) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section explains how to include the [Blazor TextArea](https://www.syncfusion.com/blazor-components/blazor-textarea) component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. -To get started quickly with Blazor TextArea component, check on the following video: +To get started quickly with the Blazor TextArea component, watch the following video: {% youtube "youtube:https://www.youtube.com/watch?v=4qrr0FXvzMA" %} @@ -26,17 +26,17 @@ To get started quickly with Blazor TextArea component, check on the following vi ## Create a new Blazor Web App in Visual Studio -You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application. +Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) when creating the Blazor Web App. ## Install Syncfusion® Blazor Inputs and Themes NuGet in the App -To add **Blazor TextArea** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor TextArea** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly` or `Auto` render mode, install the Syncfusion® Blazor component NuGet packages in the client project. -Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, you can use the following Package Manager commands: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -47,7 +47,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on nuget.org. Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. {% endtabcontent %} @@ -59,11 +59,11 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor Web App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application. +Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) when creating the Blazor Web App. -For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. +For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands: {% tabs %} {% highlight c# tabtitle="Blazor Web App" %} @@ -75,11 +75,11 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). +N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this guide: Getting started with Blazor Web App - render interactive modes. ## Install Syncfusion® Blazor Inputs and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly` or `Auto` render mode, install the Syncfusion® Blazor component NuGet packages in the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure you’re in the project root directory where your `.csproj` file is located. @@ -97,7 +97,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on nuget.org. Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. {% endtabcontent %} @@ -107,10 +107,10 @@ N> Syncfusion® Blazor components are availa | Interactive Render Mode | Description | | -- | -- | -| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| -| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| +| WebAssembly or Auto | Open **~/_Imports.razor** from the client project. | +| Server | Open **~/_Imports.razor** in the `Components` folder. | -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace. +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -121,9 +121,9 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace. {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. +Now, register the Syncfusion® Blazor service in the **~/Program.cs** file of your Blazor Web App. -If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. +If the interactive render mode is `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in both **~/Program.cs** files (Server and Client) of your Blazor Web App. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -157,7 +157,7 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion® Blazor Service only in that **~/Program.cs** file. +If the interactive render mode is `Server`, the project contains a single **~/Program.cs** file. In this case, register the Syncfusion® Blazor service only in that file. {% tabs %} {% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} @@ -180,7 +180,7 @@ var app = builder.Build(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: +Theme stylesheets and scripts are provided via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: ```html @@ -194,11 +194,11 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> Learn more in the [Blazor themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic, which covers [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator). For script references, see [Adding script reference](https://blazor.syncfusion.com/documentation/common/adding-script-references). ## Add Syncfusion® Blazor TextArea component -Add the Syncfusion® Blazor TextArea component in the **~Pages/.razor** file. If an interactivity location as `Per page/component` in the web app, define a render mode at the top of the `~Pages/.razor` component, as follows: +Add the Syncfusion® Blazor TextArea component in the **~Pages/.razor** file. If the interactivity location is `Per page/component`, define a render mode at the top of the `~Pages/.razor` component as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | @@ -207,7 +207,7 @@ Add the Syncfusion® Blazor TextArea compone | | Server | @rendermode InteractiveServer | | | None | --- | -N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default. +N> If the **Interactivity location** is set to `Global` and the **Render mode** is `Auto`, `WebAssembly`, or `Server`, the render mode is configured in the `App.razor` file by default. {% tabs %} {% highlight razor %} @@ -230,7 +230,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i ## Floating label -The floating label TextArea floats the label above the TextArea after focusing, or filled with value in the TextArea. The floating label TextArea can be created by using the [FloatLabelType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_FloatLabelType) API. +The floating label displays the placeholder as a label above the TextArea when focused or when a value is present. Configure this behavior using the [FloatLabelType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_FloatLabelType) property. {% tabs %} {% highlight razor %} diff --git a/blazor/textarea/getting-started.md b/blazor/textarea/getting-started.md index 3adf754947..dce202422b 100644 --- a/blazor/textarea/getting-started.md +++ b/blazor/textarea/getting-started.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor TextArea Component -This section briefly explains about how to include [Blazor TextArea](https://www.syncfusion.com/blazor-components/blazor-textarea) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This section explains how to add the [Blazor TextArea](https://www.syncfusion.com/blazor-components/blazor-textarea) component to a Blazor WebAssembly app using Visual Studio or Visual Studio Code. {% tabcontents %} @@ -21,11 +21,11 @@ This section briefly explains about how to include [Blazor TextArea](https://www ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion® Blazor extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ## Install Syncfusion® Blazor Inputs and Themes NuGet in the App -To add **Blazor TextArea** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor TextArea** component, open NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the following Package Manager commands: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -36,7 +36,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. {% endtabcontent %} @@ -48,9 +48,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application using the following commands in the integrated terminal (Ctrl+`). {% tabs %} @@ -66,8 +66,8 @@ cd BlazorApp ## Install Syncfusion® Blazor Inputs and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure you are in the project root directory where the `.csproj` file is located. +* Run the following commands to install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) and restore dependencies. {% tabs %} @@ -81,7 +81,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. {% endtabcontent %} @@ -89,7 +89,7 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace. +Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -100,7 +100,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +Now, register the Syncfusion® Blazor service in the **~/Program.cs** file of your Blazor WebAssembly app. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -122,9 +122,10 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} + ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. +The theme stylesheet and script are available through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Add the stylesheet and script references to the `` section of the **~/index.html** file. ```html @@ -133,7 +134,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> For additional options, see [Blazor themes](https://blazor.syncfusion.com/documentation/appearance/themes), which covers [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator). For script references, see [Adding script reference](https://blazor.syncfusion.com/documentation/common/adding-script-references). ## Add Blazor TextArea component @@ -151,7 +152,7 @@ Add the Syncfusion® Blazor TextArea compone ## Floating label -The floating label TextArea floats the label above the TextArea after focusing, or filled with value in the TextArea. The floating label TextArea can be created by using the [FloatLabelType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_FloatLabelType) API. +The floating label displays the placeholder as a label above the TextArea when focused or when a value is present. Configure this behavior using the [FloatLabelType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_FloatLabelType) property. {% tabs %} {% highlight razor %} @@ -167,4 +168,4 @@ The floating label TextArea floats the label above the TextArea after focusing, * [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](../getting-started/blazor-webassembly-dotnet-cli) * [Getting Started with Syncfusion® Blazor for Server-side in Visual Studio](../getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](../getting-started/blazor-server-side-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](../getting-started/blazor-server-side-dotnet-cli) \ No newline at end of file diff --git a/blazor/textarea/max-length.md b/blazor/textarea/max-length.md index 4ab8e8deec..306a55cad0 100644 --- a/blazor/textarea/max-length.md +++ b/blazor/textarea/max-length.md @@ -3,16 +3,13 @@ layout: post title: Maximum Length in Blazor TextArea Component | Syncfusion description: Limiting the maximum number of characters of the Syncfusion Blazor Textarea component and much more. platform: Blazor -control: Textarea +control: TextArea documentation: ug --- # Maximum Length in Blazor TextArea Component -You can enforce a maximum length limit for the text input in the TextArea using the [MaxLength](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_MaxLength) property. This property allows to define the maximum number of characters that users can input into the TextArea. - - -* By setting the `MaxLength` property, you can control the length of text input, preventing users from exceeding a specified character limit. +Use the [MaxLength](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_MaxLength) property to enforce a maximum character limit in the TextArea. This property defines the highest number of characters that can be entered, helping guide input length and maintain data quality. {% tabs %} {% highlight razor %} @@ -22,6 +19,6 @@ You can enforce a maximum length limit for the text input in the TextArea using {% endhighlight %} {% endtabs %} -When the user reaches the specified limit, the TextArea prevents further input, ensuring compliance with the defined character limit. This feature helps maintain data integrity and provides users with clear feedback on the allowed input length. +When the specified limit is reached, the TextArea prevents further input from typing or pasting. Newline characters count toward the limit. For data integrity, also validate on the server or with model attributes (for example, MaxLength or StringLength). The Input event fires as the user types until the limit is reached, and ValueChange occurs on blur when the value is committed. {% previewsample "https://blazorplayground.syncfusion.com/embed/rthpDRsUCffyeOfE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TextArea with MaxLength](./images/blazor-textarea-maxlength.png)" %} \ No newline at end of file diff --git a/blazor/textarea/methods.md b/blazor/textarea/methods.md index 9b3362b36c..0258749746 100644 --- a/blazor/textarea/methods.md +++ b/blazor/textarea/methods.md @@ -3,19 +3,19 @@ layout: post title: Methods in Blazor TextArea Component | Syncfusion description: Checkout and learn about the list of all available methods in the Syncfusion Blazor TextArea component. platform: Blazor -control: Textarea +control: TextArea documentation: ug --- # Methods in Blazor TextArea Component -This section outlines the methods available for interacting with the TextArea component. +This section describes the methods available for interacting with the TextArea component. ## FocusAsync method -The [FocusAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_FocusAsync) method in the TextArea, is used to set focus to the textarea element, enabling user interaction. +The [FocusAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_FocusAsync) method programmatically moves focus to the TextArea element to enable user input. This asynchronous method should be awaited when used in an async context. -By calling the `FocusAsync` method, you can programmatically set focus to the TextArea component, allowing users to interact with it via keyboard input or other means. +By calling the `FocusAsync` method, focus is set to the TextArea so the user can immediately interact with it using the keyboard or other input methods. Ensure the component reference is available (after initial render) before invoking this method. ```cshtml @using Syncfusion.Blazor.Inputs @@ -36,8 +36,8 @@ By calling the `FocusAsync` method, you can programmatically set focus to the Te ## FocusOutAsync method -The [FocusOutAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_FocusOutAsync) method in the TextArea component is used to remove focus from the textarea element, ending user interaction. -This method is beneficial for scenarios where user need to programmatically remove focus from the TextArea component, such as after completing a specific task or when navigating to another element in the application. +The [FocusOutAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_FocusOutAsync) method programmatically removes focus from the TextArea element, ending direct user interaction. This asynchronous method should be awaited when used in an async context. +This method is useful when focus needs to move away after completing a task or to shift attention to another element in the application. ```cshtml @using Syncfusion.Blazor.Inputs @@ -58,8 +58,8 @@ This method is beneficial for scenarios where user need to programmatically remo ## GetPersistDataAsync method -The [GetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_GetPersistDataAsync) method in the TextArea component retrieves the properties that need to be maintained in the persisted state. -This method returns an object containing the properties to be persisted, which can include various configuration options and state information of the TextArea component. +The [GetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_GetPersistDataAsync) method retrieves the component state that should be maintained for persistence. It returns a serialized representation (typically a JSON string) of the properties to persist. +Use this method to capture configuration and state for storage and later restoration, such as saving user settings between sessions. As an asynchronous method, it should be awaited when called in an async context. ```cshtml @using Syncfusion.Blazor.Inputs diff --git a/blazor/textarea/resize.md b/blazor/textarea/resize.md index 698cc1024a..cb3efb3896 100644 --- a/blazor/textarea/resize.md +++ b/blazor/textarea/resize.md @@ -3,20 +3,22 @@ layout: post title: Resize in Blazor TextArea Component | Syncfusion description: Check out and learn about the Resize feature of the Syncfusion Blazor TextArea component and explore much more functionality. platform: Blazor -control: Textarea +control: TextArea documentation: ug --- # Resize in Blazor TextArea Component -The TextArea allows users to input and edit large amounts of text. Resizing this component effectively can enhance the user experience and accommodate varying content needs. This resizing behavior can be enabled and configured using the [ResizeMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_ResizeMode) API, which offers several options for resizing the TextArea: +The TextArea allows users to input and edit large amounts of text. Resizing can improve usability by accommodating varying content lengths. Configure resizing behavior using the [ResizeMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_ResizeMode) property, which provides these options: | Type | Description | | -- | -- | -| Vertical | Allows users to adjust the height of the TextArea vertically. It is suitable when users want to resize the TextArea only along the vertical axis, accommodating varying amounts of text input. | -| Horizontal | Users can adjust the width of the TextArea horizontally. This option is helpful for accommodating longer lines of text without altering the height of the control. | -| Both | Allows users to adjust both the height and width of the TextArea, offering maximum flexibility in resizing. It is ideal for situations where users need precise control over the dimensions of the TextArea. | -| None | Disables the resizing in the TextArea. This option is ideal for situations where maintaining a consistent layout is critical, and resizing by users is unnecessary. | +| Vertical | Enables vertical resizing to adjust the height of the TextArea. | +| Horizontal | Enables horizontal resizing to adjust the width of the TextArea. | +| Both | Enables both vertical and horizontal resizing for maximum flexibility. | +| None | Disables resizing and hides the resize handle to maintain a fixed layout. | + +N> In Razor, enums are typically referenced with the @ prefix (for example, @Resize.Both). {% tabs %} {% highlight razor %} @@ -26,11 +28,11 @@ The TextArea allows users to input and edit large amounts of text. Resizing this {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXhTjHsgMqknhFJF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TextArea with Floating Label](./images/blazor-textarea-resize.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXhTjHsgMqknhFJF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TextArea with Resize](./images/blazor-textarea-resize.png)" %} ## Width -You can easily customize the width of the TextArea using the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_Width) property. This property allows precise adjustment of the TextArea's width according to the specific layout requirements of the application. +Customize the width of the TextArea using the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_Width) property. This property allows precise adjustment of the TextArea's width according to the specific layout requirements of the application. {% tabs %} {% highlight razor %} @@ -40,4 +42,4 @@ You can easily customize the width of the TextArea using the [Width](https://hel {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLTjRCACTsLJegK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TextArea with Resize](./images/blazor-textarea-resize-width.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLTjRCACTsLJegK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TextArea with Custom Width and Resize](./images/blazor-textarea-resize-width.png)" %} diff --git a/blazor/textarea/rows-columns.md b/blazor/textarea/rows-columns.md index 287db6914a..d6f0f0bb5c 100644 --- a/blazor/textarea/rows-columns.md +++ b/blazor/textarea/rows-columns.md @@ -3,17 +3,15 @@ layout: post title: Rows and Columns count in Blazor TextArea Component | Syncfusion description: Learn about adjusting the rows and columns of the Syncfusion Blazor TextArea component and much more. platform: Blazor -control: Textarea +control: TextArea documentation: ug --- # Rows and Columns in Blazor TextArea Component -Two essential attributes, `rows` and `columns`, play a pivotal role in customizing the TextArea's appearance and layout. -The `rows`attribute determines the initial visible number of lines within the TextArea, controlling its vertical size. Conversely, the `columns` attribute specifies the visible width of the TextArea in characters per line, determining its initial width. +The TextArea size can be tailored for layout and readability using the component properties that map to native textarea behavior. The `rows` value controls the initial visible number of lines (vertical size), and the `columns` value represents the initial visible width in characters per line (approximate, as it depends on font and CSS). These settings affect only the initial visible area; content can still exceed the view and scrollbars may appear based on overflow settings. - -* You can customize the TextArea component by setting the number of rows using the [RowCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_RowCount) property and the number of columns using the [ColumnCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_ColumnCount) property. These properties allow precise control over the dimensions of the TextArea, ensuring it fits seamlessly within the layout of the application. +* Customize the TextArea component by setting the number of rows with the [RowCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_RowCount) property and the number of columns with the [ColumnCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_ColumnCount) property. These properties allow precise control over the dimensions of the TextArea, ensuring it fits seamlessly within the layout of the application. {% tabs %} {% highlight razor %} diff --git a/blazor/textarea/styles-appearance.md b/blazor/textarea/styles-appearance.md index 0fa6f0eb61..6ee7b9516b 100644 --- a/blazor/textarea/styles-appearance.md +++ b/blazor/textarea/styles-appearance.md @@ -3,21 +3,20 @@ layout: post title: Style and appearance in Blazor TextArea Component | Syncfusion description: Learn here all about Style and appearance of the Syncfusion Blazor Textarea component and much more. platform: Blazor -control: Textarea +control: TextArea documentation: ug --- # Sizing in Blazor TextArea Component -you can adjust the size of the TextArea by applying specific classes: +The size of the TextArea can be adjusted by applying the following classes: | Property | Description | | -- | -- | | Small | Add the `e-small` class to the input element or its container to render a smaller-sized TextArea. | | Bigger | Add the `e-bigger` class to the input element or its container to render a larger-sized TextArea. | -By applying these classes, users can easily customize the appearance of the TextArea to better fit their application's design requirements. - +Applying these classes helps align the TextArea with the overall density and visual scale of the application’s design. {% tabs %} {% highlight razor tabtitle="Razor" %} @@ -89,13 +88,13 @@ By adding these classes, users can choose between a filled or outline appearance {% endhighlight %} {% endtabs %} ->Note: Filled and Outline theme customization are available only with Material and Material3 themes. +>Note: Filled and Outline appearances are available only with the Material and Material3 themes. ## Custom styling with CssClass property -The `CssClass` Api provides a powerful way to apply custom styling to the TextArea component, allowing users to customize its appearance and layout according to their design requirements. +The `CssClass` property provides a way to apply custom CSS classes to the TextArea container, enabling customization of color, padding, margins, borders, and other styles to meet design requirements. -By utilizing the `CssClass` API, users can apply custom CSS classes to the TextArea component's container, enabling control over its styling properties such as color, padding, margins, borders, and more. +By applying custom classes, the component’s appearance can be tailored while preserving built-in theme behavior. {% tabs %} {% highlight razor %} @@ -107,7 +106,7 @@ By utilizing the `CssClass` API, users can apply custom CSS classes to the TextA ## Setting the disabled state -To disable the TextArea, you can utilize the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_Disabled) property. When set to `true`, the TextArea becomes disabled, preventing user interaction. Please find the demo link [here](https://blazor.syncfusion.com/demos/textarea/api?theme=fluent). +Disable the TextArea by using the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_Disabled) property. When set to `true`, the TextArea becomes disabled, preventing user interaction. Please find the demo link [here](https://blazor.syncfusion.com/demos/textarea/api?theme=fluent). {% tabs %} {% highlight razor %} @@ -133,9 +132,9 @@ To make the TextArea read-only , you can use the [ReadOnly](https://help.syncfus ## Set the rounded corner -Render the TextArea with `rounded corner` by adding the `e-corner` class to the input parent element. +Render the TextArea with rounded corners by adding the `e-corner` class to the input’s parent element. This style applies to the boxed input wrapper. ->This rounded corner is visible only in box model input component +>This rounded corner is visible only in the box model input component. {% tabs %} {% highlight razor %} @@ -168,7 +167,7 @@ To display a static clear button in the TextArea component, you can add the `e-s ## Customize the TextArea background color and text color -You can customize the TextArea styles such as background-color, text-color and border-color by overriding its default styles to achieve the desired appearance for the TextArea. +Customize background color, text color, and border color by overriding the default wrapper styles. Target the appropriate wrapper classes to ensure consistent appearance across themes. {% tabs %} {% highlight razor tabtitle="Razor" %} @@ -295,7 +294,7 @@ You can change the floating label color of the TextArea for both `success` and ` ## Adding mandatory asterisk to placeholder -To add a mandatory asterisk (*) to the placeholder in the TextArea component, you can utilize CSS to append the asterisk after the placeholder text. +Add a mandatory asterisk (*) to the floating label using CSS to append the symbol after the label text. ```css @@ -307,7 +306,6 @@ To add a mandatory asterisk (*) to the placeholder in the TextArea component, yo ``` - {% tabs %} {% highlight razor tabtitle="Razor" %}
diff --git a/blazor/toast/accessibility.md b/blazor/toast/accessibility.md index 470cae8444..b80a8bc7cf 100644 --- a/blazor/toast/accessibility.md +++ b/blazor/toast/accessibility.md @@ -9,13 +9,9 @@ documentation: ug # Accessibility in Blazor Toast Component -The [Blazor Toast](https://www.syncfusion.com/blazor-components/blazor-toast) component has been designed with [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/practices/) specifications in mind by applying the prompt WAI-ARIA roles, states, and properties with the keyboard support. It helps users who use assistive WAI-ARIA accessibility support, which is achieved using attributes. +The [Blazor Toast](https://www.syncfusion.com/blazor-components/blazor-toast) component is built with [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/practices/) in mind. Appropriate ARIA roles, states, and properties are applied to ensure announcements by assistive technologies. The component is tested with major screen readers and supports accessible usage patterns. -It provides information about the elements in a document for assistive technology. - -The Blazor Toast component implements the keyboard navigation support by using the following [WAI-ARIA practices](https://www.w3.org/WAI/ARIA/apg/practices/) and is tested in major screen readers. - -The Blazor Toast component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. +The Blazor Toast component follows common accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles). The accessibility compliance for the Blazor Toast component is outlined below. @@ -51,9 +47,9 @@ The Blazor Toast component implements the keyboard navigation support by using t -| Class | Description | +| Attribute | Description | | -------- | -------- | -| role | alert: Identifies the element as a container when alert content will be added or updated. | +| role | alert: Identifies the element as an assertive live region so that alert content is announced when added or updated. | ```cshtml @@ -80,10 +76,10 @@ The Blazor Toast component implements the keyboard navigation support by using t ## Ensuring accessibility -The Blazor Toast component's accessibility levels are ensured through an [axe-core](https://www.npmjs.com/package/axe-core) software tool during automated testing. +The Blazor Toast component’s accessibility is validated with the [axe-core](https://www.npmjs.com/package/axe-core) tool during automated testing. The accessibility compliance of the Toast component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/toast) in a new window to evaluate the accessibility of the Toast component with accessibility tools. ## See also -* [Accessibility in Syncfusion® components](../common/accessibility) +* [Accessibility in Syncfusion® components](../common/accessibility) \ No newline at end of file diff --git a/blazor/toast/action-buttons.md b/blazor/toast/action-buttons.md index 8e666a881f..7f5730810f 100644 --- a/blazor/toast/action-buttons.md +++ b/blazor/toast/action-buttons.md @@ -9,9 +9,9 @@ documentation: ug # Action Buttons in Blazor Toast Component -Action buttons can be included to the toast control by adding the `ToastButton` property. The click event callback function can also be included for each button. +Add action buttons to the Toast component by defining the ToastButtons collection with one or more ToastButton items. Each button can include its own OnClick callback to perform actions such as dismissing the toast or triggering custom logic. -In the following code, toast buttons are configured using `ToastButton` property. +In the following example, toast buttons are configured using the ToastButtons collection, and both buttons invoke an OnClick handler to hide the toast. ```cshtml diff --git a/blazor/toast/animation.md b/blazor/toast/animation.md index b469d05594..ccf26814c3 100644 --- a/blazor/toast/animation.md +++ b/blazor/toast/animation.md @@ -9,9 +9,9 @@ documentation: ug # Animation in Blazor Toast Component -The toast component supports custom animations for both show and hide actions from the provided `ToastHideAnimationSettings` and `ToastShowAnimationSettings` option of the `Animation` library. The default animation is given as `FadeIn` for showing the toast and `FadeOut` for hiding the toast. +The Blazor Toast component supports configurable animations for both showing and hiding notifications through ToastAnimationSettings, which contains ToastShowAnimationSettings and ToastHideAnimationSettings. Animation effects are selected from the ToastEffect enum. By default, the toast uses FadeIn for showing and FadeOut for hiding. -The following sample demonstrates some types of animations that suit toast. +The following example demonstrates several animation effects that can be applied to the Toast component. ```cshtml diff --git a/blazor/toast/config.md b/blazor/toast/config.md index 7f1fc6194b..f9df575795 100644 --- a/blazor/toast/config.md +++ b/blazor/toast/config.md @@ -9,13 +9,13 @@ documentation: ug # Configuring options in Blazor Toast Component -This section explains the steps required to customize the appearance of the toast using built-in APIs. +This section describes how to customize the appearance and behavior of the Toast component using built-in APIs. ## Title and content template -Toast can be created with the notification message. The message contains `Title` and content of the toasts. The title and contents are adaptable in any resolution. +Create a toast with a notification message that includes a Title and content. These values adapt to different screen sizes. -N> The Title or `Content` property can be given as HTML Element/element ID to a string that can be displayed as a toast. +N> Title and Content can be provided as plain text or HTML markup via string parameters. For richer layouts, use toast templates (for example, ToastTemplates or ContentTemplate) to define custom content. ```cshtml @@ -169,9 +169,9 @@ The dimensions of the toast can be set using the `Width` and `Height` properties By default, the toast can be rendered with `300px` width with `auto` height. -N> In mobile devices, the default width of the toast gets '100%' width of the page. When the toast width is set as '100%', the toast occupies full width and will be displayed at the top or bottom based on the position `Y` property. +N> On mobile devices, the default toast width is 100% of the page. When Width is set to 100%, the toast occupies the full width of the viewport and is displayed at the top or bottom based on the Position Y property. -Both the width and height properties allow setting pixels/numbers/percentage. The number value is considered as pixels. +Both Width and Height accept pixel values, percentages, or numbers. A numeric value is interpreted as pixels. ```cshtml @@ -276,9 +276,9 @@ Both the width and height properties allow setting pixels/numbers/percentage. Th ## Show or hide toast using service -You can initialize single toast instance and use it all over application by creating server. Refer below steps to create service to show toast from any page. +Initialize a single toast instance and reuse it across the application by creating a service. The following steps show how to create a service to display toast notifications from any page. -**Step 1**: Create a toast service to inject in pages to show toast messages from anywhere. Here, title and content can be passed to show the toast message. +**Step 1**: Create a toast service to inject into pages to show toast messages from anywhere. In this example, Title and Content are passed to display the toast message. ```c# public class ToastOption @@ -298,7 +298,7 @@ public class ToastService } ``` -**Step 2**: Add the `ToastService` to services collection in **Program.cs**. +**Step 2**: Add the ToastService to the services collection in Program.cs. {% tabs %} {% highlight c# tabtitle="~/Program.cs" hl_lines="13 14" %} @@ -342,7 +342,7 @@ app.Run(); {% endhighlight %} {% endtabs %} -**Step 3**: Create `ToastComponent` which shows `SfToast` based on `ToastService` notification. +**Step 3**: Create ToastComponent, which shows SfToast based on ToastService notifications. {% tabs %} {% highlight cshtml tabtitle="ToastComponent.razor" hl_lines="13 14" %} @@ -390,7 +390,7 @@ app.Run(); {% endhighlight %} {% endtabs %} -**Step 4**: Add `ToastComponent` create in above step in `MainLayout.razor`. +**Step 4**: Add the ToastComponent created in the above step to MainLayout.razor. {% tabs %} {% highlight cshtml tabtitle="MainLayout.razor" hl_lines="21" %} @@ -420,7 +420,7 @@ app.Run(); {% endhighlight %} {% endtabs %} -**Step 5**: Now, you can inject `ToastService` in any page and call `ToastService.ShowToast()` method to show toast notifications. +**Step 5**: Inject ToastService in any page and call ToastService.ShowToast to display toast notifications. {% tabs %} {% highlight cshtml tabtitle="RAZOR" hl_lines="3 10 11 12 13 14" %} @@ -445,5 +445,4 @@ app.Run(); {% endhighlight %} {% endtabs %} -N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Show-or-hide-toast-using-service-in-Blazor) - +N> [View the sample in GitHub](https://github.com/SyncfusionExamples/Show-or-hide-toast-using-service-in-Blazor) \ No newline at end of file diff --git a/blazor/toast/events.md b/blazor/toast/events.md index 49828ec259..559971cf4c 100644 --- a/blazor/toast/events.md +++ b/blazor/toast/events.md @@ -13,7 +13,7 @@ This section explains the list of events of the Toast component which will be tr ## Created -`Created` event triggers after the Toast gets created. +The Created event occurs after the Toast component is initialized. This is suitable for one-time setup or initial configuration. Refer to the ToastEvents.Created API for details. ```cshtml @@ -34,7 +34,7 @@ This section explains the list of events of the Toast component which will be tr ## Destroyed -`Destroyed` event triggers after the Toast gets destroyed. +The Destroyed event occurs when the Toast component is disposed. Use this event to release resources or unsubscribe from external services. Refer to the ToastEvents.Destroyed API for details. ```cshtml @@ -55,7 +55,7 @@ This section explains the list of events of the Toast component which will be tr ## Opened -`Opened` event triggers after the Toast shown on the target container. +The Opened event occurs after the toast is displayed in the target container. It is useful for post-render actions, such as focusing elements or starting animations. See ToastOpenArgs for available data. ```cshtml @@ -76,7 +76,7 @@ This section explains the list of events of the Toast component which will be tr ## OnOpen -`OnOpen` event triggers before the toast shown. +The OnOpen event occurs before the toast is displayed. Use it to modify content or settings just before render. See ToastBeforeOpenArgs for properties available during this phase. ```cshtml @@ -97,7 +97,7 @@ This section explains the list of events of the Toast component which will be tr ## Closed -`Closed` event triggers after the Toast hides. +The Closed event occurs after the toast is hidden. This event is useful for cleanup tasks or logging. See ToastCloseArgs for additional context. ```cshtml @@ -118,7 +118,7 @@ This section explains the list of events of the Toast component which will be tr ## OnClick -`OnClick` event triggers while clicking on the Toast. +The OnClick event occurs when the toast is clicked. Handle this event to perform actions such as navigation, analytics, or dismissing a toast. See ToastClickEventArgs for click details. ```cshtml diff --git a/blazor/toast/getting-started-webapp.md b/blazor/toast/getting-started-webapp.md index faec231e72..466ccf332a 100644 --- a/blazor/toast/getting-started-webapp.md +++ b/blazor/toast/getting-started-webapp.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Toast in Blazor Web App -This section briefly explains about how to include [Blazor Toast](https://www.syncfusion.com/blazor-components/blazor-toast) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section explains how to add the [Blazor Toast](https://www.syncfusion.com/blazor-components/blazor-toast) component to a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) or Visual Studio Code. {% tabcontents %} @@ -21,17 +21,17 @@ This section briefly explains about how to include [Blazor Toast](https://www.sy ## Create a new Blazor Web App in Visual Studio -You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application. +Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) when creating the Blazor Web App. ## Install Syncfusion® Blazor Notifications and Themes NuGet in the App -To add **Blazor Toast** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Notifications](https://www.nuget.org/packages/Syncfusion.Blazor.Notifications) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor Toast** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Notifications](https://www.nuget.org/packages/Syncfusion.Blazor.Notifications) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using `WebAssembly` or `Auto` render modes in a Blazor Web App, install the Syncfusion® Blazor NuGet packages in the Client project. For `Server` render mode, install them in the Server project. -Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, run the following Package Manager commands: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -42,7 +42,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the full list of packages and components. {% endtabcontent %} @@ -54,9 +54,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor Web App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application. +Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) when creating the Blazor Web App. For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. @@ -74,11 +74,11 @@ N> For more information on creating a **Blazor Web App** with various interactiv ## Install Syncfusion® Blazor Notifications and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using `WebAssembly` or `Auto` render modes in a Blazor Web App, install the Syncfusion® Blazor NuGet packages in the Client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Notifications](https://www.nuget.org/packages/Syncfusion.Blazor.Notifications) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure you are in the project directory that contains the `.csproj` file. +* Run the following commands to install the [Syncfusion.Blazor.Notifications](https://www.nuget.org/packages/Syncfusion.Blazor.Notifications) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and restore dependencies. {% tabs %} @@ -92,7 +92,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the full list of packages and components. {% endtabcontent %} @@ -102,10 +102,10 @@ N> Syncfusion® Blazor components are availa | Interactive Render Mode | Description | | -- | -- | -| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| -| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| +| WebAssembly or Auto | Open **~/_Imports.razor** file from the Client project.| +| Server | Open **~/_Imports.razor** file, which is located in the `Components` folder.| -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Notifications` namespace. +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Notifications` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -116,9 +116,9 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Notifications` namespace. {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. +Now, register the Syncfusion® Blazor service in the **~/Program.cs** file of your Blazor Web App. -If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in both Program.cs files (Server and Client) in your Blazor Web App. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -152,7 +152,7 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion® Blazor Service only in that **~/Program.cs** file. +If the **Interactive Render Mode** is set to `Server`, the project contains a single **~/Program.cs** file. In this case, register the Syncfusion® Blazor service only in that file. {% tabs %} {% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} @@ -175,7 +175,7 @@ var app = builder.Build(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: +The theme stylesheet and script are provided via NuGet as [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file, as shown below: ```html @@ -189,11 +189,11 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> See the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic for additional options to reference themes ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)). Also, refer to [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) for approaches to add script references in a Blazor application. ## Add Syncfusion® Blazor Toast component -Add the Syncfusion® Blazor Toast component in the **~Pages/.razor** file. If an interactivity location as `Per page/component` in the web app, define a render mode at the top of the `~Pages/.razor` component, as follows: +Add the Syncfusion® Blazor Toast component to a page in the **~/Pages** folder. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `~Pages/.razor` component as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | @@ -202,7 +202,7 @@ Add the Syncfusion® Blazor Toast component | | Server | @rendermode InteractiveServer | | | None | --- | -N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default. +N> If the **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto`, `WebAssembly`, or `Server`, the render mode is configured in the `App.razor` file by default. {% tabs %} {% highlight razor %} @@ -255,7 +255,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Toast component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor Toast component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/VDrzNiKXJRibajXZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toast Component](./images/blazor-toast.png)" %} @@ -268,4 +268,4 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- * [Getting Started with Syncfusion® Blazor for server-side in Visual Studio](../getting-started/blazor-server-side-visual-studio) * [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](../getting-started/blazor-server-side-dotnet-cli) -N> You can also explore our [Blazor Toast example](https://blazor.syncfusion.com/demos/toast/default-functionalities?theme=bootstrap5) that shows you how to render and configure the toast. \ No newline at end of file +N> You can also explore our [Blazor Toast example](https://blazor.syncfusion.com/demos/toast/default-functionalities?theme=bootstrap5) that demonstrates how to render and configure the toast. \ No newline at end of file diff --git a/blazor/toast/getting-started.md b/blazor/toast/getting-started.md index a8f7e91b84..0a980e9ee3 100644 --- a/blazor/toast/getting-started.md +++ b/blazor/toast/getting-started.md @@ -9,9 +9,9 @@ documentation: ug # Getting Started with Blazor Toast Component -This section briefly explains about how to include [Blazor Toast](https://www.syncfusion.com/blazor-components/blazor-toast) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This section explains how to add the [Blazor Toast](https://www.syncfusion.com/blazor-components/blazor-toast) component to a Blazor WebAssembly app using Visual Studio or Visual Studio Code. -To get start quickly with Blazor Toast component, check on this video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Toast) sample. +To get started quickly with the Blazor Toast component, watch the following video or explore the sample on [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Toast). {% youtube "youtube:https://www.youtube.com/watch?v=tMa7JvcfNcY"%} @@ -26,11 +26,11 @@ To get start quickly with Blazor Toast component, check on this video or [GitHub ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ## Install Syncfusion® Blazor Notifications and Themes NuGet in the App -To add **Blazor Toast** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Notifications](https://www.nuget.org/packages/Syncfusion.Blazor.Notifications) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor Toast** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Notifications](https://www.nuget.org/packages/Syncfusion.Blazor.Notifications) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following Package Manager commands: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -41,7 +41,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. {% endtabcontent %} @@ -53,9 +53,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application using the following commands in the integrated terminal (Ctrl+`). {% tabs %} @@ -71,8 +71,8 @@ cd BlazorApp ## Install Syncfusion® Blazor Notifications and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Notifications](https://www.nuget.org/packages/Syncfusion.Blazor.Notifications) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure you are in the project root directory where the `.csproj` file is located. +* Run the following commands to install the [Syncfusion.Blazor.Notifications](https://www.nuget.org/packages/Syncfusion.Blazor.Notifications) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) packages and restore dependencies. {% tabs %} @@ -86,7 +86,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. {% endtabcontent %} @@ -94,7 +94,7 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Notifications` namespace. +Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Notifications` namespaces. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -105,7 +105,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +Now, register the Syncfusion® Blazor service in the **~/Program.cs** file of the Blazor WebAssembly app. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -129,7 +129,7 @@ await builder.Build().RunAsync(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. +The theme stylesheet and script are provided via NuGet as [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of **~/index.html**. ```html @@ -138,11 +138,11 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> See the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover options for referencing themes ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)). Also, see [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) for different approaches to add script references in a Blazor application. ## Add Blazor Toast component -Add the Syncfusion® Blazor Toast component in the **~/Pages/Index.razor** file. +Add the Syncfusion® Blazor Toast component to **~/Pages/Index.razor**. {% tabs %} {% highlight cshtml %} @@ -186,7 +186,7 @@ Add the Syncfusion® Blazor Toast component {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Toast component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor Toast component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/VDrzNiKXJRibajXZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toast Component](./images/blazor-toast.png)" %} @@ -196,4 +196,4 @@ Add the Syncfusion® Blazor Toast component * [Getting Started with Syncfusion® Blazor Web Assembly App in Visual Studio or .NET CLI](../getting-started/blazor-webassembly-dotnet-cli) * [Getting Started with Syncfusion® Blazor Web App in Visual Studio or .NET CLI](../getting-started/blazor-server-side-visual-studio) -N> You can also explore our [Blazor Toast example](https://blazor.syncfusion.com/demos/toast/default-functionalities?theme=bootstrap5) that shows you how to render and configure the toast. +N> You can also explore the [Blazor Toast example](https://blazor.syncfusion.com/demos/toast/default-functionalities?theme=bootstrap5), which demonstrates how to render and configure the toast. \ No newline at end of file diff --git a/blazor/toast/how-to/access-specific-toast.md b/blazor/toast/how-to/access-specific-toast.md index 63642e333c..6279841135 100644 --- a/blazor/toast/how-to/access-specific-toast.md +++ b/blazor/toast/how-to/access-specific-toast.md @@ -9,9 +9,9 @@ documentation: ug # Access specific toast in Blazor Toast Component -In the toast, the particular toast can be accessed by passing the `Key` value in `ShowModes`, and the `Key` should be unique in `ShowModels`. To close the specific toast, you also need to pass the corresponding toast `Key` value in the `Hide` method. The added `Key` value can be got in the toast `Opened` and `Closed` event. +In the Toast component, an individual toast can be addressed by assigning a unique Key value in the ToastModel when showing the toast. To close a specific toast, pass the same Key to the HideAsync method. The assigned Key can be retrieved from the Opened and Closed events through the event arguments. -In the following example, Toast is closed by calling the `Hide` method with the key value that is returned in the `Opened` event +In the following example, each toast is closed by calling the HideAsync method with the Key value returned in the Opened event. ```cshtml diff --git a/blazor/toast/how-to/add-dynamic-template.md b/blazor/toast/how-to/add-dynamic-template.md index afa2529437..e5ad41da38 100644 --- a/blazor/toast/how-to/add-dynamic-template.md +++ b/blazor/toast/how-to/add-dynamic-template.md @@ -9,7 +9,7 @@ documentation: ug # Add dynamic template in Blazor Toast Component -Toast supports to change templates dynamically with displaying in multiple toasts. The toast properties can be changed while calling in the `Show` method. +The Blazor Toast component supports rendering dynamic templates for individual notifications. Provide a ContentTemplate in the ToastModel passed to ShowAsync to display a unique template for each toast. Toast properties can also be customized per toast when invoking ShowAsync, enabling different content and appearance across multiple toasts shown in sequence. ```cshtml diff --git a/blazor/toast/how-to/change-toast-content-dynamically.md b/blazor/toast/how-to/change-toast-content-dynamically.md index 8a4c3273d1..224601e4b3 100644 --- a/blazor/toast/how-to/change-toast-content-dynamically.md +++ b/blazor/toast/how-to/change-toast-content-dynamically.md @@ -9,7 +9,7 @@ documentation: ug # Show toast content dynamically in Blazor Toast Component -The Toast component supports to change its content dynamically while displaying in newest toasts. The toast content can be changed by updating property value, before calling in the `show` method. +The Blazor Toast component supports updating its content dynamically for newly displayed toasts. Update the bound Content value before invoking ShowAsync so that each toast reflects the latest content. If the content is changed immediately before showing a toast, a brief delay may be used to ensure the state update is applied prior to the ShowAsync call. ```cshtml diff --git a/blazor/toast/how-to/close-the-toast-with-click-tap.md b/blazor/toast/how-to/close-the-toast-with-click-tap.md index 625dd72ba6..569f9efef6 100644 --- a/blazor/toast/how-to/close-the-toast-with-click-tap.md +++ b/blazor/toast/how-to/close-the-toast-with-click-tap.md @@ -9,9 +9,9 @@ documentation: ug # Close the toast with click/tap in Blazor Toast Component -By default, the toasts are expired based on the `Timeout` value. The toast hiding process can be customized with click/tap action by setting the `ToastClickEventArgs` in the clicked callback function with static Toast. +By default, toasts automatically close based on the Timeout value. To close a toast when it is clicked or tapped, handle the OnClick event and set ClickToClose to true in the ToastClickEventArgs. To require user-initiated dismissal only, set Timeout to 0 to create a sticky toast and use click or tap to close it. -The following sample demonstrates the click or tap action in toast. +The following sample demonstrates closing a toast through a click or tap action. ```cshtml diff --git a/blazor/toast/how-to/prevent-toast-close-with-mobile-swipe.md b/blazor/toast/how-to/prevent-toast-close-with-mobile-swipe.md index 5d67414a53..5c4fd6acc9 100644 --- a/blazor/toast/how-to/prevent-toast-close-with-mobile-swipe.md +++ b/blazor/toast/how-to/prevent-toast-close-with-mobile-swipe.md @@ -9,9 +9,9 @@ documentation: ug # Prevent toast close with mobile swipe in Blazor Toast Component -The toast close can be prevented with mobile swipe action by setting `OnClose` argument cancel value to true while argument type is swipe. The following code shows how to prevent toast close with mobile swipe. +To prevent a toast from closing when swiped on mobile, handle the OnClose event and set the event argument’s Cancel property to true when RequestType equals "swipe". This cancels only swipe-initiated dismissal; other close actions (such as Timeout, close button, or programmatic HideAsync) continue to work unless handled separately. -The following sample demonstrates preventing toast close with mobile swipe element displaying with custom code blocks. +The following sample demonstrates preventing toast close on mobile swipe using the OnClose event. ```cshtml diff --git a/blazor/toast/how-to/show-different-types-of-toast.md b/blazor/toast/how-to/show-different-types-of-toast.md index aa3d061095..9de4067f09 100644 --- a/blazor/toast/how-to/show-different-types-of-toast.md +++ b/blazor/toast/how-to/show-different-types-of-toast.md @@ -9,14 +9,16 @@ documentation: ug # Show different types of toast in Blazor Toast Component -The Blazor toast has the following predefined styles that can be defined using the `CssClass` property for achieving different types of toast: +The Blazor Toast component provides predefined visual styles that can be applied using the CssClass property to represent different notification types. Use these styles to convey status and intent consistently across the application. | Class | Description | | -------- | -------- | -| `e-toast-success` | Represents a positive toast | -| `e-toast-info` | Represents an informative toast | -| `e-toast-warning` | Represents a toast with caution | -| `e-toast-danger` | Represents a negative toast | +| `e-toast-success` | Indicates a successful or completed action | +| `e-toast-info` | Conveys informational or neutral messages | +| `e-toast-warning` | Highlights cautionary messages that may require attention | +| `e-toast-danger` | Signals errors or critical issues | + +These classes style the toast appearance and can be combined with other custom classes as needed. Behavior such as Timeout, position, and content is configured independently. ```cshtml diff --git a/blazor/toast/how-to/show-multiple-toasts-in-various-positions.md b/blazor/toast/how-to/show-multiple-toasts-in-various-positions.md index 812b035fb8..9f60fd0ca6 100644 --- a/blazor/toast/how-to/show-multiple-toasts-in-various-positions.md +++ b/blazor/toast/how-to/show-multiple-toasts-in-various-positions.md @@ -9,7 +9,7 @@ documentation: ug # Show multiple toasts in various positions in Blazor Toast Component -By default, the positions of the new toasts are only updated after the visible toasts have been destroyed. If there is a need to display multiple toasts with different positions, initiate another toast. +To display toasts in different positions at the same time, create multiple SfToast instances, each configured with its own ToastPosition. Each toast instance manages its own queue and position independently. Changing the position affects only toasts created after the change; toasts that are already visible are not repositioned. The following sample demonstrates adding multiple toasts in different positions. diff --git a/blazor/toast/position.md b/blazor/toast/position.md index 4fde83e063..f2910e8138 100644 --- a/blazor/toast/position.md +++ b/blazor/toast/position.md @@ -1,7 +1,7 @@ --- layout: post title: Positioning in Blazor Toast Component | Syncfusion -description: Checkout and learn here all about positioning in Syncfusion Blazor Toast component and much more details. +description: Check out and learn about positioning in Syncfusion Blazor Toast component and much more details. platform: Blazor control: Toast documentation: ug @@ -9,26 +9,26 @@ documentation: ug # Positioning in Blazor Toast Component -The toast position can be updated based on predefined positions or customizable positions. The predefined position combinations are updated in the `X` and `Y` position properties. +The toast position can be defined using predefined alignments or customized using explicit offsets. Predefined positions are configured using the `X` (horizontal: Left, Center, Right) and `Y` (vertical: Top, Bottom) properties on the position settings of the Toast component. ## Predefined -`X` Positions +`X` positions * Left * Center * Right -`Y` Positions +`Y` positions * Top * Bottom -N> In multiple toast display, the new toast position will not be updated on dynamic change of property values until the old toast messages removed. The toast occupies full width when the width is set to '100%', so the X positions will not affect the changes when the width is '100%'. +N> When multiple toasts are shown, dynamic changes to position properties do not affect already displayed toasts; the new position is applied to subsequent toasts after the previous messages are removed. If the toast width is set to 100%, it stretches across the container and horizontal (`X`) alignment has no visible effect. ## Custom -Custom `X` and `Y` positions can be given as pixels/numbers/percentage. The number value is considered as pixels based on the top and left values updated in the toast. +Custom `X` and `Y` positions can be provided as pixel values, numbers, or percentages. Numeric values are interpreted as pixels and are applied as offsets from the top and left of the target container (or the viewport when no target is set). ```cshtml diff --git a/blazor/toast/style.md b/blazor/toast/style.md index e029eb77f2..c08d77e94e 100644 --- a/blazor/toast/style.md +++ b/blazor/toast/style.md @@ -1,7 +1,7 @@ --- layout: post title: Style and appearance in Blazor Toast Component | Syncfusion -description: Checkout and learn here all about style and appearance in Syncfusion Blazor Toast component and more. +description: Check out and learn about style and appearance in Syncfusion Blazor Toast component and more. platform: Blazor control: Toast documentation: ug @@ -13,7 +13,7 @@ The following content provides the exact CSS structure that can be used to modif ## Customizing the toast title -Use the following CSS to customize the default toast's content properties like font-family, font-size and color. +Use the following CSS to customize the toast title properties such as font family, font size, and color. ```css /* To change color, font family and font size */ @@ -26,7 +26,7 @@ Use the following CSS to customize the default toast's content properties like f ## Customizing the toast content -Use the following CSS to customize the default toast's content properties like font-family, font-size and color. +Use the following CSS to customize the toast content properties such as font family, font size, and color. ```css /* To change color, font family and font size */ @@ -39,7 +39,7 @@ Use the following CSS to customize the default toast's content properties like f ## Customizing the toast icon -Use the following CSS to customize the default toast icon color. +Use the following CSS to customize the default toast icon color. Increase selector specificity or scope by ID if a theme rule takes precedence. ```css /* To change icon color */ @@ -50,7 +50,7 @@ Use the following CSS to customize the default toast icon color. ## Customizing the toast background -Use the following CSS to customize the default toast's background color. +Use the following CSS to customize the toast background color. Consider contrast requirements for accessibility when choosing colors. ```css /* To change background color */ diff --git a/blazor/toast/template.md b/blazor/toast/template.md index 2f5abda400..f4660242b3 100644 --- a/blazor/toast/template.md +++ b/blazor/toast/template.md @@ -9,9 +9,9 @@ documentation: ug # Template in Blazor Toast Component -Configure templates to display within a header, content, and footer section of Toast. The header, content and footer templates can be defined as `HTML element` inside `ToastTemplates`. +Use templates to customize the layout and content of the Blazor Toast. A full-toast template can be defined by placing an HTML element inside ToastTemplates and specifying Template. This approach is ideal for static or markup-defined layouts. -The following code explains how to initialize a Toast with `Template`. +The following example initializes a Toast with a full template using Template within ToastTemplates. It also demonstrates positioning with ToastPosition. ```cshtml @@ -123,7 +123,7 @@ The following code explains how to initialize a Toast with `Template`. ``` -The Template can be given as a RenderFragment type for the `ContentTemplate` property when updating the toast templates dynamically. The below code block explains the string template. +For dynamic scenarios, a RenderFragment can be assigned to the ContentTemplate property when showing the toast programmatically. The following example demonstrates providing a RenderFragment to ContentTemplate via ShowAsync at runtime. ```cshtml diff --git a/blazor/toast/timeout.md b/blazor/toast/timeout.md index 3884a54e60..aeb7f1cb14 100644 --- a/blazor/toast/timeout.md +++ b/blazor/toast/timeout.md @@ -9,13 +9,12 @@ documentation: ug # Timeout in Blazor Toast Component -The toast can be expired based on the `Timeout` property. The toast can live till the time out reaches without user interaction, a time out value is considered as a millisecond. +The toast display duration is controlled by the `Timeout` property, expressed in milliseconds. A toast remains visible until the timeout elapses if there is no user interaction. -* The `Timeout` delay can be visually represented using [Progress Bar](./config#progress-bar). +* The `Timeout` duration can be visually represented using a [progress bar](./config#progress-bar). +* The `ExtendedTimeOut` property specifies how long the toast remains visible after the user hovers over it. -* The `ExtendedTimeOut` property determines how long the toast should be displayed after a user hovers over it. - -N> The process can be terminated by using the `ShowCloseButton` property for destroying the toast at any time. +N> Allow users to dismiss the toast at any time by enabling the `ShowCloseButton` property. ```cshtml @@ -88,7 +87,7 @@ N> The process can be terminated by using the `ShowCloseButton` property for des ## Static toast -Auto hiding can be prevented in a toast as visible like static by setting zero (`0`) value in the `Timeout` Property. +To prevent auto-hide and make the toast persist until dismissed, set the `Timeout` property to zero (`0`). ```cshtml From 039b218f37a35d526b756c022bb3b107b496a179 Mon Sep 17 00:00:00 2001 From: Ashwini-SF5049 Date: Thu, 9 Oct 2025 16:34:56 +0530 Subject: [PATCH 2/4] 983104: Updated --- blazor/toast/position.md | 2 +- blazor/toast/style.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/blazor/toast/position.md b/blazor/toast/position.md index f2910e8138..7d69bbc6f6 100644 --- a/blazor/toast/position.md +++ b/blazor/toast/position.md @@ -1,7 +1,7 @@ --- layout: post title: Positioning in Blazor Toast Component | Syncfusion -description: Check out and learn about positioning in Syncfusion Blazor Toast component and much more details. +description: Check out and learn about positioning in Syncfusion Blazor Toast component. platform: Blazor control: Toast documentation: ug diff --git a/blazor/toast/style.md b/blazor/toast/style.md index c08d77e94e..dd9d6737b3 100644 --- a/blazor/toast/style.md +++ b/blazor/toast/style.md @@ -1,7 +1,7 @@ --- layout: post title: Style and appearance in Blazor Toast Component | Syncfusion -description: Check out and learn about style and appearance in Syncfusion Blazor Toast component and more. +description: Check out and learn about style and appearance in Syncfusion Blazor Toast component. platform: Blazor control: Toast documentation: ug From a47e37eb62ac19638d67ec8b319126e3e371f00e Mon Sep 17 00:00:00 2001 From: Ashwini-SF5049 Date: Thu, 9 Oct 2025 16:53:11 +0530 Subject: [PATCH 3/4] 983104: Updated --- blazor/toast/position.md | 2 +- blazor/toast/style.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/blazor/toast/position.md b/blazor/toast/position.md index 7d69bbc6f6..d7b205f6d6 100644 --- a/blazor/toast/position.md +++ b/blazor/toast/position.md @@ -1,7 +1,7 @@ --- layout: post title: Positioning in Blazor Toast Component | Syncfusion -description: Check out and learn about positioning in Syncfusion Blazor Toast component. +description: Check out and learn here all about positioning in Syncfusion Blazor Toast component and much more details. platform: Blazor control: Toast documentation: ug diff --git a/blazor/toast/style.md b/blazor/toast/style.md index dd9d6737b3..d66bf7a409 100644 --- a/blazor/toast/style.md +++ b/blazor/toast/style.md @@ -1,7 +1,7 @@ --- layout: post title: Style and appearance in Blazor Toast Component | Syncfusion -description: Check out and learn about style and appearance in Syncfusion Blazor Toast component. +description: Check out and learn here all about style and appearance in Syncfusion Blazor Toast component and more. platform: Blazor control: Toast documentation: ug From 695dac61aa42bb7f06b232827b2e719382fff173 Mon Sep 17 00:00:00 2001 From: Ashwini-SF5049 Date: Fri, 10 Oct 2025 11:51:27 +0530 Subject: [PATCH 4/4] 983104: Updated --- blazor/toast/action-buttons.md | 26 +- blazor/toast/animation.md | 116 ++++--- blazor/toast/config.md | 306 +++++++++--------- blazor/toast/events.md | 78 ++--- blazor/toast/getting-started-webapp.md | 143 ++++---- blazor/toast/getting-started.md | 107 +++--- blazor/toast/how-to/access-specific-toast.md | 84 +++-- blazor/toast/how-to/add-dynamic-template.md | 34 +- .../change-toast-content-dynamically.md | 19 +- .../how-to/close-the-toast-with-click-tap.md | 26 +- .../prevent-toast-close-with-mobile-swipe.md | 52 ++- .../how-to/show-different-types-of-toast.md | 53 +-- ...ow-multiple-toasts-in-various-positions.md | 33 +- blazor/toast/position.md | 57 ++-- blazor/toast/style.md | 75 +++-- blazor/toast/template.md | 147 +++------ blazor/toast/timeout.md | 72 +++-- 17 files changed, 697 insertions(+), 731 deletions(-) diff --git a/blazor/toast/action-buttons.md b/blazor/toast/action-buttons.md index 7f5730810f..318668ca63 100644 --- a/blazor/toast/action-buttons.md +++ b/blazor/toast/action-buttons.md @@ -9,26 +9,27 @@ documentation: ug # Action Buttons in Blazor Toast Component -Add action buttons to the Toast component by defining the ToastButtons collection with one or more ToastButton items. Each button can include its own OnClick callback to perform actions such as dismissing the toast or triggering custom logic. +Add action buttons to the Blazor Toast component by defining the **ToastButtons** collection with one or more **ToastButton** items. Each button can include its own **OnClick** callback to perform actions such as dismissing the toast or triggering custom logic. -In the following example, toast buttons are configured using the ToastButtons collection, and both buttons invoke an OnClick handler to hide the toast. +For more details, see: +- Blazor Toast overview: https://blazor.syncfusion.com/documentation/toast/ +- Toast events: https://blazor.syncfusion.com/documentation/toast/events/ ```cshtml - @using Syncfusion.Blazor.Buttons @using Syncfusion.Blazor.Notifications - - + +
- Show Toast + Show Toast
@@ -42,32 +43,27 @@ In the following example, toast buttons are configured using the ToastButtons co margin: 0 10px 0 0; width: 60px; } - - #elementToastTime .e-toast-message { - padding: 10px; - } @code { - SfToast ToastObj; + private SfToast ToastObj; private string ToastContent { get; set; } = "Thanks for the update!"; private async Task ShowToast() { - await this.ToastObj.ShowAsync(); + await ToastObj.ShowAsync(); } private async Task HideToast() { - await this.ToastObj.HideAsync(); + await ToastObj.HideAsync(); } } - ``` ![Blazor Toast with Action button](./images/blazor-toast-action-button.png) ## See Also -* [Configuring options](./config) \ No newline at end of file +- [Configuring options](./config) \ No newline at end of file diff --git a/blazor/toast/animation.md b/blazor/toast/animation.md index ccf26814c3..bbf8076e64 100644 --- a/blazor/toast/animation.md +++ b/blazor/toast/animation.md @@ -9,17 +9,22 @@ documentation: ug # Animation in Blazor Toast Component -The Blazor Toast component supports configurable animations for both showing and hiding notifications through ToastAnimationSettings, which contains ToastShowAnimationSettings and ToastHideAnimationSettings. Animation effects are selected from the ToastEffect enum. By default, the toast uses FadeIn for showing and FadeOut for hiding. +The Blazor Toast component supports configurable animations for both showing and hiding notifications through **ToastAnimationSettings**, which contains **ToastShowAnimationSettings** and **ToastHideAnimationSettings**. Animation effects are selected from the **ToastEffect** enum. By default, the toast uses FadeIn for showing and FadeOut for hiding. + +For more details, see: +- Blazor Toast overview: https://blazor.syncfusion.com/documentation/toast/ +- Toast events: https://blazor.syncfusion.com/documentation/toast/events/ +- SfToast API: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.SfToast.html +- ToastEffect enum: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.ToastEffect.html The following example demonstrates several animation effects that can be applied to the Toast component. ```cshtml - @using Syncfusion.Blazor.Buttons @using Syncfusion.Blazor.DropDowns @using Syncfusion.Blazor.Notifications - + @@ -31,82 +36,68 @@ The following example demonstrates several animation effects that can be applied
- +
- + -
- +
+
- +
- Show Toast + +
+ Show Toast +
- - @code { - SfToast ToastObj; + private SfToast ToastObj; private ToastEffect ShowAnimation = ToastEffect.FadeIn; private ToastEffect HideAnimation = ToastEffect.FadeOut; - private string ToastContent = "You have a new friend request yet to accept"; + private string ToastContent = "A new friend request is pending."; public class DropDownFields { - public string id { get; set; } - public string text { get; set; } + public string id { get; set; } = string.Empty; + public string text { get; set; } = string.Empty; } - private List Effects = new List() -{ - new DropDownFields(){ id= "FadeIn", text= "Fade In" }, - new DropDownFields(){ id= "FadeZoomIn", text= "Fade Zoom In" }, - new DropDownFields(){ id= "FadeZoomOut", text= "Fade Zoom Out" }, - new DropDownFields(){ id= "FlipLeftDownIn", text= "Flip Left Down In" }, - new DropDownFields(){ id= "FlipLeftDownOut", text= "Flip Left Down Out" }, - new DropDownFields(){ id= "FlipLeftUpIn", text= "Flip Left Up In" }, - new DropDownFields(){ id= "FlipRightDownIn", text= "Flip Right Up In" }, - new DropDownFields(){ id= "FlipRightDownOut", text= "Flip Right Down Out" }, - new DropDownFields(){ id= "FlipRightUpIn", text= "Flip Right Up In" }, - new DropDownFields(){ id= "FlipRightUpOut", text= "Flip Right Up Out" }, - new DropDownFields(){ id= "SlideBottomIn", text= "Slide Bottom In" }, - new DropDownFields(){ id= "SlideBottomOut", text= "Slide Bottom Out" }, - new DropDownFields(){ id= "SlideLeftIn", text= "Slide Left In" }, - new DropDownFields(){ id= "SlideLeftOut", text= "Slide Left Out" }, - new DropDownFields(){ id= "SlideRightIn", text= "Slide Right In" }, - new DropDownFields(){ id= "SlideRightOut", text= "Slide Right Out" }, - new DropDownFields(){ id= "SlideTopIn", text= "Slide Top In" }, - new DropDownFields(){ id= "ZoomIn", text= "Zoom In" }, - new DropDownFields(){ id= "ZoomOut", text= "Zoom Out" } + private List Effects = new List + { + new DropDownFields { id = "FadeIn", text = "Fade In" }, + new DropDownFields { id = "FadeZoomIn", text = "Fade Zoom In" }, + new DropDownFields { id = "FadeZoomOut", text = "Fade Zoom Out" }, + new DropDownFields { id = "FlipLeftDownIn", text = "Flip Left Down In" }, + new DropDownFields { id = "FlipLeftDownOut", text = "Flip Left Down Out" }, + new DropDownFields { id = "FlipLeftUpIn", text = "Flip Left Up In" }, + new DropDownFields { id = "FlipRightDownIn", text = "Flip Right Down In" }, + new DropDownFields { id = "FlipRightDownOut", text = "Flip Right Down Out" }, + new DropDownFields { id = "FlipRightUpIn", text = "Flip Right Up In" }, + new DropDownFields { id = "FlipRightUpOut", text = "Flip Right Up Out" }, + new DropDownFields { id = "SlideBottomIn", text = "Slide Bottom In" }, + new DropDownFields { id = "SlideBottomOut", text = "Slide Bottom Out" }, + new DropDownFields { id = "SlideLeftIn", text = "Slide Left In" }, + new DropDownFields { id = "SlideLeftOut", text = "Slide Left Out" }, + new DropDownFields { id = "SlideRightIn", text = "Slide Right In" }, + new DropDownFields { id = "SlideRightOut", text = "Slide Right Out" }, + new DropDownFields { id = "SlideTopIn", text = "Slide Top In" }, + new DropDownFields { id = "ZoomIn", text = "Zoom In" }, + new DropDownFields { id = "ZoomOut", text = "Zoom Out" } }; private async Task ShowToast() @@ -116,15 +107,18 @@ The following example demonstrates several animation effects that can be applied private void ShowAnimationChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs args) { - this.ShowAnimation = (ToastEffect)System.Enum.Parse(typeof(ToastEffect), args.Value); + ShowAnimation = (ToastEffect)System.Enum.Parse(typeof(ToastEffect), args.Value); StateHasChanged(); } private void HideAnimationChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs args) { - this.HideAnimation = (ToastEffect)System.Enum.Parse(typeof(ToastEffect), args.Value); + HideAnimation = (ToastEffect)System.Enum.Parse(typeof(ToastEffect), args.Value); StateHasChanged(); } } - -``` \ No newline at end of file +``` +Preview of the code snippet: +- Selecting animation types in the dropdowns configures the show and hide effects for the toast. +- Clicking Show Toast displays a toast at the bottom-right using the selected show animation; when dismissed, the selected hide animation is applied. +- Defaults are Fade In for showing and Fade Out for hiding. \ No newline at end of file diff --git a/blazor/toast/config.md b/blazor/toast/config.md index f9df575795..e01e7509f5 100644 --- a/blazor/toast/config.md +++ b/blazor/toast/config.md @@ -9,117 +9,125 @@ documentation: ug # Configuring options in Blazor Toast Component -This section describes how to customize the appearance and behavior of the Toast component using built-in APIs. +This section describes how to customize the appearance and behavior of the Blazor Toast component using built-in APIs. + +For reference: +- Blazor Toast overview: https://blazor.syncfusion.com/documentation/toast/ +- SfToast API: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.SfToast.html +- Toast events: https://blazor.syncfusion.com/documentation/toast/events/ +- Positioning: https://blazor.syncfusion.com/documentation/toast/position ## Title and content template -Create a toast with a notification message that includes a Title and content. These values adapt to different screen sizes. +Create a toast with a notification message that includes a title and content. These values adapt to different screen sizes. -N> Title and Content can be provided as plain text or HTML markup via string parameters. For richer layouts, use toast templates (for example, ToastTemplates or ContentTemplate) to define custom content. +N> Title and Content can be provided as plain text or HTML markup via string parameters. For richer layouts, use toast templates (for example, **ToastTemplates** or **ContentTemplate**) to define custom content. ```cshtml - @using Syncfusion.Blazor.Buttons @using Syncfusion.Blazor.Notifications - +
-
- Show Toast +
+ Show Toast
- - @code { - SfToast ToastObj; + private SfToast ToastObj; - private string ToastContent = "Conference Room 01 / Building 135 10:00 AM-10:30 AM"; + private string ToastContent = "Conference Room 01 / Building 135 — 10:00 AM–10:30 AM"; private async Task ShowToast() { - await this.ToastObj.ShowAsync(); + await ToastObj.ShowAsync(); } } - ``` ![Blazor Toast with Button](./images/blazor-toast-with-button.png) ## Specifying custom target -By default, the toast can be rendered in the document body. The target position can be changed for the toast rendering using the `Target` property. Based on the target, the `Position` will be updated. +By default, the toast is rendered in the document body. The target container can be changed using the **Target** property. Based on the target, the **ToastPosition** will be applied relative to that container. + +- Target property: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.SfToast.html#Syncfusion_Blazor_Notifications_SfToast_Target +- Position docs: https://blazor.syncfusion.com/documentation/toast/position ## Close button -By default, the `ShowCloseButton` is not enabled. It can be enabled by setting the true value. Before expiring the toast, use this button to close or destroy toasts manually. +By default, the **ShowCloseButton** property is disabled. Enable it to display a close button that dismisses the toast before it expires. + +- ShowCloseButton API: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.SfToast.html#Syncfusion_Blazor_Notifications_SfToast_ShowCloseButton ## Progress bar -By default, the `ShowProgressBar` is not enabled. If it is enabled, it can visually indicate how long it gets for the toast to expire. Based on the `Timeout` property, progress bar will appear. +By default, the **ShowProgressBar** property is disabled. When enabled, it visually indicates the remaining time until the toast expires, based on the **Timeout** property. + +- ShowProgressBar API: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.SfToast.html#Syncfusion_Blazor_Notifications_SfToast_ShowProgressBar +- Timeout API: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.SfToast.html#Syncfusion_Blazor_Notifications_SfToast_Timeout ### Progress bar direction -By default, the `ProgressDirection` is set to "Rtl" and it will appear from right to left direction. The progressDirection can be changed to "Ltr" to make it appear from left to right direction. +By default, **ProgressDirection** is "Rtl" and appears from right to left. Set **ProgressDirection** to "Ltr" to display from left to right. + +- ProgressDirection API: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.SfToast.html#Syncfusion_Blazor_Notifications_SfToast_ProgressDirection ## Newest on top -By default, the newly created toasts will append next with existing toasts. The sequence can be changed like inserting before the toast by enabling the `NewestOnTop`. +By default, newly created toasts are appended after existing toasts. Enable **NewestOnTop** to insert new toasts before existing toasts. -Here, the following sample demonstrates the combination of the `Target`, `ShowCloseButton`, `ShowProgressBar` and `NewestOnTop` properties in toast. +- NewestOnTop API: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.SfToast.html#Syncfusion_Blazor_Notifications_SfToast_NewestOnTop -```cshtml +The following sample demonstrates the combination of **Target**, **ShowCloseButton**, **ShowProgressBar**, and **NewestOnTop** properties. +```cshtml @using Syncfusion.Blazor.Buttons @using Syncfusion.Blazor.Notifications
- +
-
- Show Toast +
+ Show Toast
+

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

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

2 Mail has received

}, - new ToastModel() { ContentTemplate = @

User Guest Logged in

}, - new ToastModel() { ContentTemplate = @

Logging in as Guest

}, - new ToastModel() { ContentTemplate = @

Ticket has reserved

} + new ToastModel() { ContentTemplate = @

2 Mail has received

}, + new ToastModel() { ContentTemplate = @

User Guest Logged in

}, + new ToastModel() { ContentTemplate = @

Logging in as Guest

}, + new ToastModel() { ContentTemplate = @

Ticket has reserved

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


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

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

profile image

"; private async Task ShowToast() { - await this.ToastObj.ShowAsync(); - } - - private void OnValChange() - { - this.ToastTimeOut = int.Parse(this.TextBoxObj.Value); - this.TextBoxVal = this.TextBoxObj.Value; - this.StateHasChanged(); + if (!int.TryParse(TextBoxVal, out var parsed)) + { + parsed = 0; + } + ToastTimeOut = parsed; + await ToastObj.ShowAsync(); } private async Task HideToast() { - await this.ToastObj.HideAsync(); + await ToastObj.HideAsync(); } } - ``` -![TimeOut in Blazor Toast](./images/blazor-toast-timeout.png) +![Timeout in Blazor Toast](./images/blazor-toast-timeout.png) ## Static toast -To prevent auto-hide and make the toast persist until dismissed, set the `Timeout` property to zero (`0`). +To prevent auto-hide and keep the toast visible until dismissed, set the `Timeout` property to zero (`0`). ```cshtml - @using Syncfusion.Blazor.Buttons @using Syncfusion.Blazor.Notifications - +
- Show Toast + Show Toast
@@ -112,16 +116,14 @@ To prevent auto-hide and make the toast persist until dismissed, set the `Timeou @code { - SfToast ToastObj; - - private string ToastContent = "You have a new friend request yet to accept"; + private SfToast ToastObj; + private string ToastContent = "This toast remains visible until dismissed."; private async Task ShowToast() { - await this.ToastObj.ShowAsync(); + await ToastObj.ShowAsync(); } } - ``` -![TimeOut in Blazor Static Toast](./images/blazor-static-toast-timeout.png) \ No newline at end of file +![Timeout in Blazor Static Toast](./images/blazor-static-toast-timeout.png) \ No newline at end of file