TablerForNet Blazor: Guida all'installazione e template admin
Guida completa passo passo per integrare TablerForNet in applicazioni Blazor Server. Sostituisci Bootstrap con un moderno framework UI admin responsive basato su Tabler.
Migliora lo sviluppo Blazor con TablerForNet. Questo framework all'avanguardia unisce design responsive e funzionalità SEO, permettendo di creare applicazioni web con ottima esperienza utente e visibilità nei motori di ricerca.
TablerForNet si basa sul popolare template admin Tabler, offrendo oltre 300 componenti UI per Blazor. Insieme a metadata SEO appropriati e routing sensibile alla cultura, puoi sviluppare applicazioni pronte per la produzione con buon posizionamento nei motori di ricerca.
Se sei nuovo a Blazor, inizia con la nostra Guida 'Cos'è Blazor' per comprendere i fondamenti del framework.
Indice
Guida passo passo all'installazione di TablerForNet
La guida mostra l'installazione su un nuovo progetto Blazor Server .NET 7. Segui questi passaggi:
- Passo 1: Installa il pacchetto NuGet 'TablerForNet'.
- Passo 2: Aggiungi i 'using' necessari e registra il servizio TablerForNet in Program.cs.
- Passo 3: Inserisci i 'using' richiesti nel file _imports.razor.
- Passo 4: Modifica il tag PageTitle.
- Passo 5: Aggiungi i file CSS e JS di 'tablerForNet' in _Host.cshtml.
- Passo 6: Rimuovi Bootstrap e asset correlati.
- Passo 7: Aggiorna NavMenu.razor di conseguenza.
- Passo 8: Affina MainLayout.razor.
- Passo 9: Adatta le pagine Index, Counter e FetchData.
Passo 1: Installazione pacchetto NuGet
Procedi seguendo le indicazioni su nuget.org.
Passo 2: Registra il servizio TablerForNet
using TablerForNet;
builder.Services.AddTablerForNet();Passo 3: Inserisci i 'using'
@using TablerForNet;
@using TablerForNet.Components
@using GhostlyInc.Components.Icons
@using TablerForNet.FlagsPasso 4: Conflitto tag PageTitle
Esiste un conflitto tra il tag PageTitle di TablerForNet e quello di Microsoft. Si consiglia di rimuovere il primo o rinominarlo esplicitamente in 'TablerForNet.Components.PageTitle'. Modifica i seguenti file:
- App.razor
- Index.razor
- Counter.razor
- Fetchdata.razor
- MainLayout.razor
Passo 5: Integra CSS e JS
<link href="_content/TablerForNet/css/tablerForNet.min.css" rel="stylesheet" />
<script src="_content/TablerForNet/js/tablerForNet.min.js"></script>Passo 6: Elimina Bootstrap
Elimina la cartella Bootstrap nella directory CSS. Rimuovi anche la cartella 'open-iconic' poiché userai le icone tabler. Elimina il link associato in _Host.cshtml come mostrato:
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />Passo 7: Revisione 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>Passo 8: Ottimizzazione MainLayout
@inherits LayoutComponentBase
<NavMenu />
<div class="page">
<div class="container-fluid mt-2">
@Body
<br />
</div>
</div>Passo 9: Adatta altre pagine
Come mostrato, è stato aggiunto un tag 'div' nella pagina index. Si consiglia di replicarlo in tutte le altre pagine.
@page "/"
<div class="container-md">
<h1>Hello, world!</h1>
Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />
</div>Congratulazioni! Hai integrato con successo TablerForNet nel tuo progetto Blazor. Ora puoi sfruttare appieno questo potente framework. Approfitta delle nuove funzionalità e crea applicazioni web eccellenti. Se incontri difficoltà, ricorda che ogni ostacolo è un'opportunità di crescita. Buona programmazione!