TablerForNet Blazor: Przewodnik instalacji i szablon administracyjny

Github TranslateForNet

NuGet TablerForNet · latest

Stos oprogramowania Blazor Server · VS 2026 · .NET 10 · TablerForNet

Ostatnia aktualizacja 29.01.2026

Kompletny przewodnik krok po kroku integracji TablerForNet z aplikacjami Blazor Server. Zastąp Bootstrap nowoczesnym, responsywnym frameworkiem UI opartym na Tabler.

⤢

Przewodnik krok po kroku instalacji TablerForNet

Przewodnik pokazuje instalację na nowym projekcie Blazor Server .NET 7. Prosimy o wykonanie poniższych kroków:

• Krok 1: Zainstaluj pakiet NuGet 'TablerForNet'.
• Krok 2: Dodaj niezbędne 'usingi' i zarejestruj usługę TablerForNet w pliku Program.cs.
• Krok 3: Dodaj wymagane 'usingi' do pliku _imports.razor.
• Krok 4: Zmodyfikuj znacznik PageTitle.
• Krok 5: Dodaj pliki CSS i JS 'tablerForNet' do pliku _Host.cshtml.
• Krok 6: Usuń Bootstrap i powiązane zasoby.
• Krok 7: Zaktualizuj plik NavMenu.razor odpowiednio.
• Krok 8: Doprecyzuj plik MainLayout.razor.
• Krok 9: Dostosuj strony Index, Counter i FetchData.

Krok 1: Instalacja pakietu NuGet

Postępuj zgodnie z instrukcjami na nuget.org.

Krok 2: Rejestracja usługi TablerForNet

using TablerForNet;
 builder.Services.AddTablerForNet();

Krok 3: Dodanie 'usingów'

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

Krok 4: Konflikt znacznika PageTitle

Występuje konflikt nazw między znacznikiem PageTitle TablerForNet a PageTitle Microsoft. Zaleca się usunięcie pierwszego lub jawne użycie 'TablerForNet.Components.PageTitle'. Wprowadź zmiany w następujących plikach:

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

Krok 5: Integracja CSS i JS

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

Krok 6: Usuń Bootstrap

Usuń folder Bootstrap w katalogu CSS. Dodatkowo usuń folder 'open-iconic', ponieważ używasz ikon tabler. Usuń powiązany link w pliku _Host.cshtml, jak pokazano poniżej:

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

Krok 7: Przebudowa NavMenu

<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>

Krok 8: Dopasowanie MainLayout

@inherits LayoutComponentBase

<NavMenu />

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

Krok 9: Dostosowanie pozostałych stron

Jak widać poniżej, na stronie index dodano znacznik 'div'. Zaleca się powtórzyć to na pozostałych stronach.

@page "/"

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

	Welcome to your new app.

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

Gratulacje! Pomyślnie zintegrowałeś TablerForNet z projektem Blazor. Po wykonaniu tych kroków możesz w pełni wykorzystać możliwości tego potężnego frameworka. Korzystaj z nowych funkcji i twórz wyjątkowe aplikacje webowe. W razie trudności pamiętaj, że każda przeszkoda to szansa na rozwój. Powodzenia w kodowaniu!