Blazor-beheerdersinterface

Praktische beheerschermen met TablerForNet Blazor UI-patronen

NuGet TablerForNet · latest

TablerForNet biedt Blazor-teams een Tabler-gebaseerde beheerdersinterface met kant-en-klare navigatie, kaarten, formulieren, iconen en lay-outonderdelen. Gebruik het als de app een tool is die mensen bedienen, niet als het om een marketingpagina met een eigen visuele stijl gaat.

Deze gids richt zich op het praktische werk: installeer het NuGet-pakket, registreer de service, vervang standaard Bootstrap-assets, migreer lay-outonderdelen en laat SEO regelen via metadata en routing in plaats van UI-componenten.

Installatie starten Check of het past Open Blazor-hub

Kort antwoord

TablerForNet is handig als de Blazor-app als backoffice werkt

Een componentenbibliotheek in Tabler-stijl helpt als gebruikers veel navigatie, statuskaarten, formulieren, tabellen, filters en herhaalbare dashboards nodig hebben. Het is minder geschikt voor pagina's met vooral redactionele inhoud, een landingspagina of een merkervaring met een eigen ontwerp.

Beheerderslay-outs Herbruikbare formulieren Tabler-iconen Bootstrap-migratie

Geschiktheidscontrole

Gebruik een admin-UI-framework alleen als je veel herhaalde toolschermen hebt

De bibliotheek bespaart tijd als veel schermen dezelfde navigatie, formulierpatronen, marges, iconen en statuscomponenten delen. Het werkt tegen als elke pagina een andere merkstijl of aangepaste interactie vraagt.

Goede match

Interne tools en dashboards

Gebruik TablerForNet als gebruikers veel tijd doorbrengen in grids, filters, detailpagina's, instellingen en workflow-intensieve beheerschermen.

Goede match

Consistente CRUD-schermen

Een gedeelde componentstijl helpt als veel pagina's formulieren, tabellen, kaarten, badges, lege staten en werkbalkacties herhalen.

Te veel

Kleine openbare contentpagina's

Een volledig beheerders-UI-framework is vaak overbodig voor artikelen, landingspagina's, documentatie of pagina's waar het merkontwerp leidend moet zijn.

Let op

Gemengde Bootstrap- en Tabler-stijlen

Houd niet twee visuele basissen actief zonder een duidelijk migratieplan. Kleine CSS-conflicten zijn later lastig op te lossen.

Inhoudsopgave

Installatie

Installeer het pakket, registreer services en vervang daarna bewust de standaardassets

Integreer in kleine commits of checkpoints. TablerForNet verandert de lay-out van de app, dus het is overzichtelijker als pakketinstellingen, imports, statische assets, navigatie en lay-outwijzigingen apart blijven.

Voeg het NuGet-pakket toe

Gebruik de pakketbeheerder of de .NET CLI en voer dotnet restore uit voordat je de lay-out aanpast.

ShellTerminal
dotnet add package TablerForNet

Registreer TablerForNet

Houd de serviceregistratie bij de rest van de Blazor-appsetup zodat upgrades makkelijk te vinden zijn.

C#Program.cs
using TablerForNet;

builder.Services.AddTablerForNet();

Importeer de namespaces

Voeg alleen de namespaces toe die je echt gebruikt. Zo voorkom je verborgen typeconflicten als een andere bibliotheek vergelijkbare componentnamen heeft.

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

Laad TablerForNet-assets

Voeg de CSS- en JavaScript-bundel één keer toe in het hostdocument of de lay-out die je app gebruikt.

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

Migratie

Vervang standaard Bootstrap pas als je weet welke lay-out de pagina beheert

De standaard Blazor-template gebruikt Bootstrap, een basis NavMenu en eenvoudige paginacontainers. TablerForNet kan die onderdelen vervangen, maar doe dit bewust om dubbele CSS, gemengde iconensets of concurrerende paginatitelcomponenten te voorkomen.

01

Inventariseer de huidige lay-out

Maak een lijst van templatebestanden die navigatie, paginacontainers, iconen, Bootstrap-verwijzingen en paginatitelgebruik beheren.

02

Vervang één laag tegelijk

Begin met assets en imports, migreer dan NavMenu, MainLayout en een eenvoudige pagina voordat je complexe schermen aanpakt.

03

Los componentnaamconflicten op

Als PageTitle of een andere componentnaam in twee namespaces voorkomt, kwalificeer deze expliciet en houd de using-lijst klein.

04

