دليل تثبيت TablerForNet Blazor وقالب الإدارة

Github TranslateForNet

NuGet TablerForNet · latest

حزمة البرمجيات Blazor Server · VS 2026 · .NET 10 · TablerForNet

آخر تحديث 29‏‏/1‏‏/2026

دليل شامل خطوة بخطوة لدمج TablerForNet في تطبيقات Blazor Server. استبدل Bootstrap بإطار عمل واجهة إدارة حديث ومتجاوب مبني على Tabler.

⤢

دليل خطوة بخطوة لتثبيت TablerForNet

يعرض الدليل التثبيت على مشروع Blazor Server .NET 7 جديد. يرجى اتباع الخطوات التالية:

• الخطوة 1: تثبيت حزمة NuGet 'TablerForNet'.
• الخطوة 2: أضف 'usings' اللازمة وسجل خدمة TablerForNet في ملف Program.cs.
• الخطوة 3: دمج 'usings' المطلوبة في ملف _imports.razor.
• الخطوة 4: تعديل وسم PageTitle.
• الخطوة 5: أضف ملفات CSS و JS الخاصة بـ 'tablerForNet' إلى ملف _Host.cshtml.
• الخطوة 6: إزالة Bootstrap والملفات المرتبطة به.
• الخطوة 7: تحديث ملف NavMenu.razor حسب الحاجة.
• الخطوة 8: تحسين ملف MainLayout.razor.
• الخطوة 9: تعديل صفحات Index و Counter و FetchData.

الخطوة 1: تثبيت حزمة NuGet

تابع التعليمات على موقع nuget.org.

الخطوة 2: تسجيل خدمة TablerForNet

using TablerForNet;
 builder.Services.AddTablerForNet();

الخطوة 3: دمج 'usings'

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

الخطوة 4: تعارض وسم PageTitle

يوجد تعارض في التسمية بين وسم PageTitle الخاص بـ TablerForNet ووسم PageTitle الخاص بمايكروسوفت. يُنصح بحذف الأول أو إعادة تسميته صراحةً إلى 'TablerForNet.Components.PageTitle'. تأكد من تعديل الملفات التالية:

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

الخطوة 5: دمج CSS و JS

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

الخطوة 6: حذف Bootstrap

امسح مجلد Bootstrap داخل مجلد CSS. بالإضافة إلى ذلك، احذف مجلد 'open-iconic' لأنك ستستخدم أيقونات tabler. أزل الرابط المرتبط في ملف _Host.cshtml كما هو موضح أدناه:

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

الخطوة 7: تحديث 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>

الخطوة 8: تحسين MainLayout

@inherits LayoutComponentBase

<NavMenu />

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

الخطوة 9: تعديل الصفحات الأخرى

كما هو موضح أدناه، تم إضافة وسم 'div' إلى صفحة index. يُنصح بتكرار ذلك في جميع الصفحات الأخرى.

@page "/"

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

	Welcome to your new app.

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

تهانينا! لقد نجحت في دمج TablerForNet في مشروع Blazor الخاص بك. مع إتمام هذه الخطوات، أنت على طريق استغلال كامل إمكانيات هذا الإطار القوي. استمتع بالميزات المحسنة وابتكر تطبيقات ويب متميزة. إذا واجهت أي تحديات، تذكر أن كل عقبة فرصة للنمو. برمجة سعيدة!