TablerForNet Blazor: ইনস্টলেশন গাইড ও অ্যাডমিন টেমপ্লেট

Github TranslateForNet

NuGet TablerForNet · latest

সফটওয়্যার স্ট্যাক Blazor Server · VS 2026 · .NET 10 · TablerForNet

সর্বশেষ আপডেট 29/1/2026

Blazor Server অ্যাপ্লিকেশনে TablerForNet সংযুক্তির সম্পূর্ণ ধাপে ধাপে গাইড। Bootstrap এর পরিবর্তে Tabler ভিত্তিক আধুনিক, প্রতিক্রিয়াশীল অ্যাডমিন UI ফ্রেমওয়ার্ক ব্যবহার করুন।

⤢

TablerForNet ইনস্টল করার ধাপে ধাপে গাইড

গাইডে একটি নতুন Blazor Server .NET 7 প্রজেক্টে ইনস্টলেশন দেখানো হয়েছে। অনুগ্রহ করে নিচের ধাপগুলো অনুসরণ করুন:

• ধাপ ১: 'TablerForNet' NuGet প্যাকেজ ইনস্টল করুন।
• ধাপ ২: প্রয়োজনীয় 'usings' যোগ করুন এবং Program.cs ফাইলে TablerForNet সার্ভিস রেজিস্টার করুন।
• ধাপ ৩: _imports.razor ফাইলে প্রয়োজনীয় 'usings' অন্তর্ভুক্ত করুন।
• ধাপ ৪: PageTitle ট্যাগ পরিবর্তন করুন।
• ধাপ ৫: _Host.cshtml ফাইলে 'tablerForNet' CSS ও JS ফাইল যোগ করুন।
• ধাপ ৬: Bootstrap ও সংশ্লিষ্ট অ্যাসেটগুলো সরান।
• ধাপ ৭: NavMenu.razor ফাইলটি প্রয়োজন অনুযায়ী আপডেট করুন।
• ধাপ ৮: MainLayout.razor ফাইলটি পরিমার্জন করুন।
• ধাপ ৯: Index, Counter, এবং FetchData পেজগুলো সামঞ্জস্য করুন।

ধাপ ১: NuGet প্যাকেজ ইনস্টলেশন

nuget.org এর নির্দেশনা অনুযায়ী এগিয়ে যান।

ধাপ ২: TablerForNet সার্ভিস রেজিস্টার করুন

using TablerForNet;
 builder.Services.AddTablerForNet();

ধাপ ৩: 'usings' অন্তর্ভুক্ত করুন

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

ধাপ ৪: PageTitle ট্যাগের সংঘর্ষ

TablerForNet এর PageTitle ট্যাগ ও Microsoft এর PageTitle ট্যাগের মধ্যে নামের সংঘর্ষ রয়েছে। পূর্বেরটি সরিয়ে দিন অথবা স্পষ্টভাবে 'TablerForNet.Components.PageTitle' নামে রিফার করুন। নিচের ফাইলগুলোতে পরিবর্তন নিশ্চিত করুন:

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

ধাপ ৫: CSS ও JS একত্রিত করুন

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

ধাপ ৬: Bootstrap মুছে ফেলুন

CSS ডিরেক্টরির মধ্যে Bootstrap ফোল্ডার মুছে ফেলুন। এছাড়া, Tabler আইকন ব্যবহারের জন্য 'open-iconic' ফোল্ডারও সরান। _Host.cshtml ফাইল থেকে নিচের মতো লিঙ্কটি মুছে ফেলুন:

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

ধাপ ৭: 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>

ধাপ ৮: MainLayout সূক্ষ্ম সমন্বয়

@inherits LayoutComponentBase

<NavMenu />

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

ধাপ ৯: অন্যান্য পেজ সামঞ্জস্য করুন

নিচে দেখা যাচ্ছে, index পেজে একটি 'div' ট্যাগ যোগ করা হয়েছে। এটি অন্যান্য সব পেজেও প্রয়োগ করার পরামর্শ দেওয়া হচ্ছে।

@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 প্রজেক্টে সংযুক্ত করেছেন। এই ধাপগুলো সম্পন্ন করে আপনি এই শক্তিশালী ফ্রেমওয়ার্কের পূর্ণ সম্ভাবনা কাজে লাগাতে প্রস্তুত। উন্নত ফিচারগুলো গ্রহণ করুন এবং অসাধারণ ওয়েব অ্যাপ্লিকেশন তৈরি করুন। কোনো সমস্যা হলে মনে রাখবেন, প্রতিটি বাধাই উন্নতির সুযোগ। শুভ কোডিং!