Start by creating a new Blazor Application (Server, client or auto) by choosing the New Project option., or by using an existing Blazor application.

Installation

Our components are distributed as NuGet packages, readily accessible from our dedicated server. Utilising these packages is as seamless as working with any other NuGet package, ensuring smooth integration into your projects.

Inside Visual Studio, or any other IDE add a new Nuget Source:

https://users.bergsoft.net

If prompted to provide a username and password, please use the same credentials as those used to log in to the User Section of the BergSoft website.

Source can also be added by using a command line:

NuGet Sources Add -Name "Bergsoft" -Source "https://users.bergsoft.net" -UserName "<your username>" -Password "<your password>"

Browse for packages on this new source and download Bergsoft and Bergsoft.Blazor packages. In order to use other components such as NextGrid, download Bergsoft.Blazor.Grids or for TabsControl and PageControl download Bergsoft.Blazor.Tabs

All these packages can be also downloaded from the users section of the website and then placed into a local folder if prefered that way.

Prerequisites

All components in the suite are located within Bergsoft.Blazor namespace and therefore it's required to add following line on top of either a page (or other component), or inside _Imports.razor file:

@using Bergsoft
@using Bergsoft.Blazor

To use other components such as grids or tabs, add:

@using Bergsoft.Blazor.Grids
@using Bergsoft.Blazor.Tabs

Inside index.html file add the following lines inside header section of the page:

<link href="_content/Bergsoft.Blazor/css/styles.css" rel="stylesheet" />

This css file contains the styles used across the components.

And this line:

<script src="_content/Bergsoft.Blazor/js/scripts.js"></script>

Now the components can be used in a same maner as any other.

Styling

Our components comes with pleasing default styling, but colors and sizes can be easily changed by simply changing css variables. We already have 2 ready to use styles that are ready to use (light and dark) and easy to include in your project.

They can be accessed by including one of these lines:

<link href="_content/Bergsoft.Blazor/css/light.css" rel="stylesheet" />
<link href="_content/Bergsoft.Blazor/css/dark.css" rel="stylesheet" />