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, मेटा विवरण, कैनोनिकल URL और JSON-LD आउटपुट देखें।
  • पैकेज सेटअप, लेआउट माइग्रेशन और SEO मेटाडेटा बदलावों को अलग-अलग समीक्षा योग्य रखें।

अक्सर पूछे जाने वाले सवाल

TablerForNet Blazor ऐप में क्या जोड़ता है?

यह व्यवस्थापक-शैली के ऐप्स के लिए Tabler-आधारित Blazor UI बिल्डिंग ब्लॉक्स देता है: नेविगेशन, कार्ड, फॉर्म पैटर्न, आइकन, लेआउट और डैशबोर्ड-अनुकूल संरचना।

TablerForNet इस्तेमाल करते समय क्या मुझे Bootstrap हटाना चाहिए?

अधिकतर मामलों में हाँ। TablerForNet Tabler विज़ुअल सिस्टम पर बना है, इसलिए डिफ़ॉल्ट Bootstrap टेम्पलेट संसाधन छोड़ने से डुप्लिकेट स्पेसिंग, बटन, आइकन और लेआउट नियम बन सकते हैं।

क्या TablerForNet हर Blazor साइट के लिए अच्छा विकल्प है?

नहीं। यह व्यवस्थापक स्क्रीन, आंतरिक टूल, डैशबोर्ड और डेटा-भारी ऐप्स के लिए उपयुक्त है। संपादकीय पेज, लैंडिंग पेज या बहुत ब्रांडेड सार्वजनिक साइट के लिए छोटा कस्टम डिज़ाइन बेहतर हो सकता है।

क्या TablerForNet Blazor SEO हल करता है?

नहीं। यह इंटरफ़ेस साफ बनाने में मदद करता है, लेकिन SEO अभी भी प्रस्तुत सामग्री, टाइटल, विवरण, कैनोनिकल URL, hreflang लिंक, Open Graph डेटा और दृश्य पेज से मेल खाते JSON-LD पर निर्भर करता है।

क्या मैं TablerForNet को Blazor WebAssembly के साथ इस्तेमाल कर सकता हूँ?

हाँ, लेकिन वही फ्रंटएंड नियम लागू होते हैं: बंडल सीमित रखें, संसाधन एक बार लोड करें, और जब SEO ज़रूरी हो तो सार्वजनिक कंटेंट को प्रस्तुत HTML के रूप में उपलब्ध कराएँ।

PageTitle संघर्ष कैसे संभालें?

जिस कंपोनेंट के लिए आप मतलब रखते हैं उसके लिए नेमस्पेस स्पष्ट रूप से लिखें या क्लैशिंग using हटाएँ। यह कंपाइलर के पहले मिलने वाले PageTitle पर निर्भर रहने से बेहतर है।