Blazor yönetici arayüzü

Pratik yönetici ekranları için TablerForNet Blazor UI desenlerini kullanın

NuGet TablerForNet · latest

TablerForNet, Blazor ekiplerine hazır navigasyon, kartlar, formlar, simgeler ve düzen parçaları içeren Tabler tabanlı bir yönetici arayüzü sunar. Uygulamanız bir araç olarak kullanılıyorsa, özel görsel dil gerektiren bir pazarlama sayfası değilse tercih edin.

Bu rehber pratik adımlara odaklanır: NuGet paketini kurun, servisi kaydedin, varsayılan Bootstrap varlıklarını değiştirin, düzen parçalarını taşıyın ve SEO'yu UI bileşenleri yerine meta veriler ve yönlendirme ile yönetin.

Kuruluma başla Uyumu kontrol et Blazor merkezini aç

Hızlı cevap

Blazor uygulaması arka ofis gibi çalışıyorsa TablerForNet faydalıdır

Kullanıcıların yoğun navigasyon, durum kartları, formlar, tablolar, filtreler ve tekrarlanabilir gösterge paneli ekranlarına ihtiyaç duyduğu durumlarda Tabler tarzı bileşen kütüphanesi işe yarar. Sayfa çoğunlukla editoryal içerik, açılış sayfası veya kendi tasarım sistemine ihtiyaç duyan marka deneyimi ise daha az uygundur.

Yönetici düzenleri Yeniden kullanılabilir formlar Tabler simgeleri Bootstrap geçişi

Uygunluk kontrolü

Yinelenen araç ekranları sorun ise yönetici UI çerçevesi kullanın

Birçok ekran aynı navigasyon, form desenleri, boşluk, simge ve durum bileşenlerini paylaşıyorsa zaman kazandırır. Her sayfanın farklı marka yönü veya özel etkileşim modeli gerektiğinde ise yavaşlatabilir.

Uygun

Dahili araçlar ve gösterge panelleri

Kullanıcıların ızgara, filtre, detay sayfası, ayar ekranı ve iş akışı yoğun yönetici alanlarında zaman geçirdiği uygulamalarda TablerForNet kullanın.

Uygun

Tutarlı CRUD ekranları

Birçok sayfa form, tablo, kart, rozet, boş durum ve araç çubuğu eylemlerini tekrar ediyorsa paylaşılan bileşen stili faydalı olur.

Fazla kullanım

Küçük halka açık içerik sayfaları

Tam bir yönetici UI çerçevesi genellikle makaleler, açılış sayfaları, dokümantasyon veya marka tasarımının önde olduğu sayfalar için gereksizdir.

Dikkat edin

Karışık Bootstrap ve Tabler stilleri

Açık bir geçiş planınız yoksa iki görsel temeli aynı anda kullanmayın. Küçük CSS çakışmaları ileride hata ayıklamayı zorlaştırır.

İçindekiler

Kurulum

Paketi kurun, servisleri kaydedin, ardından varsayılan varlıkları bilinçli şekilde değiştirin

Entegrasyonu küçük commitler veya kontrol noktalarıyla yapın. TablerForNet uygulama düzenini değiştirir, bu yüzden paket kurulumu, importlar, statik varlıklar, navigasyon ve düzen değişikliklerini ayrı tutmak incelemeyi kolaylaştırır.

NuGet paketini ekle

Paket yöneticisi veya .NET CLI kullanın, ardından düzeni değiştirmeden önce dotnet restore çalıştırın.

ShellTerminal
dotnet add package TablerForNet

TablerForNet'i kaydet

Servis kaydını Blazor uygulama kurulumunun yanında tutun, böylece ileride yükseltmek kolay olur.

C#Program.cs
using TablerForNet;

builder.Services.AddTablerForNet();

Namespace'leri import et

Sadece kullandığınız namespace'leri ekleyin. Böylece başka bir kütüphane benzer bileşen isimleri sunarsa tür çakışmaları gizlenmez.

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

TablerForNet varlıklarını yükle

CSS ve JavaScript paketini uygulamanızın kullandığı host belgesi veya düzen yoluna bir kez ekleyin.

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

Geçiş

Sayfaya hangi düzenin sahip olduğunu öğrendikten sonra Bootstrap varsayılanlarını değiştirin

Varsayılan Blazor şablonu Bootstrap, başlangıç NavMenu ve basit sayfa konteynerleri kullanır. TablerForNet bu parçaları değiştirebilir, fakat çift CSS, karışık simge setleri veya iki farklı sayfa başlığı bileşeni bırakmamak için dikkatli değiştirin.

01

Mevcut düzeni çıkarın

Navigasyon, sayfa konteynerleri, simgeler, Bootstrap referansları ve sayfa başlığı kullanan şablon dosyalarını listeleyin.

02

Her seferinde bir katmanı değiştirin

Önce varlıklar ve importlarla başlayın, ardından NavMenu, MainLayout ve basit bir sayfayı taşıyın. Karmaşık ekranlara geçmeden önce bunları tamamlayın.

03

Bileşen adı çakışmalarını çözün

