Blazor অ্যাডমিন UI

প্র্যাকটিক্যাল অ্যাডমিন স্ক্রিনের জন্য TablerForNet Blazor UI প্যাটার্ন ব্যবহার

NuGet TablerForNet · latest

TablerForNet Blazor টিমের জন্য Tabler-ভিত্তিক অ্যাডমিন ইন্টারফেস দেয়, যেখানে তৈরি নেভিগেশন, কার্ড, ফর্ম, আইকন ও লেআউট অংশ থাকে। যখন অ্যাপটি ব্যবহারের টুল, তখনই এটি ব্যবহার করুন—মার্কেটিং পেজ বা কাস্টম ডিজাইন দরকার এমন জায়গায় নয়।

এই গাইডে দেখানো হয়েছে: NuGet প্যাকেজ ইনস্টল, সার্ভিস রেজিস্ট্রেশন, ডিফল্ট Bootstrap সরানো, লেআউট পরিবর্তন, এবং SEO যেন UI কম্পোনেন্টের বদলে মেটাডেটা ও রাউটিং থেকে হয়।

ইনস্টলেশন শুরু উপযোগিতা যাচাই করুন Blazor হাব খুলুন

সংক্ষিপ্ত উত্তর

যখন Blazor অ্যাপ ব্যাক অফিসের মতো চলে, তখন TablerForNet কার্যকর

Tabler-স্টাইল কম্পোনেন্ট লাইব্রেরি দরকার পড়ে যখন ইউজারদের ঘন নেভিগেশন, স্ট্যাটাস কার্ড, ফর্ম, টেবিল, ফিল্টার ও ড্যাশবোর্ড স্ক্রিন লাগে। সম্পাদকীয় বা ব্র্যান্ডিং পেজে এই লাইব্রেরি কম কাজে আসে।

অ্যাডমিন লেআউট পুনঃব্যবহারযোগ্য ফর্ম Tabler আইকন Bootstrap স্থানান্তর

ফিট চেক

শুধু পুনরাবৃত্ত টুল স্ক্রিন থাকলে অ্যাডমিন UI ফ্রেমওয়ার্ক ব্যবহার করুন

অনেক স্ক্রিনে একই নেভিগেশন, ফর্ম, স্পেসিং, আইকন ও স্ট্যাটাস কম্পোনেন্ট থাকলে লাইব্রেরি সময় বাঁচায়। প্রতিটি পেজে আলাদা ব্র্যান্ড বা ইন্টারঅ্যাকশন দরকার হলে এটি ধীর করে দেয়।

উপযুক্ত

অভ্যন্তরীণ টুল ও ড্যাশবোর্ড

ইউজাররা গ্রিড, ফিল্টার, বিস্তারিত পেজ, সেটিংস স্ক্রিন বা ওয়ার্কফ্লো-ভিত্তিক অ্যাডমিন এলাকায় সময় কাটালে TablerForNet ব্যবহার করুন।

উপযুক্ত

সামঞ্জস্যপূর্ণ CRUD স্ক্রিন

অনেক পেজে ফর্ম, টেবিল, কার্ড, ব্যাজ, খালি অবস্থা বা টুলবার অ্যাকশন থাকলে শেয়ার করা কম্পোনেন্ট স্টাইল কাজে দেয়।

অতিরিক্ত

ছোট পাবলিক কনটেন্ট পেজ

নিবন্ধ, ল্যান্ডিং পেজ, ডকুমেন্টেশন বা যেখানে ব্র্যান্ড ডিজাইন দরকার, সেখানে সম্পূর্ণ অ্যাডমিন UI ফ্রেমওয়ার্ক সাধারণত দরকার হয় না।

সতর্ক থাকুন

মিশ্র Bootstrap ও Tabler স্টাইল

স্পষ্ট মাইগ্রেশন প্ল্যান ছাড়া দুইটা ভিজ্যুয়াল ভিত্তি রাখবেন না। ছোট CSS কনফ্লিক্ট পরে ডিবাগ করতে ঝামেলা হয়।

বিষয়বস্তু সূচি

ইনস্টলেশন

প্যাকেজ ইনস্টল, সার্ভিস রেজিস্টার, তারপর ডিফল্ট সম্পদ সচেতনভাবে প্রতিস্থাপন করুন

ইন্টিগ্রেশন ছোট ছোট কমিট বা চেকপয়েন্টে করুন। TablerForNet অ্যাপের লেআউট বদলায়, তাই প্যাকেজ সেটআপ, ইম্পোর্ট, স্ট্যাটিক অ্যাসেট, নেভিগেশন ও লেআউট আলাদা করে পরিবর্তন করলে রিভিউ সহজ হয়।

NuGet প্যাকেজ যোগ করুন

প্যাকেজ ম্যানেজার বা .NET CLI দিয়ে ইনস্টল করুন, তারপর লেআউট পরিবর্তনের আগে dotnet restore চালান।

Shellটার্মিনাল
dotnet add package TablerForNet

TablerForNet রেজিস্টার করুন