Controleer responsief gedrag

Bekijk desktop- en mobiele breedtes voordat je de migratie afrondt. Admin-navigatie breekt meestal eerst op kleine schermen.

Verwijder standaard Bootstrap-verwijzingen

Houd één visuele basis. Template-CSS laten staan kan later kleine, willekeurige lay-outfouten veroorzaken.

HTMLVerwijder uit hostdocument
<!-- 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" />

Los het PageTitle-conflict op

Als twee bibliotheken een PageTitle-component bieden, geef dan expliciet aan welke je bedoelt of verwijder de conflicterende using.

RazorExpliciete componentreferentie
<TablerForNet.Components.PageTitle>
    Dashboard
</TablerForNet.Components.PageTitle>

Lay-out

Zet navigatie en paginakader in de lay-out voordat je schermen afwerkt

Een overzichtelijke lay-out maakt later werk aan pagina's voorspelbaar: één navigatiemodel, één inhoudscontainer, één iconensysteem en een vaste plek voor paginagebonden acties. Begin daarmee voordat je losse pagina's gaat stijlen.

Navigatievoorbeeld

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>

Lay-outvoorbeeld

RazorMainLayout.razor
@inherits LayoutComponentBase

<NavMenu />

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

SEO-realiteit

TablerForNet verbetert de interfaceconsistentie, niet de zoekmetadata zelf

Een overzichtelijke beheerdersinterface kan de bruikbaarheid, toegankelijkheid en ervaren kwaliteit verbeteren. Het genereert geen canonical URLs, hreflang-links, Open Graph-voorbeelden of JSON-LD. Houd die zaken in metadata en routingcode die overeenkomt met de zichtbare inhoud.

Gerelateerde implementatie

Combineer het UI-framework met paginametadata en taal-regio-gevoelige links

Gebruik deze gidsen als de TablerForNet-app openbare pagina's, gelokaliseerde routes, artikelinhoud of doorzoekbare documentatie naast de beheerschermen heeft.

Metadata-gids Taal-regio-links-gids

Validatie

Controleer de gerenderde app, niet alleen de pakketinstallatie

Bekijk na compilatie de echte UI in een browser. Navigatie, responsieve breekpunten, focusstatussen, dubbele CSS en metadata-uitvoer zie je sneller visueel dan in de pakketbeheerder.

  • Start de app en open een pagina met de nieuwe lay-out.
  • Controleer dat Bootstrap- en TablerForNet-assets elkaar niet in de weg zitten.
  • Controleer navigatie, focusstatussen, iconen en responsieve breekpunten.
  • Bekijk titel, H1, metabeschrijving, canonical URL en JSON-LD-uitvoer op openbare pagina's.
  • Houd pakketinstellingen, lay-outmigratie en SEO-metadatawijzigingen als losse onderdelen reviewbaar.

Veelgestelde vragen

Wat voegt TablerForNet toe aan een Blazor-app?

Het biedt Tabler-gebaseerde Blazor UI-bouwstenen voor admin-applicaties: navigatie, kaarten, formulierpatronen, iconen, lay-outonderdelen en een dashboardvriendelijke structuur.

Moet ik Bootstrap verwijderen bij gebruik van TablerForNet?

Meestal wel. TablerForNet is gebaseerd op het Tabler-visuele systeem, dus standaard Bootstrap-assets laten staan kan dubbele marges, knoppen, iconen en lay-outregels geven.

Is TablerForNet geschikt voor elke Blazor-site?

Nee. Het past bij beheerschermen, interne tools, dashboards en data-intensieve apps. Voor redactionele pagina's, landingspagina's of sterk merkgebonden sites is een kleiner, eigen ontwerp vaak beter.

Lost TablerForNet SEO voor Blazor op?

Nee. Het helpt je een schonere interface te bouwen, maar SEO hangt af van gerenderde inhoud, titels, beschrijvingen, canonical URLs, hreflang-links, Open Graph-data en JSON-LD die bij de zichtbare pagina passen.

Kan ik TablerForNet gebruiken met Blazor WebAssembly?

Ja, maar dezelfde frontendregels gelden: houd bundels redelijk, laad assets één keer en zorg dat openbare inhoud als gerenderde HTML beschikbaar is als SEO belangrijk is.

Hoe ga ik om met PageTitle-conflicten?

Gebruik de namespace expliciet voor de bedoelde component of verwijder de conflicterende using. Dat is duidelijker dan vertrouwen op welke PageTitle de compiler als eerste vindt.