Migrating to v4

Migration 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 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.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" 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 Boostrap 5.3.

Bootstrap JavaScript #

At the end of 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.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

3. Breaking changes ⚠️ #

Dropped obsolete components #

We replaced HxInputCheckbox with new HxCheckbox and HxInputSwitch with 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 the Bootstrap 5.3 now expects you to use text and background color CSS utilities to customize the navbar with CssClass parameter, we changed the default value of 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 according to the new Bootstrap 5.3 and Havit.Blazor setup. Focus on these areas where there were some changes which 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 added support for it in all our components.
Use the data-bs-theme="dark" attribute on the <html> element to enable it.
See the Bootstrap Dark mode documentation for more details.

5. Troubles? #

If you experience any troubles migrating your project to v3, feel free to use the GitHub Discussions to place your question.
If you find anything what seems to be a bug, file it to our GitHub Issues.