diff --git a/blazor/linear-gauge/accessibility.md b/blazor/linear-gauge/accessibility.md index a8e5916e52..76ef563334 100644 --- a/blazor/linear-gauge/accessibility.md +++ b/blazor/linear-gauge/accessibility.md @@ -1,7 +1,7 @@ --- layout: post -title: Accessibility in Blazor Linear Gauge Component | Syncfusion -description: Checkout and learn here all about accessibility in Syncfusion Blazor Linear Gauge component and more. +title: Accessibility in Blazor Linear Gauge Component | Syncfusion® +description: Checkout and learn here all the features about accessibility in Blazor Linear Gauge component and more. platform: Blazor control: Linear Gauge documentation: ug diff --git a/blazor/linear-gauge/animation.md b/blazor/linear-gauge/animation.md index bacd129479..9517b4182f 100644 --- a/blazor/linear-gauge/animation.md +++ b/blazor/linear-gauge/animation.md @@ -1,7 +1,7 @@ --- layout: post -title: Animation in Blazor Linear Gauge Component | Syncfusion -description: Checkout and learn here all about animation in Syncfusion Blazor Linear Gauge component and much more details. +title: Animation in Blazor Linear Gauge Component | Syncfusion® +description: Checkout and learn here all the features about animation in Blazor Linear Gauge component and much more details. platform: Blazor control: Linear Gauge documentation: ug diff --git a/blazor/linear-gauge/annotations.md b/blazor/linear-gauge/annotations.md index 433e827464..634ce98abe 100644 --- a/blazor/linear-gauge/annotations.md +++ b/blazor/linear-gauge/annotations.md @@ -1,7 +1,7 @@ --- layout: post -title: Annotations in Blazor Linear Gauge Component | Syncfusion -description: Checkout and learn here all about annotations in Syncfusion Blazor Linear Gauge component and much more. +title: Annotations in Blazor Linear Gauge Component | Syncfusion® +description: Checkout and learn here all the features about annotations in Blazor Linear Gauge component and much more. platform: Blazor control: Linear Gauge documentation: ug diff --git a/blazor/linear-gauge/axis.md b/blazor/linear-gauge/axis.md index 2ae830c0a1..af142976f0 100644 --- a/blazor/linear-gauge/axis.md +++ b/blazor/linear-gauge/axis.md @@ -1,7 +1,7 @@ --- layout: post -title: Axes in Blazor Linear Gauge Component | Syncfusion -description: Checkout and learn here all about axes in Syncfusion Blazor Linear Gauge component and much more details. +title: Axes in Blazor Linear Gauge Component | Syncfusion® +description: Checkout and learn here all the features about axes in Blazor Linear Gauge component and much more details. platform: Blazor control: Linear Gauge documentation: ug diff --git a/blazor/linear-gauge/events.md b/blazor/linear-gauge/events.md index cf995c0edb..80e56a0abb 100644 --- a/blazor/linear-gauge/events.md +++ b/blazor/linear-gauge/events.md @@ -1,7 +1,7 @@ --- layout: post -title: Events in Blazor Linear Gauge Component | Syncfusion -description: Checkout and learn here all about events in Syncfusion Blazor Linear Gauge component and much more details. +title: Events in Blazor Linear Gauge Component | Syncfusion® +description: Checkout and learn here all about the features and events in Blazor Linear Gauge component and much more details. platform: Blazor control: Linear Gauge documentation: ug diff --git a/blazor/linear-gauge/getting-started-webapp.md b/blazor/linear-gauge/getting-started-webapp.md index 29c846e07a..e2a7661b16 100644 --- a/blazor/linear-gauge/getting-started-webapp.md +++ b/blazor/linear-gauge/getting-started-webapp.md @@ -1,7 +1,7 @@ --- layout: post -title: Getting started with Syncfusion LinearGauge in Blazor Web App -description: Check out the documentation for getting started with Syncfusion Blazor LinearGauge Component Components in Web App. +title: Getting started with LinearGauge in Blazor Web App | Syncfusion® +description: Check out the documentation for getting started with Blazor LinearGauge Component Components in Web App. platform: Blazor control: LinearGauge documentation: ug @@ -11,7 +11,7 @@ documentation: ug The Blazor LinearGauge is an ideal component for visualizing numeric values in a linear scale with features like multiple axes, different orientations, and more. -This section briefly explains about how to include [Syncfusion® Blazor LinearGauge](https://www.syncfusion.com/blazor-components/blazor-linear-gauge) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This section briefly explains about how to include [Blazor LinearGauge](https://www.syncfusion.com/blazor-components/blazor-linear-gauge) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -23,7 +23,7 @@ This section briefly explains about how to include [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. +Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. {% endtabcontent %} @@ -35,7 +35,7 @@ Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https: ## Create a new Blazor Web App in Visual Studio Code -Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. +Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands in the integrated terminal (Ctrl+`): @@ -87,7 +87,7 @@ cd BlazorWebApp.Client N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -## Install Syncfusion® Blazor packages +## Install required Blazor packages Install the [Syncfusion.Blazor.LinearGauge](https://www.nuget.org/packages/Syncfusion.Blazor.LinearGauge) NuGet packages using one of the following methods. @@ -125,9 +125,9 @@ After the packages are installed, open the **~/_Imports.razor** file in the clie {% endhighlight %} {% endtabs %} -## Register Syncfusion® Blazor service +## Register Blazor service -Register the Syncfusion Blazor service in the **Program.cs** file of your Blazor Web App. +Register the Blazor service in the **Program.cs** file of your Blazor Web App. {% tabs %} {% highlight c# tabtitle="Program.cs" %} @@ -141,7 +141,7 @@ builder.Services.AddSyncfusionBlazor(); {% endhighlight %} {% endtabs %} -N> If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in **Program.cs** files of both the server and client projects in your Blazor Web App. +N> If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Blazor service in **Program.cs** files of both the server and client projects in your Blazor Web App. ## Add script resources @@ -155,7 +155,7 @@ The script can be accessed from NuGet through [Static Web Assets](https://blazor N> 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. -## Add Syncfusion® Blazor Linear Gauge component +## Add Blazor Linear Gauge component * Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Blazor Linear Gauge component inside the razor file. * If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the razor file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). @@ -278,8 +278,8 @@ The range is used to specify a group of scale values in the gauge. You can set t ## See also -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +* [Getting Started with Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) -* [Getting Started with Syncfusion® Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) +* [Getting Started with Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +* [Getting Started with Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) diff --git a/blazor/linear-gauge/getting-started-with-server-app.md b/blazor/linear-gauge/getting-started-with-server-app.md index 6a28e5e53a..915b7b7c2f 100644 --- a/blazor/linear-gauge/getting-started-with-server-app.md +++ b/blazor/linear-gauge/getting-started-with-server-app.md @@ -1,7 +1,7 @@ --- layout: post -title: Getting started with Syncfusion LinearGauge in Blazor Server App -description: Check out the documentation for getting started with Syncfusion Blazor LinearGauge Component Components in Server App. +title: Getting started with LinearGauge in Blazor Server App | Syncfusion® +description: Check out the documentation for getting started with Blazor LinearGauge Component Components in Server App. platform: Blazor control: LinearGauge documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Linear Gauge Component in Server App -This section briefly explains about how to include [Syncfusion® Blazor Linear Gauge](https://www.syncfusion.com/blazor-components/blazor-linear-gauge) component in a Blazor Server App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This section briefly explains about how to include [Blazor Linear Gauge](https://www.syncfusion.com/blazor-components/blazor-linear-gauge) component in a Blazor Server App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -21,7 +21,7 @@ This section briefly explains about how to include [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation. +Create a **Blazor Server App** by using the **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation. {% endtabcontent %} @@ -33,7 +33,7 @@ Create a **Blazor Server App** by using the **Blazor Web App** template in Visua ## Create a new Blazor App in Visual Studio Code -Create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation. +Create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation. Alternatively, create a Server application by using the following command in the integrated terminal (Ctrl+`). @@ -83,7 +83,7 @@ cd BlazorApp N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Server App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -## Install Syncfusion® Blazor packages +## Install required Blazor packages Install [Syncfusion.Blazor.LinearGauge](https://www.nuget.org/packages/Syncfusion.Blazor.LinearGauge/) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. @@ -112,9 +112,9 @@ After the packages are installed, open the **~/_Imports.razor** file and import {% endhighlight %} {% endtabs %} -## Register Syncfusion® Blazor service +## Register Blazor service -Register the Syncfusion® Blazor service in the **Program.cs** file of your Blazor Server App. +Register the Blazor service in the **Program.cs** file of your Blazor Server App. {% tabs %} {% highlight C# tabtitle="Program.cs" %} @@ -140,9 +140,9 @@ The script can be accessed from NuGet through [Static Web Assets](https://blazor N> 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. -## Add Syncfusion® Blazor LinearGauge component +## Add Blazor LinearGauge component -Add the Syncfusion® Blazor LinearGauge component in the **~/Components/Pages/Home.razor** file. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `~Pages/Home.razor` file. +Add the Blazor LinearGauge component in the **~/Components/Pages/Home.razor** file. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `~Pages/Home.razor` file. N> If the Interactivity Location is set to `Global`, the render mode is automatically configured in the `App.razor` file by default. @@ -171,7 +171,7 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or +F5 (macOS) to launch the application. This will render the Syncfusion® Blazor LinearGauge component in the default web browser. +* Press Ctrl+F5 (Windows) or +F5 (macOS) to launch the application. This will render the Blazor LinearGauge component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/LjrzZCLkTTyPJnAO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor LinearGauge Component](images/blazor-linear-gauge-component.webp)" %} @@ -256,8 +256,8 @@ The range is used to specify a group of scale values in the gauge. You can set t ## See also -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +* [Getting Started with Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) -* [Getting Started with Syncfusion® Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) +* [Getting Started with Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +* [Getting Started with Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) diff --git a/blazor/linear-gauge/getting-started.md b/blazor/linear-gauge/getting-started.md index a10cc0c541..26c1d34599 100644 --- a/blazor/linear-gauge/getting-started.md +++ b/blazor/linear-gauge/getting-started.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting Started with Blazor LinearGauge Component | Syncfusion +title: Getting Started with Blazor LinearGauge Component | Syncfusion® description: Checkout and learn about getting started with Blazor LinearGauge component in Blazor WebAssembly Application. platform: Blazor control: LinearGauge @@ -11,7 +11,7 @@ documentation: ug The Blazor LinearGauge is an ideal component for visualizing numeric values in a linear scale with features like multiple axes, different orientations, and more. -This section briefly explains about how to include [Syncfusion® Blazor LinearGauge](https://www.syncfusion.com/blazor-components/blazor-linear-gauge) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This section briefly explains about how to include [Blazor LinearGauge](https://www.syncfusion.com/blazor-components/blazor-linear-gauge) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -23,7 +23,7 @@ This section briefly explains about how to include [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. {% endtabcontent %} @@ -35,7 +35,7 @@ Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates ## 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-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. Alternatively, create a WebAssembly application by using the following command in the integrated terminal (Ctrl+`). @@ -83,7 +83,7 @@ cd BlazorApp {% endtabcontents %} -## Install Syncfusion® Blazor packages +## Install required Blazor packages Install [Syncfusion.Blazor.LinearGauge](https://www.nuget.org/packages/Syncfusion.Blazor.LinearGauge/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. @@ -113,9 +113,9 @@ After the packages are installed, open the **~/_Imports.razor** file and import {% endhighlight %} {% endtabs %} -## Register Syncfusion® Blazor service +## Register Blazor service -Register the Syncfusion® Blazor service in the **Program.cs** file of your Blazor WebAssembly App. +Register the Blazor service in the **Program.cs** file of your Blazor WebAssembly App. {% tabs %} {% highlight C# tabtitle="Program.cs" %} @@ -143,9 +143,9 @@ 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 the 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 the Blazor application. -## Add Syncfusion® Blazor LinearGauge component +## Add Blazor LinearGauge component -Add the Syncfusion® Blazor LinearGauge component in the **~/Pages/Index.razor** file. +Add the Blazor LinearGauge component in the **~/Pages/Index.razor** file. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -163,7 +163,7 @@ Add the Syncfusion® Blazor LinearGauge comp {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or +F5 (macOS) to launch the application. This will render the Syncfusion® Blazor LinearGauge component in the default web browser. +* Press Ctrl+F5 (Windows) or +F5 (macOS) to launch the application. This will render the Blazor LinearGauge component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/LjrzZCLkTTyPJnAO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor LinearGauge Component](images/blazor-linear-gauge-component.webp)" %} @@ -248,8 +248,8 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- ## See also -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +* [Getting Started with Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) -* [Getting Started with Syncfusion® Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) +* [Getting Started with Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) +* [Getting Started with Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) diff --git a/blazor/linear-gauge/how-to/place-gauge-inside-other-components.md b/blazor/linear-gauge/how-to/place-gauge-inside-other-components.md index 3ecac85427..67d7c83567 100644 --- a/blazor/linear-gauge/how-to/place-gauge-inside-other-components.md +++ b/blazor/linear-gauge/how-to/place-gauge-inside-other-components.md @@ -1,6 +1,6 @@ --- layout: post -title: How to place Linear Gauge inside other components | Syncfusion +title: How to place Linear Gauge inside other components | Syncfusion® description: Learn here about how to place the Linear Gauge inside other components like Dashboard Layout, Tab, Dialog and Accordion. platform: Blazor control: Linear Gauge diff --git a/blazor/linear-gauge/internationalization.md b/blazor/linear-gauge/internationalization.md index 4e5f72fa94..5722ce8cd0 100644 --- a/blazor/linear-gauge/internationalization.md +++ b/blazor/linear-gauge/internationalization.md @@ -1,7 +1,7 @@ --- layout: post -title: Globalization in Blazor Linear Gauge Component | Syncfusion -description: Checkout and learn here all about globalization in Syncfusion Blazor Linear Gauge component and more. +title: Globalization in Blazor Linear Gauge Component | Syncfusion® +description: Checkout and learn here all the features about globalization in Blazor Linear Gauge component and more. platform: Blazor control: Linear Gauge documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Globalization in Blazor Linear Gauge Component -The localization allows to localize the default text content in the Blazor component. For more information about localization, refer [here](https://blazor.syncfusion.com/documentation/common/localization/). +The localization allows to localize the default text content in the Blazor component. For more information about localization, refer [here](https://blazor.syncfusion.com/documentation/common/localization). ## Globalization diff --git a/blazor/linear-gauge/linear-gauge-appearance.md b/blazor/linear-gauge/linear-gauge-appearance.md index e060c64971..defe80c8c5 100644 --- a/blazor/linear-gauge/linear-gauge-appearance.md +++ b/blazor/linear-gauge/linear-gauge-appearance.md @@ -1,7 +1,7 @@ --- layout: post -title: Appearance in Blazor Linear Gauge Component | Syncfusion -description: Checkout and learn here all about appearance in Syncfusion Blazor Linear Gauge component and much more. +title: Appearance in Blazor Linear Gauge Component | Syncfusion® +description: Checkout and learn here all the features about appearance in Blazor Linear Gauge component and much more. platform: Blazor control: Linear Gauge documentation: ug diff --git a/blazor/linear-gauge/linear-gauge-dimensions.md b/blazor/linear-gauge/linear-gauge-dimensions.md index 6582000967..8e0619871b 100644 --- a/blazor/linear-gauge/linear-gauge-dimensions.md +++ b/blazor/linear-gauge/linear-gauge-dimensions.md @@ -1,7 +1,7 @@ --- layout: post -title: Dimensions in Blazor Linear Gauge Component | Syncfusion -description: Checkout and learn here all about dimensions in Syncfusion Blazor Linear Gauge component and much more. +title: Dimensions in Blazor Linear Gauge Component | Syncfusion® +description: Checkout and learn here all the features about dimensions in Blazor Linear Gauge component and much more. platform: Blazor control: Linear Gauge documentation: ug diff --git a/blazor/linear-gauge/methods.md b/blazor/linear-gauge/methods.md index 8e1c863ffb..d4848c58bf 100644 --- a/blazor/linear-gauge/methods.md +++ b/blazor/linear-gauge/methods.md @@ -1,7 +1,7 @@ --- layout: post -title: Methods in Blazor Linear Gauge Component | Syncfusion -description: Checkout and learn here all about methods in Syncfusion Blazor Linear Gauge component and much more. +title: Methods in Blazor Linear Gauge Component | Syncfusion® +description: Checkout and learn here all the features about methods in Blazor Linear Gauge component and much more. platform: Blazor control: Linear Gauge documentation: ug diff --git a/blazor/linear-gauge/pointers.md b/blazor/linear-gauge/pointers.md index 059e54d391..745a5ec058 100644 --- a/blazor/linear-gauge/pointers.md +++ b/blazor/linear-gauge/pointers.md @@ -1,7 +1,7 @@ --- layout: post -title: Pointers in Blazor Linear Gauge Component | Syncfusion -description: Checkout and learn here all about pointers in Syncfusion Blazor Linear Gauge component and much more. +title: Pointers in Blazor Linear Gauge Component | Syncfusion® +description: Checkout and learn here all the features about pointers in Blazor Linear Gauge component and much more. platform: Blazor control: Linear Gauge documentation: ug diff --git a/blazor/linear-gauge/print.md b/blazor/linear-gauge/print.md index ec58e4b6d0..ffcb35df01 100644 --- a/blazor/linear-gauge/print.md +++ b/blazor/linear-gauge/print.md @@ -1,7 +1,7 @@ --- layout: post -title: Print And Export in Blazor Linear Gauge Component | Syncfusion -description: Checkout and learn here all about print And export in Syncfusion Blazor Linear Gauge component and more. +title: Print And Export in Blazor Linear Gauge Component | Syncfusion® +description: Checkout and learn here all the features about print And export in Blazor Linear Gauge component and more. platform: Blazor control: Linear Gauge documentation: ug diff --git a/blazor/linear-gauge/ranges.md b/blazor/linear-gauge/ranges.md index 8f13d1aa3d..809d61f237 100644 --- a/blazor/linear-gauge/ranges.md +++ b/blazor/linear-gauge/ranges.md @@ -1,7 +1,7 @@ --- layout: post -title: Ranges in Blazor Linear Gauge Component | Syncfusion -description: Checkout and learn here all about ranges in Syncfusion Blazor Linear Gauge component and much more details. +title: Ranges in Blazor Linear Gauge Component | Syncfusion® +description: Checkout and learn here all the features about ranges in Blazor Linear Gauge component and much more details. platform: Blazor control: Linear Gauge documentation: ug diff --git a/blazor/linear-gauge/user-interaction.md b/blazor/linear-gauge/user-interaction.md index 5e7c826b15..33914267c4 100644 --- a/blazor/linear-gauge/user-interaction.md +++ b/blazor/linear-gauge/user-interaction.md @@ -1,7 +1,7 @@ --- layout: post -title: User Interaction in Blazor Linear Gauge Component | Syncfusion -description: Checkout and learn here all about user interaction in Syncfusion Blazor Linear Gauge component and more. +title: User Interaction in Blazor Linear Gauge Component | Syncfusion® +description: Checkout and learn here all the features about user interaction in Blazor Linear Gauge component and more. platform: Blazor control: Linear Gauge documentation: ug diff --git a/blazor/listbox/accessibility.md b/blazor/listbox/accessibility.md index c139bc1204..7de929e51e 100644 --- a/blazor/listbox/accessibility.md +++ b/blazor/listbox/accessibility.md @@ -1,7 +1,7 @@ --- layout: post -title: Accessibility in Blazor ListBox Component | Syncfusion -description: Checkout and learn here all about accessibility in Syncfusion Blazor ListBox component and much more. +title: Accessibility in Blazor ListBox Component | Syncfusion® +description: Checkout and learn here all the features about accessibility in Blazor ListBox component and much more. platform: Blazor control: List Box documentation: ug @@ -73,4 +73,4 @@ The accessibility compliance of the Blazor ListBox component is demonstrated in ## See also -* [Accessibility in Syncfusion® Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility) \ No newline at end of file +* [Accessibility in Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility) \ No newline at end of file diff --git a/blazor/listbox/data-binding.md b/blazor/listbox/data-binding.md index 0148680ba9..f5c5e84de9 100644 --- a/blazor/listbox/data-binding.md +++ b/blazor/listbox/data-binding.md @@ -1,7 +1,7 @@ --- layout: post -title: Data Binding in Blazor ListBox Component | Syncfusion -description: Checkout and learn here all about data binding in Syncfusion Blazor ListBox component and much more. +title: Data Binding in Blazor ListBox Component | Syncfusion® +description: Checkout and learn here all the features about data binding in Blazor ListBox component and much more. platform: Blazor control: List Box documentation: ug diff --git a/blazor/listbox/drag-and-drop.md b/blazor/listbox/drag-and-drop.md index 7676ece4f1..6674298e42 100644 --- a/blazor/listbox/drag-and-drop.md +++ b/blazor/listbox/drag-and-drop.md @@ -1,7 +1,7 @@ --- layout: post -title: Drag And Drop in Blazor ListBox Component | Syncfusion -description: Checkout and learn here all about drag and drop in Syncfusion Blazor ListBox component and much more. +title: Drag And Drop in Blazor ListBox Component | Syncfusion® +description: Checkout and learn here all the features about drag and drop in Blazor ListBox component and much more. platform: Blazor control: List Box documentation: ug diff --git a/blazor/listbox/dual-listbox.md b/blazor/listbox/dual-listbox.md index b4bc84df2b..53a4fc44e0 100644 --- a/blazor/listbox/dual-listbox.md +++ b/blazor/listbox/dual-listbox.md @@ -1,7 +1,7 @@ --- layout: post -title: Dual ListBox in Blazor ListBox Component | Syncfusion -description: Checkout and learn here all about dual ListBox in Syncfusion Blazor ListBox component and much more. +title: Dual ListBox in Blazor ListBox Component | Syncfusion® +description: Checkout and learn here all the features about dual ListBox in Blazor ListBox component and much more. platform: Blazor control: List Box documentation: ug diff --git a/blazor/listbox/filtering.md b/blazor/listbox/filtering.md index 0305a550ab..60e6c32448 100644 --- a/blazor/listbox/filtering.md +++ b/blazor/listbox/filtering.md @@ -1,7 +1,7 @@ --- layout: post -title: Filtering in Blazor ListBox Component | Syncfusion -description: Checkout and learn here all about Filtering in Syncfusion Blazor ListBox component in Blazor Server App and Blazor WebAssembly App. +title: Filtering in Blazor ListBox Component | Syncfusion® +description: Checkout and learn here all about Filtering in Blazor ListBox component in Blazor Server App and Blazor WebAssembly App. platform: Blazor control: ListBox documentation: ug diff --git a/blazor/listbox/getting-started-webapp.md b/blazor/listbox/getting-started-webapp.md index 5495d116ca..6289c4e3e5 100644 --- a/blazor/listbox/getting-started-webapp.md +++ b/blazor/listbox/getting-started-webapp.md @@ -1,7 +1,7 @@ --- layout: post -title: Getting started with Syncfusion Blazor ListBox in Blazor Web App -description: Check out the documentation for getting started with Syncfusion Blazor ListBox Component in Blazor Web App. +title: Getting started with Blazor ListBox in Web App | Syncfusion® +description: Check out the documentation for getting started with Blazor ListBox Component in Blazor Web App and much more details. platform: Blazor control: List Box documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Getting started with Blazor ListBox in Blazor Web App -This section briefly explains about how to include [Syncfusion® Blazor ListBox](https://www.syncfusion.com/blazor-components/blazor-listbox) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This section briefly explains about how to include [Blazor ListBox](https://www.syncfusion.com/blazor-components/blazor-listbox) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -21,7 +21,7 @@ This section briefly explains about how to include [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. +Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. {% endtabcontent %} @@ -33,7 +33,7 @@ Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https: ## Create a new Blazor Web App in Visual Studio Code -Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. +Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands in the integrated terminal (Ctrl+`): @@ -85,7 +85,7 @@ cd BlazorWebApp.Client N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -## Install Syncfusion® Blazor packages +## Install required Blazor packages Install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. @@ -117,9 +117,9 @@ After the packages are installed, open the **~/_Imports.razor** file in the clie {% endhighlight %} {% endtabs %} -## Register Syncfusion® Blazor service +## Register Blazor service -Register the Syncfusion Blazor service in the **Program.cs** file of your Blazor Web App. +Register the Blazor service in the **Program.cs** file of your Blazor Web App. {% tabs %} {% highlight c# tabtitle="Program.cs" %} @@ -133,7 +133,7 @@ builder.Services.AddSyncfusionBlazor(); {% endhighlight %} {% endtabs %} -N> If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in **Program.cs** files of both the server and client projects in your Blazor Web App. +N> If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Blazor service in **Program.cs** files of both the server and client projects in your Blazor Web App. ## Add stylesheet and script resources @@ -149,9 +149,9 @@ 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. -## Add Syncfusion® Blazor ListBox component +## Add Blazor ListBox component -Add the Syncfusion Blazor ListBox component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~/Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +Add the Blazor ListBox component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~/Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. @@ -209,7 +209,7 @@ After initialization, populate the ListBox using the `DataSource` property. In t N> `TValue` is the type of the value in the data source used for type inference. It is a generic type and can be specified as string[], int[], etc. -* Press Ctrl+F5 (Windows) or +F5 (macOS) to launch the application. This will render the Syncfusion® Blazor ListBox component in the default web browser. +* Press Ctrl+F5 (Windows) or +F5 (macOS) to launch the application. This will render the Blazor ListBox component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/rjhJNsLEzexthhCN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ListBox Component](./images/blazor-listbox.webp)" %} @@ -217,6 +217,6 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- ## See also -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) -* [Getting Started with Syncfusion® Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) \ No newline at end of file +* [Getting Started with Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +* [Getting Started with Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) +* [Getting Started with Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) \ No newline at end of file diff --git a/blazor/listbox/getting-started-with-server-app.md b/blazor/listbox/getting-started-with-server-app.md index 675261db67..250c6b11d4 100644 --- a/blazor/listbox/getting-started-with-server-app.md +++ b/blazor/listbox/getting-started-with-server-app.md @@ -1,7 +1,7 @@ --- layout: post -title: Getting started with Syncfusion Blazor ListBox in Blazor Server App -description: Check out the documentation for getting started with Syncfusion Blazor ListBox Component in Blazor Server App. +title: Getting started with Blazor ListBox in Blazor Server App | Syncfusion® +description: Check out the documentation for getting started with Blazor ListBox Component in Blazor Server App and much more details. platform: Blazor control: List Box documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor ListBox Component in Blazor Server App -This section briefly explains about how to include [Syncfusion® Blazor ListBox](https://www.syncfusion.com/blazor-components/blazor-listbox) component in a Blazor Server App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This section briefly explains about how to include [Blazor ListBox](https://www.syncfusion.com/blazor-components/blazor-listbox) component in a Blazor Server App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -21,7 +21,7 @@ This section briefly explains about how to include [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation. +Create a **Blazor Server App** by using the **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation. {% endtabcontent %} @@ -33,7 +33,7 @@ Create a **Blazor Server App** by using the **Blazor Web App** template in Visua ## Create a new Blazor App in Visual Studio Code -Create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation. +Create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation. Alternatively, create a Server application by using the following command in the integrated terminal (Ctrl+`). @@ -83,7 +83,7 @@ cd BlazorApp N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Server App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -## Install Syncfusion® Blazor packages +## Install required Blazor packages Install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. @@ -113,9 +113,9 @@ After the packages are installed, open the **~/_Imports.razor** file and import {% endhighlight %} {% endtabs %} -## Register Syncfusion® Blazor service +## Register Blazor service -Register the Syncfusion® Blazor service in the **Program.cs** file of your Blazor Server App. +Register the Blazor service in the **Program.cs** file of your Blazor Server App. {% tabs %} {% highlight C# tabtitle="Program.cs" %} @@ -143,9 +143,9 @@ 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 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 Blazor application. -## Add Syncfusion® Blazor ListBox component +## Add Blazor ListBox component -Add the Syncfusion® Blazor ListBox component in the **~/Components/Pages/Home.razor** file. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `~Pages/Home.razor` file. +Add the Blazor ListBox component in the **~/Components/Pages/Home.razor** file. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `~Pages/Home.razor` file. N> If the Interactivity Location is set to `Global`, the render mode is automatically configured in the `App.razor` file by default. @@ -203,7 +203,7 @@ After initialization, populate the ListBox using the `DataSource` property. The N> `TValue` is the type of the value in the data source used for type inference. It is a generic type and can be specified as string[], int[], etc. -* Press Ctrl+F5 (Windows) or +F5 (macOS) to launch the application. This will render the Syncfusion® Blazor ListBox component in the default web browser. +* Press Ctrl+F5 (Windows) or +F5 (macOS) to launch the application. This will render the Blazor ListBox component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/rjhJNsLEzexthhCN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ListBox Component](./images/blazor-listbox.webp)" %} @@ -211,5 +211,5 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- ## See also -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) -* [Getting Started with Syncfusion® Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) \ No newline at end of file +* [Getting Started with Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +* [Getting Started with Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) \ No newline at end of file diff --git a/blazor/listbox/getting-started.md b/blazor/listbox/getting-started.md index 4dff40c95a..d348c9a8e4 100644 --- a/blazor/listbox/getting-started.md +++ b/blazor/listbox/getting-started.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting Started with Blazor ListBox Component | Syncfusion +title: Getting Started with Blazor ListBox Component | Syncfusion® description: Checkout and learn about getting started with Blazor ListBox component in Blazor WebAssembly Application. platform: Blazor control: List Box @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor ListBox Component -This guide briefly explains about how to include [Syncfusion® Blazor ListBox](https://www.syncfusion.com/blazor-components/blazor-listbox) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This guide briefly explains about how to include [Blazor ListBox](https://www.syncfusion.com/blazor-components/blazor-listbox) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -21,7 +21,7 @@ This guide briefly explains about how to include [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. {% endtabcontent %} @@ -33,7 +33,7 @@ Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates ## 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-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. Alternatively, create a WebAssembly application by using the following command in the integrated terminal (Ctrl+`). @@ -81,7 +81,7 @@ cd BlazorApp {% endtabcontents %} -## Install Syncfusion® Blazor packages +## Install required Blazor packages Install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. @@ -111,9 +111,9 @@ After the packages are installed, open the **~/_Imports.razor** file and import {% endhighlight %} {% endtabs %} -## Register Syncfusion® Blazor service +## Register Blazor service -Register the Syncfusion® Blazor service in the **Program.cs** file of your Blazor WebAssembly App. +Register the Blazor service in the **Program.cs** file of your Blazor WebAssembly App. {% tabs %} {% highlight C# tabtitle="Program.cs" %} @@ -141,9 +141,9 @@ 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 the 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 the Blazor application. -## Add Syncfusion® Blazor ListBox component +## Add Blazor ListBox component -Add the Syncfusion® Blazor ListBox component in the **~/Pages/Index.razor** file. +Add the Blazor ListBox component in the **~/Pages/Index.razor** file. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -190,7 +190,7 @@ After initialization, populate the ListBox using the `DataSource` property. In t N> `TValue` specifies the value type of the data source for type inference. It is a generic type and can be specified as string[], int[], and so on. -* Press Ctrl+F5 (Windows) or +F5 (macOS) to run the application. The Syncfusion® Blazor ListBox component will render in the default web browser. +* Press Ctrl+F5 (Windows) or +F5 (macOS) to run the application. The Blazor ListBox component will render in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/rjhJNsLEzexthhCN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ListBox Component](./images/blazor-listbox.webp)" %} @@ -198,6 +198,6 @@ N> [View sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- ## See also -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) -* [Getting Started with Syncfusion® Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) \ No newline at end of file +* [Getting Started with Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +* [Getting Started with Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) +* [Getting Started with Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) \ No newline at end of file diff --git a/blazor/listbox/how-to/add-items.md b/blazor/listbox/how-to/add-items.md index 1c80cdd9eb..e709d68445 100644 --- a/blazor/listbox/how-to/add-items.md +++ b/blazor/listbox/how-to/add-items.md @@ -1,7 +1,7 @@ --- layout: post -title: Add/Remove Items in Blazor ListBox Component | Syncfusion -description: Checkout and learn here all about add/remove items in Syncfusion Blazor ListBox component and much more. +title: Add/Remove Items in Blazor ListBox Component | Syncfusion® +description: Checkout and learn here all about add/remove items in Blazor ListBox component and much more details. platform: Blazor control: List Box documentation: ug diff --git a/blazor/listbox/how-to/bind-change-event.md b/blazor/listbox/how-to/bind-change-event.md index a2f42e7db8..819f04ee6a 100644 --- a/blazor/listbox/how-to/bind-change-event.md +++ b/blazor/listbox/how-to/bind-change-event.md @@ -1,7 +1,7 @@ --- layout: post -title: Bind Change Events in Blazor ListBox Component | Syncfusion -description: Checkout and learn here all about bind change events in Syncfusion Blazor ListBox component and more. +title: Bind Change Events in Blazor ListBox Component | Syncfusion® +description: Checkout and learn here all about bind change events in Blazor ListBox component and much more details. platform: Blazor control: List Box documentation: ug diff --git a/blazor/listbox/how-to/enable-or-disable-items.md b/blazor/listbox/how-to/enable-or-disable-items.md index 8cbe6a50e2..524102db6e 100644 --- a/blazor/listbox/how-to/enable-or-disable-items.md +++ b/blazor/listbox/how-to/enable-or-disable-items.md @@ -1,7 +1,7 @@ --- layout: post -title: Enable/Disable ListBox in Blazor ListBox Component | Syncfusion -description: Checkout and learn here all about enable or disable ListBox in Syncfusion Blazor ListBox component and more. +title: Enable/Disable ListBox in Blazor ListBox Component | Syncfusion® +description: Checkout and learn here all about enable or disable ListBox in Blazor ListBox component and much more details. platform: Blazor control: List Box documentation: ug diff --git a/blazor/listbox/how-to/enable-scroll.md b/blazor/listbox/how-to/enable-scroll.md index a5723eef41..a4d9c60449 100644 --- a/blazor/listbox/how-to/enable-scroll.md +++ b/blazor/listbox/how-to/enable-scroll.md @@ -1,7 +1,7 @@ --- layout: post -title: Enable Scroller in Blazor ListBox Component | Syncfusion -description: Checkout and learn here all about enable scroller in Syncfusion Blazor ListBox component and much more. +title: Enable Scroller in Blazor ListBox Component | Syncfusion® +description: Checkout and learn here all about enable scroller in Blazor ListBox component and and much more details. platform: Blazor control: List Box documentation: ug diff --git a/blazor/listbox/how-to/filter-listbox.md b/blazor/listbox/how-to/filter-listbox.md index d5e96b0b8f..fccca7da11 100644 --- a/blazor/listbox/how-to/filter-listbox.md +++ b/blazor/listbox/how-to/filter-listbox.md @@ -1,7 +1,7 @@ --- layout: post -title: Filter Data in Blazor ListBox Component | Syncfusion -description: Checkout and learn here all Filter ListBox Data Using TextBox Component in Syncfusion Blazor ListBox component and much more. +title: Filter Data in Blazor ListBox Component | Syncfusion® +description: Checkout and learn here all Filter ListBox Data Using TextBox Component in Blazor ListBox component and much more. platform: Blazor control: List Box documentation: ug @@ -9,7 +9,7 @@ documentation: ug # How to Filter Blazor ListBox Data Using TextBox Component -This example shows how to filter Syncfusion® ListBox data based on input from a TextBox. Bind an input event listener to the TextBox to capture user input and filter the items in the ListBox. Within the event handler, use the [`FilterAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_FilterAsync_System_Collections_Generic_IEnumerable__1__Syncfusion_Blazor_Data_Query_Syncfusion_Blazor_DropDowns_FieldSettingsModel_) method to update the ListBox items, ensuring that only those matching the input text are included. +This example shows how to filter ListBox data based on input from a TextBox. Bind an input event listener to the TextBox to capture user input and filter the items in the ListBox. Within the event handler, use the [`FilterAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_FilterAsync_System_Collections_Generic_IEnumerable__1__Syncfusion_Blazor_Data_Query_Syncfusion_Blazor_DropDowns_FieldSettingsModel_) method to update the ListBox items, ensuring that only those matching the input text are included. ```cshtml @using Syncfusion.Blazor diff --git a/blazor/listbox/how-to/get-items.md b/blazor/listbox/how-to/get-items.md index b7e9fbb986..30f5f98bcf 100644 --- a/blazor/listbox/how-to/get-items.md +++ b/blazor/listbox/how-to/get-items.md @@ -1,7 +1,7 @@ --- layout: post -title: Get Items in Blazor ListBox Component | Syncfusion -description: Checkout and learn here all about select items in Syncfusion Blazor ListBox component and much more. +title: Get Items in Blazor ListBox Component | Syncfusion® +description: Checkout and learn here all about select items in Blazor ListBox component and much more. platform: Blazor control: List Box documentation: ug diff --git a/blazor/listbox/how-to/select-items.md b/blazor/listbox/how-to/select-items.md index 420221ea2e..53ed47d515 100644 --- a/blazor/listbox/how-to/select-items.md +++ b/blazor/listbox/how-to/select-items.md @@ -1,7 +1,7 @@ --- layout: post -title: Select Items in Blazor ListBox Component | Syncfusion -description: Checkout and learn here all about select items in Syncfusion Blazor ListBox component and much more. +title: Select Items in Blazor ListBox Component | Syncfusion® +description: Checkout and learn here all about select items in Blazor ListBox component and much more. platform: Blazor control: List Box documentation: ug diff --git a/blazor/listbox/icons-and-templates.md b/blazor/listbox/icons-and-templates.md index c65cb7905c..b93f647807 100644 --- a/blazor/listbox/icons-and-templates.md +++ b/blazor/listbox/icons-and-templates.md @@ -1,7 +1,7 @@ --- layout: post -title: Icons and Templates in Blazor ListBox Component | Syncfusion -description: Checkout and learn here all about icons and templates in Syncfusion Blazor ListBox component and more. +title: Icons and Templates in Blazor ListBox Component | Syncfusion® +description: Checkout and learn here all about icons and templates in Blazor ListBox component and more. platform: Blazor control: List Box documentation: ug @@ -11,7 +11,7 @@ documentation: ug ## Icons -To display an icon for each ListBox item, map the [IconCss field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ListBoxFieldSettings.html#Syncfusion_Blazor_DropDowns_ListBoxFieldSettings_IconCss) to a CSS class name. By default, the icon is positioned on the left side of the item text. Icon glyphs are provided by the Syncfusion theme CSS; custom icons can also be supplied via user-defined CSS classes. +To display an icon for each ListBox item, map the [IconCss field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ListBoxFieldSettings.html#Syncfusion_Blazor_DropDowns_ListBoxFieldSettings_IconCss) to a CSS class name. By default, the icon is positioned on the left side of the item text. Icon glyphs are provided by the theme CSS; custom icons can also be supplied via user-defined CSS classes. In the following example, icon classes are mapped to the `IconCss` field. diff --git a/blazor/listbox/selection.md b/blazor/listbox/selection.md index 2dbd87ef3a..e41832724a 100644 --- a/blazor/listbox/selection.md +++ b/blazor/listbox/selection.md @@ -1,7 +1,7 @@ --- layout: post -title: Selection in Blazor ListBox Component | Syncfusion -description: Checkout and learn here all about selection in Syncfusion Blazor ListBox component and much more details. +title: Selection in Blazor ListBox Component | Syncfusion® +description: Checkout and learn here all about selection in Blazor ListBox component and much more details. platform: Blazor control: List Box documentation: ug diff --git a/blazor/listbox/sorting-grouping.md b/blazor/listbox/sorting-grouping.md index 3bc65d4b75..88f9a50c0f 100644 --- a/blazor/listbox/sorting-grouping.md +++ b/blazor/listbox/sorting-grouping.md @@ -1,7 +1,7 @@ --- layout: post -title: Sorting and Grouping in Blazor ListBox Component | Syncfusion -description: Checkout and learn here all about sorting and grouping in Syncfusion Blazor ListBox component and more. +title: Sorting and Grouping in Blazor ListBox Component | Syncfusion® +description: Checkout and learn here all about sorting and grouping in Blazor ListBox component and more. platform: Blazor control: List Box documentation: ug diff --git a/blazor/listbox/style-and-appearance.md b/blazor/listbox/style-and-appearance.md index faac7a7efc..edd8e4988a 100644 --- a/blazor/listbox/style-and-appearance.md +++ b/blazor/listbox/style-and-appearance.md @@ -1,7 +1,7 @@ --- layout: post -title: Styles and Appearances in Blazor ListBox Component | Syncfusion -description: Checkout and learn here all about styles and appearances in Syncfusion Blazor ListBox component and more. +title: Styles and Appearances in Blazor ListBox Component | Syncfusion® +description: Checkout and learn here all about styles and appearances in Blazor ListBox component and more. platform: Blazor control: List Box documentation: ug