TablerForNet Blazor : Guide d'installation et modèle d'administration
Guide complet pour intégrer TablerForNet dans les applications Blazor Server. Remplacez Bootstrap par un framework UI admin moderne et réactif basé sur Tabler.
Améliorez votre développement Blazor avec TablerForNet. Ce framework moderne allie design réactif et SEO pour créer des applications web performantes et bien référencées.
TablerForNet s'appuie sur le célèbre modèle admin Tabler, offrant plus de 300 composants UI pour Blazor. Associé à des métadonnées SEO adaptées et un routage adapté à la culture, vous pouvez créer des applications prêtes pour la production et bien positionnées dans les moteurs de recherche.
Si vous débutez avec Blazor, commencez par notre guide Qu'est-ce que Blazor pour comprendre les bases du framework.
Table des matières
Guide étape par étape pour installer TablerForNet
Ce guide présente l'installation sur un projet Blazor Server .NET 7 neuf. Veuillez suivre les étapes ci-dessous :
- Étape 1 : Installez le package NuGet 'TablerForNet'.
- Étape 2 : Ajoutez les 'usings' nécessaires et enregistrez le service TablerForNet dans Program.cs.
- Étape 3 : Intégrez les 'usings' requis dans le fichier _imports.razor.
- Étape 4 : Modifiez la balise PageTitle.
- Étape 5 : Ajoutez les fichiers CSS et JS 'tablerForNet' dans _Host.cshtml.
- Étape 6 : Supprimez Bootstrap et les ressources associées.
- Étape 7 : Mettez à jour NavMenu.razor en conséquence.
- Étape 8 : Affinez MainLayout.razor.
- Étape 9 : Adaptez les pages Index, Counter et FetchData.
Étape 1 : Installation du package NuGet
Suivez les instructions sur nuget.org.
Étape 2 : Enregistrez le service TablerForNet
using TablerForNet;
builder.Services.AddTablerForNet();Étape 3 : Ajoutez les 'usings'
@using TablerForNet;
@using TablerForNet.Components
@using GhostlyInc.Components.Icons
@using TablerForNet.FlagsÉtape 4 : Conflit de la balise PageTitle
Un conflit de nommage existe entre la balise PageTitle de TablerForNet et celle de Microsoft. Supprimez la première ou renommez-la en 'TablerForNet.Components.PageTitle'. Modifiez les fichiers suivants :
- App.razor
- Index.razor
- Counter.razor
- Fetchdata.razor
- MainLayout.razor
Étape 5 : Intégrez CSS et JS
<link href="_content/TablerForNet/css/tablerForNet.min.css" rel="stylesheet" />
<script src="_content/TablerForNet/js/tablerForNet.min.js"></script>Étape 6 : Supprimez Bootstrap
Supprimez le dossier Bootstrap dans le répertoire CSS. Retirez aussi le dossier 'open-iconic' car vous utiliserez les icônes tabler. Enlevez le lien associé dans _Host.cshtml comme ci-dessous :
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />Étape 7 : Révision du 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>Étape 8 : Ajustement de MainLayout
@inherits LayoutComponentBase
<NavMenu />
<div class="page">
<div class="container-fluid mt-2">
@Body
<br />
</div>
</div>Étape 9 : Adaptez les autres pages
Comme indiqué ci-dessous, une balise 'div' a été ajoutée à la page index. Il est conseillé de faire de même sur toutes les autres pages.
@page "/"
<div class="container-md">
<h1>Hello, world!</h1>
Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />
</div>Félicitations ! Vous avez intégré TablerForNet avec succès dans votre projet Blazor. Vous êtes prêt à exploiter tout le potentiel de ce framework puissant. Profitez des fonctionnalités améliorées pour créer des applications web remarquables. En cas de difficulté, chaque obstacle est une opportunité d'apprentissage. Bon codage !