TablerForNet Blazor admin-UI installationsguide för team

Snabbt svar

TablerForNet är användbart när Blazor-appen fungerar som ett backoffice

Ett komponentbibliotek i Tabler-stil hjälper när användare behöver mycket navigation, statuskort, formulär, tabeller, filter och återkommande dashboardskärmar. Det är mindre användbart för redaktionellt innehåll, landningssidor eller sidor med eget designsystem.

Adminlayouter Återanvändbara formulär Tabler-ikoner Bootstrap-migrering

Passar bra

Använd admin-UI-ramverk bara när många verktygsskärmar är behovet

Biblioteket sparar tid när många skärmar delar navigation, formulärmönster, avstånd, ikoner och statuskomponenter. Det kan bromsa dig om varje sida behöver egen varumärkesprofil eller anpassad interaktion.

Bra val

Interna verktyg och dashboards

Använd TablerForNet när användare arbetar i rutnät, filter, detaljsidor, inställningar och arbetsflödesintensiva adminytor.

Bra val

Konsekventa CRUD-skärmar

En gemensam komponentstil hjälper när många sidor återanvänder formulär, tabeller, kort, märken, tomtillstånd och verktygsfält.

Överdrivet

Små publika innehållssidor

Ett helt admin-UI-ramverk är ofta onödigt för artiklar, landningssidor, dokumentation eller sidor där varumärket ska stå i fokus.

Tänk på

Blandade Bootstrap- och Tabler-stilar

Undvik två visuella grunder om du inte har en tydlig migrationsplan. Små CSS-konflikter blir dyra att felsöka senare.

Innehållsförteckning

Installation

Installera paketet, registrera tjänster och byt sedan ut standardresurser medvetet

Gör integrationen i små commits eller steg. TablerForNet ändrar layouten, så det blir enklare att granska om paketinställningar, importer, resurser, navigation och layoutändringar hanteras var för sig.

Lägg till NuGet-paketet

Använd pakethanteraren eller .NET CLI och kör dotnet restore innan du ändrar layouten.

ShellTerminal

dotnet add package TablerForNet

Registrera TablerForNet

Placera tjänsteregistreringen nära övrig Blazor-setup så framtida uppgraderingar blir lättare att hitta.

C#Program.cs

using TablerForNet;

builder.Services.AddTablerForNet();

Importera namnrymder

Lägg bara till de namnrymder du faktiskt använder. Det minskar risken för typkonflikter om andra bibliotek har liknande komponentnamn.

Razor_Imports.razor

@using TablerForNet
@using TablerForNet.Components
@using TablerForNet.Flags

Ladda TablerForNet-resurser

Lägg till CSS- och JavaScript-paketet en gång i värddokumentet eller layoutfilen som appen använder.

HTMLVärddokument

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

Migrering

Byt ut Bootstrap-standarder först när du vet vilken layout som äger sidan

Standardmallen för Blazor använder Bootstrap, en enkel NavMenu och sidbehållare. TablerForNet kan ersätta dessa, men gör det medvetet så du inte får dubbla CSS, blandade ikoner eller två sidtitlar.

01

Inventera nuvarande layout

Lista mallfiler som hanterar navigation, sidbehållare, ikoner, Bootstrap och sidtitlar.

02

Byt ut ett lager i taget

Börja med resurser och importer, migrera sedan NavMenu, MainLayout och en enkel sida innan du tar de mer komplexa.

03

Lös komponentnamnskrockar

Om PageTitle eller annat komponentnamn finns i två namnrymder, ange det tydligt och håll using-listan liten.

04

Granska responsivitet

Testa både desktop- och mobilbredd innan du anser migreringen klar. Adminnavigation brukar brytas först på små skärmar.

Ta bort standard Bootstrap-referenser

Behåll en visuell grund. Om mallens CSS lämnas kvar kan små layoutfel dyka upp senare.

HTMLTa bort från värddokumentet

<!-- 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" />

Hantera PageTitle-konflikten

Om två bibliotek har en PageTitle-komponent, ange vilken du menar eller ta bort den konfliktande using-satsen.

RazorExplicit komponentreferens

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

Layout

Flytta navigation och sidram till layouten innan du finjusterar sidor

En tydlig layout gör senare sidarbete förutsägbart: en navigation, en innehållsbehållare, ett ikonsystem och en plats för sidåtgärder. Börja där innan du stylar enskilda sidor.

Navigeringsexempel

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>

Layoutexempel

RazorMainLayout.razor

@inherits LayoutComponentBase

<NavMenu />

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

SEO i praktiken

TablerForNet ger konsekvent gränssnitt, men hanterar inte sökmetadata själv

Ett rent admin-UI kan förbättra användbarhet, tillgänglighet och kvalitetskänsla. Det skapar inte kanoniska URL:er, hreflang, Open Graph eller JSON-LD. Hantera det i metadata och routingkod som matchar innehållet.

Relaterad implementation

Kombinera UI-ramverket med sidmetadata och språk-/regionmedvetna länkar

Använd dessa guider när TablerForNet-appen har publika sidor, lokaliserade rutter, artiklar eller dokumentation utöver adminskärmar.

Metadata-guide Guide för språk-/regionlänkar

Validering

Kontrollera den renderade appen, inte bara paketinstallationen

När sidan kompilerat, granska UI i webbläsaren. Navigering, responsiva brytpunkter, fokus, dubbla CSS och metadata syns lättare visuellt än i paketutdata.

Kör appen och öppna en sida med nya layouten.
Kontrollera att Bootstrap- och TablerForNet-resurser inte krockar.
Kontrollera navigation, fokus, ikoner och responsiva brytpunkter.
Granska titel, H1, metabeskrivning, kanonisk URL och JSON-LD på publika sidor.
Håll paketinställning, layoutmigrering och SEO-metadataändringar åtskilda för enklare granskning.

Relaterade resurser

Guiderna täcker närliggande val: Blazor-hostingmodell, produktion, SEO-metadata, språk-/regionmedvetna rutter och Blazor-guidehubben.

Vanliga frågor

Vad tillför TablerForNet i en Blazor-app?

Det ger Tabler-baserade Blazor UI-byggblock för adminappar: navigation, kort, formulärmönster, ikoner, layoutdelar och dashboardstruktur.

Bör jag ta bort Bootstrap när jag använder TablerForNet?

Oftast ja. TablerForNet bygger på Tablers visuella system, så om Bootstrap-mallens resurser är kvar kan du få dubbla regler för avstånd, knappar, ikoner och layout.

Är TablerForNet rätt val för alla Blazor-sajter?

Nej. Det passar adminskärmar, interna verktyg, dashboards och dataintensiva appar. För redaktionella sidor, landningssidor eller starkt varumärkespräglade publika sajter är en enklare egen design ofta bättre.

Löser TablerForNet Blazor SEO?

Nej. Det hjälper dig bygga ett renare UI, men SEO beror fortfarande på innehåll, titlar, beskrivningar, kanoniska URL:er, hreflang, Open Graph och JSON-LD som matchar sidan.

Kan jag använda TablerForNet med Blazor WebAssembly?

Ja, men samma frontendregler gäller: håll paketen rimliga, ladda resurser en gång och se till att publikt innehåll är renderat HTML när SEO är viktigt.

Hur hanterar jag PageTitle-konflikter?

Ange namnrymden explicit för komponenten du menar, eller ta bort den konfliktande using-satsen. Det är tydligare än att låta kompilatorn välja första bästa PageTitle.