সার্ভিস রেজিস্ট্রেশন Blazor অ্যাপ সেটআপের পাশে রাখুন, যাতে ভবিষ্যতে খুঁজে পাওয়া সহজ হয়।

C#Program.cs
using TablerForNet;

builder.Services.AddTablerForNet();

নেমস্পেস ইম্পোর্ট করুন

শুধু দরকারি নেমস্পেস যোগ করুন। এতে অন্য লাইব্রেরির কম্পোনেন্ট নামের সংঘর্ষ লুকানো পড়ে না।

Razor_Imports.razor
@using TablerForNet
@using TablerForNet.Components
@using TablerForNet.Flags

TablerForNet সম্পদ লোড করুন

CSS ও JavaScript বান্ডেল একবার হোস্ট ডকুমেন্ট বা লেআউট পাথে যোগ করুন, যেটা অ্যাপ ব্যবহার করে।

HTMLহোস্ট ডকুমেন্ট
<link href="_content/TablerForNet/css/tablerForNet.min.css" rel="stylesheet" />
<script src="_content/TablerForNet/js/tablerForNet.min.js"></script>

স্থানান্তর

Bootstrap ডিফল্ট শুধু তখনই সরান, যখন জানেন কোন লেআউট পেজের মালিক

ডিফল্ট Blazor টেমপ্লেটে Bootstrap, NavMenu ও সাধারণ পেজ কন্টেইনার থাকে। TablerForNet এগুলো বদলাতে পারে, তবে সচেতনভাবে করুন—না হলে ডুপ্লিকেট CSS, মিশ্র আইকন বা দুইটা পেজ টাইটেল কম্পোনেন্ট থাকতে পারে।

01

বর্তমান লেআউট ইনভেন্টরি করুন

নেভিগেশন, পেজ কন্টেইনার, আইকন, Bootstrap রেফারেন্স ও পেজ টাইটেল ব্যবহারের টেমপ্লেট ফাইলের তালিকা করুন।

02

একবারে এক স্তর বদলান

প্রথমে সম্পদ ও ইম্পোর্ট, তারপর NavMenu, MainLayout ও সহজ পেজ মাইগ্রেট করুন—জটিল স্ক্রিনের আগে।

03

কম্পোনেন্ট নাম কনফ্লিক্ট সমাধান করুন

PageTitle বা অন্য কম্পোনেন্ট দুই নেমস্পেসে থাকলে স্পষ্টভাবে ব্যবহার করুন এবং using তালিকা ছোট রাখুন।

04

রেসপনসিভ আচরণ দেখুন

মাইগ্রেশন শেষ বলার আগে ডেস্কটপ ও মোবাইল স্ক্রিনে দেখুন। অ্যাডমিন নেভিগেশন সাধারণত ছোট স্ক্রিনে আগে ভেঙে যায়।

ডিফল্ট Bootstrap রেফারেন্স সরান

একটা ভিজ্যুয়াল ভিত্তি রাখুন। টেমপ্লেট CSS রেখে দিলে পরে এলোমেলো লেআউট বাগ দেখা দিতে পারে।

HTMLহোস্ট ডকুমেন্ট থেকে সরান
<!-- Remove these default template references when TablerForNet owns the visual layout. -->
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/open-iconic/font/css/open-iconic-bootstrap.min.css" rel="stylesheet" />

PageTitle সংঘর্ষ সামলান

দুই লাইব্রেরি PageTitle কম্পোনেন্ট দিলে, যেটা দরকার সেটা স্পষ্ট করুন বা সংঘর্ষকারী using সরান।

Razorস্পষ্ট কম্পোনেন্ট রেফারেন্স
<TablerForNet.Components.PageTitle>
    Dashboard
</TablerForNet.Components.PageTitle>

লেআউট

নেভিগেশন ও পেজ ক্রোম আগে লেআউটে আনুন, পরে স্ক্রিন সাজান

পরিষ্কার লেআউট থাকলে পরের পেজের কাজ সহজ হয়: এক নেভিগেশন মডেল, এক কন্টেন্ট কন্টেইনার, এক আইকন সিস্টেম, আর পেজ অ্যাকশনের জন্য নির্দিষ্ট জায়গা। আগে এগুলো ঠিক করুন, পরে পেজ স্টাইল দিন।

নেভিগেশন উদাহরণ

RazorNavMenu.razor
<Navbar Background="NavbarBackground.Dark" Direction="NavbarDirection.Horizontal">
    <NavbarMenu>
        <NavbarMenuItem Href="/" Text="Home">
            <MenuItemIcon>
                <Icon class="icon" IconType="@TablerIcons.Home" />
            </MenuItemIcon>
        </NavbarMenuItem>

        <NavbarMenuItem Href="/reports" Text="Reports">
            <MenuItemIcon>
                <Icon class="icon" IconType="@TablerIcons.Chart_bar" />
            </MenuItemIcon>
        </NavbarMenuItem>
    </NavbarMenu>
</Navbar>

লেআউট উদাহরণ

RazorMainLayout.razor
@inherits LayoutComponentBase

