Migrating to v4

Migrating your projects to version 4 is pretty easy.

1. NuGet package #

Update the Havit.Blazor.Components.Web.Bootstrap package through NuGet Package Manager or with the following command:

dotnet add package Havit.Blazor.Components.Web.Bootstrap

2. Bootstrap CSS and JS #

CSS #

If you are using Bootstrap CSS from CDN, update the following line in your HTML head section. It's either index.html or _Host.cshtml/_Layout.cshtml depending on whether you're running WebAssembly or Server:

@HxSetup.RenderBootstrapCssReference(BootstrapFlavor.PlainBootstrap)
or
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

If you are referencing our Bootstrap CSS build _content/Havit.Blazor.Components.Web.Bootstrap/bootstrap.css, it is updated automatically. If you are referencing your custom Bootstrap build/theme, upgrade it to Bootstrap 5.3.

Bootstrap JavaScript #

At the end of the HTML <body> section of either index.html or _Host.cshtml/_Layout.cshtml, update this line referencing Bootstrap JavaScript Bundle (with Popper) from CDN:

@HxSetup.RenderBootstrapJavaScriptReference()
or
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

3. Breaking changes ⚠️ #

Dropped obsolete components #

We replaced HxInputCheckbox with the new HxCheckbox and HxInputSwitch with the new HxSwitch.
The original Label parameter is now Text (the Label parameter of new components has a different purpose, see HxCheckbox documentation).

<HxInputCheckbox Label="check this" ... />  @* v2 *@
<HxCheckbox Text="check this" ... />        @* v3 *@

<HxInputSwitch Label="check this" ... />    @* v2 *@
<HxSwitch Text="check this" ... />          @* v3 *@

HxNavbar colors #

As Bootstrap 5.3 deprecated the original color schemes, the ColorScheme parameter was removed.
Use the new parameter ColorMode="ColorMode.Dark" if needed (Light is the default).

UPDATE v4.0.1: As Bootstrap 5.3 now expects you to use text and background color CSS utilities to customize the navbar with the CssClass parameter, we changed the default value of the Color parameter to ThemeColor.None to not interfere with your CSS classes. You can still use Color="ThemeColor.Light" to get the original navbar default color.

HxGrid ContextMenu #

The ContextMenu parameter was removed from HxGrid as it was replaced by HxContextMenuGridColumn a while ago and was already marked as [Obsolete].

@* Original *@
<HxGrid ...>
	<Columns>
		...
	</Columns>
	<ContextMenu>
		<HxContextMenuItem ... />
		<HxContextMenuItem ... />
	</ContextMenu>
</HxGrid>

@* New structure *@
<HxGrid ...>
	<Columns>
		...
		<HxContextMenuGridColumn>
			<HxContextMenu>
				<HxContextMenuItem ... />
				<HxContextMenuItem ... />
			</HxContextMenu>
		</HxContextMenuGridColumn>
		...
	</Columns>
</HxGrid>

4. Verify CSS customizations #

Check your CSS customizations and adjust them according to the new Bootstrap 5.3 and Havit.Blazor setup. Focus on these areas where there were some changes that might affect your visual:

Check the Bootstrap 5.3 migration guide.
Check your chip-lists (HxListLayout filters).
Check the HxMultiSelect.

5. Enjoy the new dark color mode #

Bootstrap 5.3 introduced the dark color scheme and we have added support for it in all our components.
Use the data-bs-theme="dark" attribute on the <html> element to enable it.
Please refer to the Bootstrap Dark mode documentation for more details.

5. Troubles? #

If you encounter any issues while migrating your project to v3, please feel free to use the GitHub Discussions to ask your questions.
If you find anything that appears to be a bug, please report it on our GitHub Issues.