TablerForNet Blazor: Installationsguide och Adminmall
Fullständig steg-för-steg-guide för att integrera TablerForNet i Blazor Server-applikationer. Ersätt Bootstrap med ett modernt, responsivt admin-UI baserat på Tabler.
Lyft din Blazor-utveckling med TablerForNet. Detta avancerade ramverk kombinerar responsiv design med SEO-funktioner, så att du kan skapa webbapplikationer med både utmärkt användarupplevelse och god synlighet i sökmotorer.
TablerForNet bygger vidare på den populära Tabler-adminmallen och tillför över 300 UI-komponenter till Blazor. Tillsammans med korrekta SEO-metadata och kulturanpassad routing, kan du skapa produktionsklara applikationer som rankas högt i sökmotorer.
Om du är ny inom Blazor, börja med vår guide: Vad är Blazor för att förstå ramverkets grunder.
Innehållsförteckning
Steg-för-steg-guide för installation av TablerForNet
Guiden visar installation på ett nytt Blazor Server .NET 7-projekt. Följ dessa steg noggrant:
- Steg 1: Installera NuGet-paketet 'TablerForNet'.
- Steg 2: Lägg till nödvändiga 'usings' och registrera TablerForNet-tjänsten i Program.cs.
- Steg 3: Lägg till nödvändiga 'usings' i _imports.razor-filen.
- Steg 4: Ändra PageTitle-taggen.
- Steg 5: Lägg till 'tablerForNet' CSS och JS i _Host.cshtml-filen.
- Steg 6: Ta bort Bootstrap och relaterade filer.
- Steg 7: Uppdatera NavMenu.razor därefter.
- Steg 8: Förfina MainLayout.razor.
- Steg 9: Anpassa sidorna Index, Counter och FetchData.
Steg 1: Installation av NuGet-paket
Följ instruktionerna på nuget.org.
Steg 2: Registrera TablerForNet-tjänsten
using TablerForNet;
builder.Services.AddTablerForNet();Steg 3: Lägg till 'usings'
@using TablerForNet;
@using TablerForNet.Components
@using GhostlyInc.Components.Icons
@using TablerForNet.FlagsSteg 4: Konflikt med PageTitle-taggen
Det finns en namnkollision mellan TablerForNets PageTitle-tag och Microsofts PageTitle-tag. Ta bort den ena eller byt namn till 'TablerForNet.Components.PageTitle'. Ändra i följande filer:
- App.razor
- Index.razor
- Counter.razor
- Fetchdata.razor
- MainLayout.razor
Steg 5: Integrera CSS och JS
<link href="_content/TablerForNet/css/tablerForNet.min.css" rel="stylesheet" />
<script src="_content/TablerForNet/js/tablerForNet.min.js"></script>Steg 6: Ta bort Bootstrap
Radera Bootstrap-mappen i CSS-katalogen. Ta även bort 'open-iconic'-mappen eftersom du använder tabler-ikoner. Ta bort länken i _Host.cshtml enligt nedan:
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />Steg 7: Uppdatera NavMenu
<Navbar Background="NavbarBackground.Dark" Direction="NavbarDirection.Horizontal">
<NavbarMenu>
<NavbarMenuItem Href="@($"/")" Text="Home">
<MenuItemIcon>
<Icon class="icon" IconType="@TablerIcons.Home" />
</MenuItemIcon>
</NavbarMenuItem>
<NavbarMenuItem Href="@($"/counter")" Text="Counter">
<MenuItemIcon>
<Icon class="icon" IconType="@TablerIcons.Brand_days_counter" />
</MenuItemIcon>
</NavbarMenuItem>
<NavbarMenuItem Href="@($"/fetchdata")" Text="Fetch data">
<MenuItemIcon>
<Icon class="icon" IconType="@TablerIcons.Database" />
</MenuItemIcon>
</NavbarMenuItem>Steg 8: Finjustera MainLayout
@inherits LayoutComponentBase
<NavMenu />
<div class="page">
<div class="container-fluid mt-2">
@Body
<br />
</div>
</div>Steg 9: Anpassa övriga sidor
Som visas nedan har en 'div'-tag lagts till på index-sidan. Det rekommenderas att göra likadant på alla andra sidor.
@page "/"
<div class="container-md">
<h1>Hello, world!</h1>
Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />
</div>Grattis! Du har framgångsrikt integrerat TablerForNet i ditt Blazor-projekt. Med dessa steg är du redo att utnyttja ramverkets fulla potential. Skapa fantastiska webbapplikationer och lycka till med kodningen!