<NavMenu />

<div class="page">
    <main class="container-xl py-3">
        @Body
    </main>
</div>

SEO বাস্তবতা

TablerForNet ইন্টারফেস সামঞ্জস্য আনে, নিজে থেকে সার্চ মেটাডেটা দেয় না

পরিষ্কার অ্যাডমিন UI ইউজযোগ্যতা, অ্যাক্সেসিবিলিটি ও মান বাড়াতে পারে। কিন্তু canonical URL, hreflang, Open Graph বা JSON-LD তৈরি করে না। এসব নিয়ম মেটাডেটা ও রাউটিং কোডে রাখুন, দৃশ্যমান কনটেন্টের সাথে মিলিয়ে।

সম্পর্কিত বাস্তবায়ন

UI ফ্রেমওয়ার্ককে পেজ মেটাডেটা ও ভাষা-দেশ-সচেতন লিঙ্কের সাথে যুক্ত করুন

TablerForNet অ্যাপে যদি পাবলিক পেজ, লোকালাইজড রুট, নিবন্ধ কনটেন্ট বা অ্যাডমিন স্ক্রিনের বাইরে ডকুমেন্টেশন থাকে, এই গাইডগুলো দেখুন।

মেটাডেটা গাইড কালচার লিঙ্ক গাইড

যাচাই

শুধু প্যাকেজ ইনস্টল নয়, রেন্ডার হওয়া অ্যাপও পরীক্ষা করুন

পৃষ্ঠা কম্পাইল হলে ব্রাউজারে আসল UI দেখুন। নেভিগেশন, রেসপনসিভ ব্রেকপয়েন্ট, ফোকাস স্টেট, ডুপ্লিকেট CSS ও মেটাডেটা ভিজ্যুয়ালি ধরা সহজ।

  • অ্যাপ চালান এবং নতুন লেআউটসহ একটি পেজ খুলুন।
  • Bootstrap ও TablerForNet সম্পদে দ্বন্দ্ব হচ্ছে কিনা নিশ্চিত করুন।
  • নেভিগেশন, ফোকাস স্টেট, আইকন ও রেসপনসিভ ব্রেকপয়েন্ট যাচাই করুন।
  • পাবলিক পেজে টাইটেল, H1, মেটা বিবরণ, canonical URL ও JSON-LD আউটপুট দেখুন।
  • প্যাকেজ সেটআপ, লেআউট মাইগ্রেশন ও SEO মেটাডেটা পরিবর্তন আলাদা আলাদা রিভিউযোগ্য রাখুন।

সাধারণ প্রশ্ন

TablerForNet Blazor অ্যাপে কী যোগ করে?

এটি অ্যাডমিন-স্টাইল অ্যাপের জন্য Tabler-ভিত্তিক Blazor UI বিল্ডিং ব্লক দেয়: নেভিগেশন, কার্ড, ফর্ম প্যাটার্ন, আইকন, লেআউট ও ড্যাশবোর্ড-সহজ কাঠামো।

TablerForNet ব্যবহার করলে Bootstrap সরানো উচিত?

সাধারণত হ্যাঁ। TablerForNet Tabler ভিজ্যুয়াল সিস্টেমের ওপর তৈরি, তাই ডিফল্ট Bootstrap টেমপ্লেট রাখলে ডুপ্লিকেট স্পেসিং, বাটন, আইকন ও লেআউট নিয়ম হতে পারে।

TablerForNet কি সব Blazor সাইটের জন্য উপযুক্ত?

না। এটি অ্যাডমিন স্ক্রিন, অভ্যন্তরীণ টুল, ড্যাশবোর্ড ও ডেটা-ভিত্তিক অ্যাপের জন্য ভালো। সম্পাদকীয়, ল্যান্ডিং বা ব্র্যান্ডেড পাবলিক সাইটে ছোট কাস্টম ডিজাইনই ভালো।

TablerForNet কি Blazor SEO ঠিক করে?

না। এটি পরিষ্কার ইন্টারফেস বানাতে সাহায্য করে, কিন্তু SEO নির্ভর করে রেন্ডার হওয়া কনটেন্ট, টাইটেল, বিবরণ, canonical URL, hreflang, Open Graph ও JSON-LD-র ওপর, যা দৃশ্যমান পেজের সাথে মেলে।

আমি কি Blazor WebAssembly-তে TablerForNet ব্যবহার করতে পারি?

হ্যাঁ, তবে একই ফ্রন্টএন্ড নিয়ম: বান্ডেল যুক্তিসঙ্গত রাখুন, সম্পদ একবার লোড করুন, আর SEO দরকার হলে পাবলিক কনটেন্ট HTML হিসেবে দিন।

PageTitle সংঘর্ষ কিভাবে সামলাব?

যে কম্পোনেন্ট বোঝাতে চান, তার জন্য স্পষ্ট নেমস্পেস ব্যবহার করুন বা সংঘর্ষকারী using সরান। এতে কম্পাইলার যেটা আগে পায়, তার ওপর নির্ভর করতে হয় না।