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

Github TranslateForNet

NuGet TablerForNet · latest

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

آخر تحديث 10‏‏/8‏‏/1447 بعد الهجرة

دليل شامل خطوة بخطوة لدمج 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 أو إعادة تسميته صراحةً إلى '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 الخاص بك. مع إتمام هذه الخطوات، أنت على طريق استغلال كامل إمكانيات هذا الإطار القوي. استمتع بالميزات المحسنة وابتكر تطبيقات ويب متميزة. إذا واجهت أي تحديات، تذكر أن كل عقبة فرصة للنمو. برمجة موفقة!