PageTitle veya başka bir bileşen adı iki namespace'te varsa, açıkça belirtin ve using listesini kısa tutun.

04

Duyarlı davranışı gözden geçirin

Geçişi tamamlamadan önce masaüstü ve mobil genişliklerde uygulamayı açın. Yönetici navigasyonu genellikle küçük ekranlarda ilk olarak bozulur.

Varsayılan Bootstrap referanslarını kaldır

Tek bir görsel temel kullanın. Şablon CSS'sini bırakmak ileride rastgele görünen küçük düzen hatalarına yol açabilir.

HTMLHost belgesinden kaldır
<!-- 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 çakışmasını yönet

İki kütüphane PageTitle bileşeni sunuyorsa, hangisini kullandığınızı belirtin veya çakışan using'i kaldırın.

RazorAçık bileşen referansı
<TablerForNet.Components.PageTitle>
    Dashboard
</TablerForNet.Components.PageTitle>

Düzen

Navigasyon ve sayfa çerçevesini düzen içine taşı, sonra ekranları düzenle

Temiz bir düzen, sonraki sayfa çalışmalarını öngörülebilir kılar: tek navigasyon modeli, tek içerik konteyneri, tek simge sistemi ve sayfa düzeyinde tutarlı bir eylem alanı. Bireysel sayfaları stilize etmeden önce bunları oluşturun.

Navigasyon örneği

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>

Düzen örneği

RazorMainLayout.razor
@inherits LayoutComponentBase

<NavMenu />

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

SEO gerçeği

TablerForNet arayüz tutarlılığı sağlar, SEO meta verisini kendi başına oluşturmaz

Temiz bir yönetici UI, kullanılabilirlik, erişilebilirlik ve algılanan kaliteyi artırabilir. Ancak canonical URL, hreflang bağlantıları, Open Graph önizlemeleri veya JSON-LD oluşturmaz. Bunları meta verilerde ve yönlendirme kodunda tutun.

İlgili uygulama

UI çerçevesini sayfa meta verileri ve dil-bölge duyarlı bağlantılarla birlikte kullanın

TablerForNet uygulamasında yönetici ekranları dışında halka açık sayfalar, yerelleştirilmiş rotalar, makale içeriği veya taranabilir dokümantasyon varsa bu rehberleri kullanın.

Meta veri rehberi Dil-bölge bağlantıları rehberi

Doğrulama

Sadece paket kurulumunu değil, oluşturulan uygulamayı da kontrol edin

Sayfa derlendikten sonra gerçek UI'yi tarayıcıda inceleyin. Navigasyon, duyarlı kırılma noktaları, odak durumları, çift CSS ve meta veri çıktısı görsel olarak daha kolay fark edilir.

  • Uygulamayı çalıştırın ve yeni düzeni kullanan bir sayfa açın.
  • Bootstrap ve TablerForNet varlıklarının birbiriyle çatışmadığını doğrulayın.
  • Navigasyon, odak durumları, simgeler ve duyarlı kırılma noktalarını kontrol edin.
  • Halka açık sayfalarda başlık, H1, meta açıklama, canonical URL ve JSON-LD çıktısını inceleyin.
  • Paket kurulumu, düzen geçişi ve SEO meta veri değişikliklerini ayrı ayrı inceleyin.

Sık sorulan sorular

TablerForNet Blazor uygulamasına ne katıyor?

Yönetici tarzı uygulamalar için Tabler tabanlı Blazor UI yapı taşları sunar: navigasyon, kartlar, form desenleri, simgeler, düzen parçaları ve gösterge paneline uygun yapı.

TablerForNet kullanırken Bootstrap'i kaldırmalı mıyım?

Genellikle evet. TablerForNet Tabler görsel sistemi üzerine kurulu olduğu için, varsayılan Bootstrap şablon varlıklarını bırakmak çift boşluk, buton, simge ve düzen kuralları oluşturabilir.

TablerForNet her Blazor sitesi için iyi bir seçim mi?

Hayır. Yönetici ekranları, dahili araçlar, gösterge panelleri ve veri yoğun uygulamalar için uygundur. Editoryal sayfalar, açılış sayfaları veya yoğun markalı halka açık siteler için daha küçük özel tasarımlar daha uygun olabilir.

TablerForNet Blazor SEO'yu çözüyor mu?

Hayır. Daha temiz bir arayüz oluşturmanıza yardımcı olur, ancak SEO yine de oluşturulan içerik, başlıklar, açıklamalar, canonical URL'ler, hreflang bağlantıları, Open Graph verileri ve görünür sayfayla uyumlu JSON-LD'ye bağlıdır.

TablerForNet'i Blazor WebAssembly ile kullanabilir miyim?

Evet, ancak aynı ön yüz kuralları geçerlidir: paketleri makul tutun, varlıkları bir kez yükleyin ve SEO önemliyse halka açık içeriği oluşturulmuş HTML olarak sunun.

PageTitle çakışmalarını nasıl yönetmeliyim?

Kullandığınız bileşen için namespace'i açıkça belirtin veya çakışan using'i kaldırın. Bu, derleyicinin ilk bulduğu PageTitle'a güvenmekten daha nettir.