Panduan Instalasi TablerForNet Blazor dan Template Admin

Github TranslateForNet

NuGet TablerForNet · latest

Tumpukan Perangkat Lunak Blazor Server · VS 2026 · .NET 10 · TablerForNet

Pembaruan Terakhir 29/01/2026

Panduan lengkap langkah demi langkah mengintegrasikan TablerForNet ke aplikasi Blazor Server. Ganti Bootstrap dengan framework UI admin responsif modern berbasis Tabler.

⤢

Panduan Langkah demi Langkah Instalasi TablerForNet

Panduan ini menunjukkan instalasi pada proyek Blazor Server .NET 7 baru. Harap ikuti langkah-langkah berikut:

• Langkah 1: Pasang paket NuGet 'TablerForNet'.
• Langkah 2: Tambahkan 'usings' yang diperlukan dan daftarkan layanan TablerForNet di file Program.cs.
• Langkah 3: Masukkan 'usings' yang dibutuhkan ke dalam file _imports.razor.
• Langkah 4: Ubah Tag PageTitle.
• Langkah 5: Tambahkan file CSS dan JS 'tablerForNet' ke file _Host.cshtml.
• Langkah 6: Hapus Bootstrap dan aset terkait.
• Langkah 7: Perbarui NavMenu.razor sesuai kebutuhan.
• Langkah 8: Perbaiki MainLayout.razor.
• Langkah 9: Sesuaikan halaman Index, Counter, dan FetchData.

Langkah 1: Instalasi Paket NuGet

Lanjutkan sesuai panduan di nuget.org.

Langkah 2: Daftarkan Layanan TablerForNet

using TablerForNet;
 builder.Services.AddTablerForNet();

Langkah 3: Tambahkan 'usings'

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

Langkah 4: Konflik Tag PageTitle

Terjadi bentrok nama antara tag PageTitle TablerForNet dan tag PageTitle Microsoft. Disarankan untuk menghapus yang pertama atau menggantinya secara eksplisit menjadi 'TablerForNet.Components.PageTitle'. Pastikan ubah di file berikut:

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

Langkah 5: Integrasi CSS dan JS

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

Langkah 6: Hapus Bootstrap

Hapus folder Bootstrap di direktori CSS. Juga hapus folder 'open-iconic' karena Anda akan menggunakan ikon tabler. Hapus tautan terkait di file _Host.cshtml seperti berikut:

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

Langkah 7: Perbarui 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>

Langkah 8: Penyempurnaan MainLayout

@inherits LayoutComponentBase

<NavMenu />

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

Langkah 9: Sesuaikan Halaman Lain

Seperti terlihat di bawah, tag 'div' telah ditambahkan ke halaman index. Disarankan untuk menerapkannya di semua halaman lain.

@page "/"

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

	Welcome to your new app.

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

Selamat! Anda telah berhasil mengintegrasikan TablerForNet ke proyek Blazor Anda. Dengan langkah ini selesai, Anda siap memanfaatkan potensi penuh framework ini. Manfaatkan kemampuan yang ditingkatkan dan buat aplikasi web luar biasa. Jika menghadapi tantangan, ingatlah setiap rintangan adalah peluang untuk berkembang. Selamat berkoding!