Getting started #
Prerequisites #
Havit.Blazor components have the following requirements:
- .NET 8.0 or later (our NuGet package provides builds for both
net8.0andnet9.0to utilize the latest features). - Most components require interactive rendering mode for full functionality (some support for static SSR is available, with limited functionality where applicable).
Project template #
Installation #
Select your setup to get customized instructions.
Framework version
Blazor app model
Interactive render mode
Did you opt for sample pages when creating the project?
1. NuGet package #
Add Havit.Blazor.Components.Web.Bootstrap NuGet package
to your {YourBlazorApp}.Client project.
You can use the NuGet Package Manager
or execute the following command:
dotnet add package Havit.Blazor.Components.Web.Bootstrap2. Bootstrap CSS #
Our library only requires the presence of any Bootstrap CSS bundle (version 5.3.3) in your project.
All additional CSS rules needed for our components are automatically included in the bundle of scoped CSS.
Ensure that the link to {YourBlazorApp}.styles.css remains in your App.razor
and has NOT been removed.
Choose a Bootstrap CSS bundle
Add the following line to the <head> section of your App.razor file:
<link href="@Assets["_content/Havit.Blazor.Components.Web.Bootstrap/bootstrap.min.css"]" rel="stylesheet" />
This snippet adds a <link> to our customized Bootstrap CSS build, incorporating the Havit.Blazor theme.
It includes various subtle adjustments, such as colors, borders, and other styling tweaks to enhance the appearance of your app.
This is the same theme used throughout our documentation to showcase components.
3. Bootstrap JavaScript #
Our library only requires the inclusion of the appropriate Bootstrap JavaScript bundle (version 5.3.3) in your project.
Any additional JavaScript needed for our components (small JS modules supporting the integration of individual components with Blazor) is automatically loaded as needed.
Add the following line at the end of the <body> section of your App.razor file.
@((MarkupString)@HxSetup.RenderBootstrapJavaScriptReference())
This snippet adds a <script> tag referencing Bootstrap JavaScript with Popper
that always matches the version required by Havit.Blazor,
so you won’t need to maintain the link manually in the future.
4. Import namespaces #
Add the following code to both {YourBlazorProject}/Components/_Imports.razor and {YourBlazorProject}.Client/_Imports.razor files:
@using Havit.Blazor.Components.Web
@using Havit.Blazor.Components.Web.Bootstrap
This code imports the namespaces of the Havit.Blazor library so you can use the components in your Razor files
without having to add @using directive to each file or specify the full namespace each time.
5. Register srvices #
Add the following code to service registrations in both {YourBlazorProject}/Program.cs and {YourBlazorProject}.Client/Program.cs files:
builder.Services.AddHxServices();You will need to add the following using directive to the top of the file:
using Havit.Blazor.Components.Web;6. Specific components support #
[OPTIONAL] Some components require a specific project setup to function correctly.
This typically involves registering a service and adding a host component to a MainLayout.razor component.
For detailed instructions, please refer to the documentation of the respective components:
- HxMessenger - Facilitates the display of new toast messages from your code with ease.
- HxMessageBoxHost - Enables opening message boxes (and awaiting results) directly from your code.
Ready, set, go! #
You are now all set to utilize the full range of components in your Razor files. These components are prefixed with Hx. Rely on IntelliSense to guide you through their usage.
<HxIcon Icon="@BootstrapIcon.HandThumbsUp" CssClass="display-3" />