diff --git a/blazor/3D-chart/getting-started-with-web-app.md b/blazor/3D-chart/getting-started-with-web-app.md index 4b3a04fc95..939bc93256 100644 --- a/blazor/3D-chart/getting-started-with-web-app.md +++ b/blazor/3D-chart/getting-started-with-web-app.md @@ -94,14 +94,21 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ## Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.Chart3D](https://www.nuget.org/packages/Syncfusion.Blazor.Chart3D/) NuGet package in the 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. +Install the [Syncfusion.Blazor.Chart3D](https://www.nuget.org/packages/Syncfusion.Blazor.Chart3D/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.Chart3D`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.Chart3D -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Chart3D -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -155,22 +162,16 @@ N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documen ## Add Syncfusion® Blazor 3D Chart component -Add the Syncfusion® Blazor 3D Chart 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`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Blazor 3D Chart 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`). 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. {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Home.razor" %} -@* desired render mode define here *@ @rendermode InteractiveAuto -{% endhighlight %} -{% endtabs %} - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - @@ -178,11 +179,21 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor 3D Chart component in the default web browser. +### Run the application + +**Visual Studio**: + +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor 3D Chart component will render in your default web browser. + +**Visual Studio Code or .NET CLI**: -## Populate Blazor 3D Chart with data +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: -To bind data for the 3D chart component, you can assign a IEnumerable object to the `DataSource` property. It can also be provided as an instance of the `DataManager`. + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. {% tabs %} {% highlight razor tabtitle="Home.razor" %} diff --git a/blazor/accordion/getting-started-with-web-app.md b/blazor/accordion/getting-started-with-web-app.md index b27b9a665e..861d8d30d5 100644 --- a/blazor/accordion/getting-started-with-web-app.md +++ b/blazor/accordion/getting-started-with-web-app.md @@ -89,15 +89,22 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ### Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) 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. +Install the [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.Navigations` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.Navigations -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Navigations -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -154,22 +161,16 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor Accordion component -Add the Syncfusion® Blazor Accordion 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`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Blazor Accordion 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`). N> If the **Interactivity** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Home.razor" %} -@* desired render mode define here *@ @rendermode InteractiveAuto -{% endhighlight %} -{% endtabs %} - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - @@ -181,7 +182,21 @@ N> If the **Interactivity** is set to `Global` with `Auto` or `WebAssembly`, the {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Accordion component in the default web browser. +### Run the application + +**Visual Studio**: + +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor DataGrid component will render in your default web browser. + +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/BjBfZMDKrVnxBgsm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accordion Component](images/blazor-accordion-component.png)" %} diff --git a/blazor/accumulation-chart/getting-started-with-web-app.md b/blazor/accumulation-chart/getting-started-with-web-app.md index 577bb98d41..d8557a61bb 100644 --- a/blazor/accumulation-chart/getting-started-with-web-app.md +++ b/blazor/accumulation-chart/getting-started-with-web-app.md @@ -103,12 +103,19 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c Install the [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts/) 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 Syncfusion.Blazor.Charts --version {{ site.releaseversion }}), or the .NET CLI. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.Charts`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.Charts -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Charts -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -164,23 +171,15 @@ N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documen ## Add Syncfusion® Blazor Accumulation Chart component -Add the Syncfusion® Blazor Accumulation Chart component in the **~/Components/Pages/Home.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/Home.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Blazor Accumulation Chart 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`). 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. -{% tabs %} -{% highlight razor %} - -@* desired render mode defined here *@ -@rendermode InteractiveAuto - -{% endhighlight %} -{% endtabs %} - {% tabs %} {% highlight razor tabtitle="Home.razor" %} - +@rendermode InteractiveAuto @@ -213,7 +212,21 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% endhighlight %} {% endtabs %} -Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Accumulation Chart component in the default web browser. +### Run the application + +**Visual Studio**: + +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor Accumulation Chart component will render in your default web browser. + +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/LjhzDWVeVKeUbWGh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pie Chart](images/getting-started/blazor-pie-chart-webapp.webp)" %} diff --git a/blazor/appbar/getting-started-with-web-app.md b/blazor/appbar/getting-started-with-web-app.md index f9779e29c6..e49975d250 100644 --- a/blazor/appbar/getting-started-with-web-app.md +++ b/blazor/appbar/getting-started-with-web-app.md @@ -89,15 +89,22 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ### Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) 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. +Install the [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.Navigations` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.Navigations -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Navigations -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -153,22 +160,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor AppBar component -Add the Syncfusion® Blazor AppBar 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`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Blazor AppBar 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`). 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. -{% tabs %} -{% highlight razor %} - -@* desired render mode define here *@ -@rendermode InteractiveAuto - -{% endhighlight %} -{% endtabs %} - {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto @using Syncfusion.Blazor.Navigations @using Syncfusion.Blazor.Buttons @@ -190,7 +190,21 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor AppBar component in the default web browser. +### Run the application + +**Visual Studio**: + +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor AppBar component will render in your default web browser. + +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/rNBfNCLSLdCUQyHq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar Component](images/getting_started.png)" %} diff --git a/blazor/autocomplete/getting-started-with-web-app.md b/blazor/autocomplete/getting-started-with-web-app.md index ec890e6946..7954b62985 100644 --- a/blazor/autocomplete/getting-started-with-web-app.md +++ b/blazor/autocomplete/getting-started-with-web-app.md @@ -89,15 +89,22 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ### Install Syncfusion® 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. +Install the [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 using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.DropDowns` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.DropDowns -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.DropDowns -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -153,22 +160,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor AutoComplete component -Add the Syncfusion® Blazor AutoComplete 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`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Blazor AutoComplete 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`). 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. -{% tabs %} -{% highlight razor %} - -@* desired render mode define here *@ -@rendermode InteractiveAuto - -{% endhighlight %} -{% endtabs %} - {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto @using Syncfusion.Blazor.DropDowns @@ -195,7 +195,21 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor AutoComplete component in the default web browser. +### Run the application + +**Visual Studio**: + +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor AutoComplete component will render in your default web browser. + +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/LtBJZMreLmNLRbiw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "![Blazor AutoComplete Component](./images/blazor-autocomplete-component.webp)" %} diff --git a/blazor/avatar/getting-started-with-web-app.md b/blazor/avatar/getting-started-with-web-app.md index 348502f159..c697990f88 100644 --- a/blazor/avatar/getting-started-with-web-app.md +++ b/blazor/avatar/getting-started-with-web-app.md @@ -89,14 +89,21 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ### Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) 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. +Install the [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -119,7 +126,7 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor Avatar component -Add the Syncfusion® Blazor Avatar component in the **~/Components/Pages/*.razor** file. +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Blazor Avatar component inside the razor file. {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -148,7 +155,21 @@ Add the Syncfusion® Blazor Avatar component {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Avatar component in the default web browser. +### Run the application + +**Visual Studio**: + +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor Avatar component will render in your default web browser. + +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/LNreZyVMASlmWFyr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "![Blazor Avatar Component](./images/blazor-avatar-component.png)" %} diff --git a/blazor/badge/getting-started-with-web-app.md b/blazor/badge/getting-started-with-web-app.md index 1d66845ee1..9a26a9fa18 100644 --- a/blazor/badge/getting-started-with-web-app.md +++ b/blazor/badge/getting-started-with-web-app.md @@ -89,14 +89,21 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ### Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) 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. +Install the [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -119,7 +126,7 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor Badge component -Add the Syncfusion® Blazor Badge component in the **~/Components/Pages/*.razor** file. +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Blazor Badge component inside the razor file. {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -129,7 +136,21 @@ Add the Syncfusion® Blazor Badge component {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Badge component in the default web browser. +### Run the application + +**Visual Studio**: + +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor Badge component will render in your default web browser. + +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/BthfshXvfQkIZbeA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Badge Component](images/blazor-badge-component.webp)" %} diff --git a/blazor/barcode/getting-started-with-web-app.md b/blazor/barcode/getting-started-with-web-app.md index 70848c91e5..a23d0a1607 100644 --- a/blazor/barcode/getting-started-with-web-app.md +++ b/blazor/barcode/getting-started-with-web-app.md @@ -89,15 +89,22 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ### Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.BarcodeGenerator](https://www.nuget.org/packages/Syncfusion.Blazor.BarcodeGenerator/) 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. +Install the [Syncfusion.Blazor.BarcodeGenerator](https://www.nuget.org/packages/Syncfusion.Blazor.BarcodeGenerator/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.BarcodeGenerator` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.BarcodeGenerator -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.BarcodeGenerator -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -153,28 +160,36 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor Barcode component -Add the Syncfusion® Blazor Barcode 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`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Blazor Barcode 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`). 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. {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Home.razor" %} -@* desired render mode define here *@ @rendermode InteractiveAuto + + {% endhighlight %} {% endtabs %} -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} +### Run the application - +**Visual Studio**: -{% endhighlight %} -{% endtabs %} +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor Barcode component will render in your default web browser. + +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor Barcode component in the default web browser. + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/rXhpDMryUyGlVBeQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Barcode Generator Component](images/blazor-barcode-generator-component.webp)" %} diff --git a/blazor/block-editor/getting-started.md b/blazor/block-editor/getting-started.md index a2db30b371..ae6d61a5e7 100644 --- a/blazor/block-editor/getting-started.md +++ b/blazor/block-editor/getting-started.md @@ -91,15 +91,22 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ### Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.BlockEditor](https://www.nuget.org/packages/Syncfusion.Blazor.BlockEditor/) 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. +Install the [Syncfusion.Blazor.BlockEditor](https://www.nuget.org/packages/Syncfusion.Blazor.BlockEditor/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.BlockEditor` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.BlockEditor -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.BlockEditor -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -153,13 +160,46 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor Block Editor component -Add the Syncfusion® Blazor Block Editor component in the **~/Components/Pages/*.razor** file and configure the initial blocks using the `Blocks` property. 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`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Blazor Block Editor 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`). 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. {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto + + + +{% endhighlight %} +{% endtabs %} + +### Run the application + +**Visual Studio**: + +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor Block Editor component will render in your default web browser. + +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLIsrhAgbKCOpbZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor BlockEditor Default.](images/blazor-block-editor-default.webp)" %} + +## Configure blocks + +The Block Editor uses a block-based content structure where each block represents a specific content type (heading, paragraph, list, etc.). The [Blocks](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BlockEditor.SfBlockEditor.html#Syncfusion_Blazor_BlockEditor_SfBlockEditor_Blocks) property manages and configures these blocks, allowing full control over the content structure and presentation. + +{% tabs %} +{% highlight razor tabtitle="Home.razor" %} + @using Syncfusion.Blazor.BlockEditor @* Define desired render mode here *@ diff --git a/blazor/breadcrumb/getting-started-with-web-app.md b/blazor/breadcrumb/getting-started-with-web-app.md index 86a53786cc..7b9e5612af 100644 --- a/blazor/breadcrumb/getting-started-with-web-app.md +++ b/blazor/breadcrumb/getting-started-with-web-app.md @@ -87,15 +87,22 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ### Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) 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. +Install the [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.Navigations` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.Navigations -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Navigations -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -151,28 +158,37 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor Breadcrumb component -Add the Syncfusion® Blazor Breadcrumb 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`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Blazor Breadcrumb 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`). 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. {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Home.razor" %} -@* desired render mode define here *@ @rendermode InteractiveAuto + + {% endhighlight %} {% endtabs %} -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} +### Run the application - +**Visual Studio**: -{% endhighlight %} -{% endtabs %} +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor breadcrumb component will render in your default web browser. + +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Breadcrumb component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/rXhpNiBSgmQNkpCP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}