UI admin Blazor

Pola UI TablerForNet Blazor untuk layar admin praktis

NuGet TablerForNet · latest

TablerForNet menyediakan antarmuka admin berbasis Tabler untuk tim Blazor, lengkap dengan navigasi, kartu, formulir, ikon, dan tata letak siap pakai. Cocok digunakan jika aplikasi adalah alat kerja, bukan halaman pemasaran yang butuh desain visual khusus.

Panduan ini membahas langkah praktis: instal paket NuGet, daftarkan layanan, ganti aset Bootstrap default, migrasi tata letak, dan pastikan SEO tetap diatur lewat metadata dan routing, bukan komponen UI.

Mulai instalasi Cek kecocokan Buka hub Blazor

Jawaban cepat

TablerForNet berguna jika aplikasi Blazor berfungsi seperti back office

Library komponen gaya Tabler membantu jika pengguna butuh navigasi padat, kartu status, formulir, tabel, filter, dan dashboard berulang. Kurang cocok untuk halaman editorial, landing page, atau pengalaman merek yang butuh sistem desain sendiri.

Tata letak admin Formulir reusable Ikon Tabler Migrasi Bootstrap

Pemeriksaan kecocokan

Gunakan framework UI admin hanya jika layar alat berulang jadi masalah

Library ini menghemat waktu jika banyak layar memakai navigasi, pola formulir, jarak, ikon, dan komponen status yang sama. Tapi bisa memperlambat jika tiap halaman butuh gaya merek atau interaksi khusus.

Cocok

Alat internal & dashboard

Gunakan TablerForNet jika pengguna sering bekerja di grid, filter, halaman detail, pengaturan, dan area admin dengan alur kerja padat.

Cocok

Layar CRUD konsisten

Gaya komponen bersama membantu jika banyak halaman mengulang formulir, tabel, kartu, badge, status kosong, dan aksi toolbar.

Terlalu banyak

Halaman konten publik kecil

Framework UI admin lengkap biasanya tidak perlu untuk artikel, landing page, dokumentasi, atau halaman yang desain mereknya dominan.

Perhatian

Campuran gaya Bootstrap dan Tabler

Jangan biarkan dua fondasi visual aktif kecuali ada rencana migrasi jelas. Konflik CSS kecil bisa jadi mahal untuk debug nanti.

Daftar Isi

Instalasi

Instal paket, daftarkan layanan, lalu ganti aset default secara bertahap

Lakukan integrasi dalam commit kecil atau checkpoint. TablerForNet mengubah tata letak aplikasi, jadi lebih mudah ditinjau jika pengaturan paket, impor, aset statis, navigasi, dan tata letak dipisahkan.

Tambah paket NuGet

Gunakan package manager atau .NET CLI, lalu jalankan dotnet restore sebelum mengubah tata letak.

ShellTerminal
dotnet add package TablerForNet

Daftarkan TablerForNet

Letakkan pendaftaran layanan dekat pengaturan Blazor lain agar mudah ditemukan saat upgrade.

C#Program.cs
using TablerForNet;

builder.Services.AddTablerForNet();

Impor namespace

Impor hanya namespace yang dipakai. Ini mencegah konflik tipe jika library lain punya nama komponen serupa.

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

Muat aset TablerForNet

Tambahkan bundel CSS dan JavaScript sekali di dokumen host atau jalur layout yang digunakan aplikasi.

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

Migrasi

Ganti default Bootstrap hanya setelah tahu tata letak mana yang mengelola halaman

Template Blazor default memakai Bootstrap, NavMenu awal, dan kontainer halaman sederhana. TablerForNet bisa mengganti bagian ini, tapi lakukan dengan sengaja agar tidak ada CSS ganda, ikon campur, atau dua komponen judul halaman aktif.

01

Inventarisasi layout saat ini

Daftar file template yang mengelola navigasi, kontainer halaman, ikon, referensi Bootstrap, dan penggunaan judul halaman.

02

Ganti satu lapis per tahap

Mulai dari aset dan impor, lalu migrasi NavMenu, MainLayout, dan satu halaman sederhana sebelum ke layar kompleks.

03

Atasi konflik nama komponen

Jika PageTitle atau nama komponen lain ada di dua namespace, tentukan secara eksplisit dan jaga daftar using tetap ringkas.

04

Tinjau perilaku responsif

