TablerForNet Blazor: Kurulum Rehberi ve Yönetim Şablonu

Github TranslateForNet

NuGet TablerForNet · latest

Yazılım Yığını Blazor Server · VS 2026 · .NET 10 · TablerForNet

Son Güncelleme 29.01.2026

TablerForNet'i Blazor Server uygulamalarına entegre etmek için adım adım rehber. Bootstrap yerine Tabler tabanlı modern, duyarlı yönetim arayüzü kullanın.

⤢

TablerForNet Kurulumu için Adım Adım Rehber

Rehber, temiz bir Blazor Server .NET 7 projesinde kurulumu gösterir. Lütfen aşağıdaki adımları izleyin:

• Adım 1: 'TablerForNet' NuGet paketini yükleyin.
• Adım 2: Gerekli 'using' ifadelerini ekleyin ve Program.cs dosyasında TablerForNet servisini kaydedin.
• Adım 3: Gerekli 'using' ifadelerini _imports.razor dosyasına ekleyin.
• Adım 4: PageTitle etiketini değiştirin.
• Adım 5: 'tablerForNet' CSS ve JS dosyalarını _Host.cshtml dosyasına ekleyin.
• Adım 6: Bootstrap ve ilgili dosyaları kaldırın.
• Adım 7: NavMenu.razor dosyasını buna göre güncelleyin.
• Adım 8: MainLayout.razor dosyasını iyileştirin.
• Adım 9: Index, Counter ve FetchData sayfalarını düzenleyin.

Adım 1: NuGet Paketi Kurulumu

nuget.org üzerindeki yönergeleri takip edin.

Adım 2: TablerForNet Servisini Kaydetme

using TablerForNet;
 builder.Services.AddTablerForNet();

Adım 3: 'using' ifadelerini ekleyin

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

Adım 4: PageTitle Etiketi Çakışması

TablerForNet'in PageTitle etiketi ile Microsoft'un PageTitle etiketi arasında isim çakışması var. Öncekini kaldırmanız veya açıkça 'TablerForNet.Components.PageTitle' olarak yeniden adlandırmanız önerilir. Aşağıdaki dosyalarda değişiklik yapın:

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

Adım 5: CSS ve JS Entegrasyonu

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

Adım 6: Bootstrap'i Silin

CSS klasöründeki Bootstrap klasörünü silin. Ayrıca tabler ikonlarını kullanacağınız için 'open-iconic' klasörünü kaldırın. Aşağıda gösterildiği gibi _Host.cshtml dosyasındaki ilgili bağlantıyı kaldırın:

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

Adım 7: NavMenu Güncellemesi

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

Adım 8: MainLayout İncelenmesi

@inherits LayoutComponentBase

<NavMenu />

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

Adım 9: Diğer Sayfaları Düzenleyin

Aşağıda görüldüğü gibi, index sayfasına bir 'div' etiketi eklendi. Bunu diğer tüm sayfalarda da uygulamanız önerilir.

@page "/"

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

	Welcome to your new app.

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

Tebrikler! TablerForNet'i Blazor projenize başarıyla entegre ettiniz. Bu adımları tamamlayarak güçlü çerçevenin tüm potansiyelini kullanmaya hazırsınız. Gelişmiş özellikleri benimseyin ve mükemmel web uygulamaları oluşturun. Karşılaştığınız zorluklar, gelişim için bir fırsattır. İyi kodlamalar!