TablerForNet Blazor: Installatiehandleiding en Admin Template

Github TranslateForNet

NuGet TablerForNet · latest

Softwarestack Blazor Server · VS 2026 · .NET 10 · TablerForNet

Laatste update 29-01-2026

Volledige stapsgewijze handleiding voor het integreren van TablerForNet in Blazor Server-applicaties. Vervang Bootstrap door een modern, responsief admin UI-framework gebaseerd op Tabler.

⤢

Stapsgewijze handleiding voor het installeren van TablerForNet

De handleiding toont de installatie op een nieuw Blazor Server .NET 7-project. Volg de onderstaande stappen:

• Stap 1: Installeer het 'TablerForNet' NuGet-pakket.
• Stap 2: Voeg de benodigde 'usings' toe en registreer de TablerForNet-service in het Program.cs-bestand.
• Stap 3: Voeg de vereiste 'usings' toe aan het _imports.razor-bestand.
• Stap 4: Pas de PageTitle-tag aan.
• Stap 5: Voeg de 'tablerForNet' CSS- en JS-bestanden toe aan het _Host.cshtml-bestand.
• Stap 6: Verwijder Bootstrap en gerelateerde bestanden.
• Stap 7: Werk NavMenu.razor dienovereenkomstig bij.
• Stap 8: Verfijn MainLayout.razor.
• Stap 9: Pas de pagina's Index, Counter en FetchData aan.

Stap 1: NuGet-pakket installatie

Volg de richtlijnen op nuget.org.

Stap 2: Registreer TablerForNet-service

using TablerForNet;
 builder.Services.AddTablerForNet();

Stap 3: Voeg 'usings' toe

@using TablerForNet;
 @using TablerForNet.Components
 @using GhostlyInc.Components.Icons
 @using TablerForNet.Flags

Stap 4: Conflict met PageTitle-tag

Er is een naamconflict tussen de PageTitle-tag van TablerForNet en die van Microsoft. Verwijder de eerste of hernoem deze expliciet naar 'TablerForNet.Components.PageTitle'. Pas de volgende bestanden aan:

• App.razor
• Index.razor
• Counter.razor
• Fetchdata.razor
• MainLayout.razor

Stap 5: Integreer CSS en JS

<link href="_content/TablerForNet/css/tablerForNet.min.css" rel="stylesheet" />
<script src="_content/TablerForNet/js/tablerForNet.min.js"></script>

Stap 6: Verwijder Bootstrap

Verwijder de Bootstrap-map in de CSS-directory. Verwijder ook de 'open-iconic' map omdat u de tabler-iconen gebruikt. Verwijder de bijbehorende link in het _Host.cshtml-bestand zoals hieronder weergegeven:

<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />

Stap 7: NavMenu herziening

<Navbar Background="NavbarBackground.Dark" Direction="NavbarDirection.Horizontal">

	<NavbarMenu>
		<NavbarMenuItem Href="@($"/")" Text="Home">
			<MenuItemIcon>
				<Icon class="icon" IconType="@TablerIcons.Home" />
			</MenuItemIcon>
		</NavbarMenuItem>
		<NavbarMenuItem Href="@($"/counter")" Text="Counter">
			<MenuItemIcon>
				<Icon class="icon" IconType="@TablerIcons.Brand_days_counter" />
			</MenuItemIcon>
		</NavbarMenuItem>
		<NavbarMenuItem Href="@($"/fetchdata")" Text="Fetch data">
			<MenuItemIcon>
				<Icon class="icon" IconType="@TablerIcons.Database" />
			</MenuItemIcon>
		</NavbarMenuItem>

Stap 8: MainLayout verfijning

@inherits LayoutComponentBase

<NavMenu />

<div class="page">
	<div class="container-fluid mt-2">
		@Body
		<br />
	</div>
</div>

Stap 9: Pas andere pagina's aan

Zoals hieronder te zien is, is er een 'div'-tag toegevoegd aan de indexpagina. Het wordt aanbevolen dit op alle andere pagina's te repliceren.

@page "/"

<div class="container-md">
	<h1>Hello, world!</h1>

	Welcome to your new app.

	<SurveyPrompt Title="How is Blazor working for you?" />
</div>

Gefeliciteerd! U heeft TablerForNet succesvol geïntegreerd in uw Blazor-project. Met deze stappen benut u het volledige potentieel van dit krachtige framework. Profiteer van de verbeterde mogelijkheden en bouw uitstekende webapplicaties. Komt u uitdagingen tegen? Zie ze als groeikansen. Veel programmeerplezier!