Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions blazor/linear-gauge/accessibility.md
Original file line number Diff line number Diff line change
@@ -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
Expand Down
4 changes: 2 additions & 2 deletions blazor/linear-gauge/animation.md
Original file line number Diff line number Diff line change
@@ -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
Expand Down
4 changes: 2 additions & 2 deletions blazor/linear-gauge/annotations.md
Original file line number Diff line number Diff line change
@@ -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
Expand Down
4 changes: 2 additions & 2 deletions blazor/linear-gauge/axis.md
Original file line number Diff line number Diff line change
@@ -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
Expand Down
4 changes: 2 additions & 2 deletions blazor/linear-gauge/events.md
Original file line number Diff line number Diff line change
@@ -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
Expand Down
26 changes: 13 additions & 13 deletions blazor/linear-gauge/getting-started-webapp.md
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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<sup style="font-size:70%">&reg;</sup> 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 %}

Expand All @@ -23,7 +23,7 @@ This section briefly explains about how to include [Syncfusion<sup style="font-s

## Create a new Blazor Web App in Visual Studio

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<sup style="font-size:70%">&reg;</sup> 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 %}

Expand All @@ -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<sup style="font-size:70%">&reg;</sup> 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 (<kbd>Ctrl</kbd>+<kbd>`</kbd>):

Expand Down Expand Up @@ -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<sup style="font-size:70%">&reg;</sup> 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.

Expand Down Expand Up @@ -125,9 +125,9 @@ After the packages are installed, open the **~/_Imports.razor** file in the clie
{% endhighlight %}
{% endtabs %}

## Register Syncfusion<sup style="font-size:70%">&reg;</sup> 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" %}
Expand All @@ -141,7 +141,7 @@ builder.Services.AddSyncfusionBlazor();
{% endhighlight %}
{% endtabs %}

N> If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion<sup style="font-size:70%">&reg;</sup> 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

Expand All @@ -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<sup style="font-size:70%">&reg;</sup> 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`).
Expand Down Expand Up @@ -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<sup style="font-size:70%">&reg;</sup> 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<sup style="font-size:70%">&reg;</sup> 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<sup style="font-size:70%">&reg;</sup> 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)
28 changes: 14 additions & 14 deletions blazor/linear-gauge/getting-started-with-server-app.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
---
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
---

# Getting Started with Blazor Linear Gauge Component in Server App

This section briefly explains about how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> 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 %}

Expand All @@ -21,7 +21,7 @@ This section briefly explains about how to include [Syncfusion<sup style="font-s

## Create a new Blazor App in Visual Studio

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<sup style="font-size:70%">&reg;</sup> 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 %}

Expand All @@ -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<sup style="font-size:70%">&reg;</sup> 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 (<kbd>Ctrl</kbd>+<kbd>`</kbd>).

Expand Down Expand Up @@ -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<sup style="font-size:70%">&reg;</sup> 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.

Expand Down Expand Up @@ -112,9 +112,9 @@ After the packages are installed, open the **~/_Imports.razor** file and import
{% endhighlight %}
{% endtabs %}

## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
## Register Blazor service

Register the Syncfusion<sup style="font-size:70%">&reg;</sup> 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" %}
Expand All @@ -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<sup style="font-size:70%">&reg;</sup> Blazor LinearGauge component
## Add Blazor LinearGauge component

Add the Syncfusion<sup style="font-size:70%">&reg;</sup> 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.

Expand Down Expand Up @@ -171,7 +171,7 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati
{% endhighlight %}
{% endtabs %}

* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor LinearGauge component in the default web browser.
* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (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)" %}

Expand Down Expand Up @@ -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<sup style="font-size:70%">&reg;</sup> 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<sup style="font-size:70%">&reg;</sup> 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<sup style="font-size:70%">&reg;</sup> 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)
Loading