Cek tampilan desktop dan mobile sebelum menyatakan migrasi selesai. Navigasi admin biasanya bermasalah duluan di layar kecil.

Hapus referensi Bootstrap default

Gunakan satu fondasi visual saja. Membiarkan CSS template tetap aktif bisa sebabkan bug tata letak kecil yang sulit dilacak.

HTMLHapus dari dokumen host
<!-- 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" />

Atasi konflik PageTitle

Jika dua library punya komponen PageTitle, tentukan yang dimaksud atau hapus using yang bentrok.

RazorReferensi komponen eksplisit
<TablerForNet.Components.PageTitle>
    Dashboard
</TablerForNet.Components.PageTitle>

Layout

Pindahkan navigasi dan elemen halaman ke tata letak sebelum menata layar

Tata letak yang rapi membuat pekerjaan halaman berikutnya lebih mudah: satu model navigasi, satu kontainer konten, satu sistem ikon, dan tempat aksi halaman yang konsisten. Mulai dari sini sebelum menata halaman satu per satu.

Contoh navigasi

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>

Contoh tata letak

RazorMainLayout.razor
@inherits LayoutComponentBase

<NavMenu />

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

Realitas SEO

TablerForNet meningkatkan konsistensi antarmuka, bukan metadata pencarian

UI admin yang rapi bisa meningkatkan kegunaan, aksesibilitas, dan kualitas tampilan. Tapi tidak membuat URL kanonik, hreflang, Open Graph, atau JSON-LD. Atur itu lewat metadata dan routing yang sesuai konten.

Implementasi terkait

Padukan framework UI dengan metadata halaman dan tautan locale (bahasa-wilayah)

Gunakan panduan ini jika aplikasi TablerForNet punya halaman publik, rute lokal, konten artikel, atau dokumentasi yang bisa diindeks di luar layar admin.

Panduan metadata Panduan tautan locale

Validasi

Periksa aplikasi yang dirender, bukan hanya instalasi paket

Setelah halaman dikompilasi, cek UI nyata di browser. Navigasi, breakpoint responsif, status fokus, CSS ganda, dan metadata lebih mudah dilihat langsung daripada dari output package manager.

  • Jalankan aplikasi dan buka halaman yang memakai tata letak baru.
  • Pastikan aset Bootstrap dan TablerForNet tidak saling bertabrakan.
  • Periksa navigasi, status fokus, ikon, dan breakpoint responsif.
  • Cek judul, H1, deskripsi meta, URL kanonik, dan output JSON-LD di halaman publik.
  • Pisahkan pengaturan paket, migrasi tata letak, dan perubahan metadata SEO agar mudah ditinjau.

Pertanyaan umum

Apa yang ditambahkan TablerForNet ke aplikasi Blazor?

Menyediakan blok UI Blazor berbasis Tabler untuk aplikasi admin: navigasi, kartu, pola formulir, ikon, bagian tata letak, dan struktur dashboard.

Haruskah saya menghapus Bootstrap saat memakai TablerForNet?

Biasanya ya. TablerForNet memakai sistem visual Tabler, jadi membiarkan aset Bootstrap default bisa menyebabkan aturan jarak, tombol, ikon, dan tata letak ganda.

Apakah TablerForNet cocok untuk semua situs Blazor?

Tidak. Cocok untuk layar admin, alat internal, dashboard, dan aplikasi data berat. Untuk halaman editorial, landing page, atau situs publik bermerek kuat, desain khusus yang lebih ringan bisa lebih baik.

Apakah TablerForNet menyelesaikan SEO Blazor?

Tidak. TablerForNet membantu membuat antarmuka lebih rapi, tapi SEO tetap tergantung pada konten yang dirender, judul, deskripsi, URL kanonik, hreflang, Open Graph, dan JSON-LD yang sesuai halaman.

Bisakah saya pakai TablerForNet dengan Blazor WebAssembly?

Bisa, tapi aturan frontend sama: jaga bundel wajar, muat aset sekali, dan pastikan konten publik tersedia sebagai HTML yang dirender jika SEO penting.

Bagaimana menangani konflik PageTitle?

Gunakan namespace secara eksplisit untuk komponen yang dimaksud, atau hapus using yang bentrok. Ini lebih jelas daripada mengandalkan PageTitle yang ditemukan compiler lebih dulu.