Interface d'administration Blazor
Modèles TablerForNet Blazor pour écrans d'administration pratiques
TablerForNet fournit aux équipes Blazor une interface d'administration basée sur Tabler avec navigation, cartes, formulaires, icônes et éléments de mise en page prêts à l'emploi. Utilisez-le quand l'application sert d'outil, pas pour une page marketing nécessitant un design sur mesure.
Ce guide traite des étapes concrètes : installer le package NuGet, enregistrer le service, remplacer les ressources Bootstrap par défaut, migrer la mise en page et gérer le SEO via les métadonnées et le routage plutôt que par les composants UI.
Réponse rapide
TablerForNet est utile quand l'app Blazor sert de back office
Une bibliothèque de composants Tabler est utile si les utilisateurs ont besoin d'une navigation dense, de cartes d'état, de formulaires, de tableaux, de filtres et d'écrans de tableau de bord répétitifs. Elle l'est moins pour du contenu éditorial, une page d'accueil ou une expérience de marque nécessitant un design spécifique.
Vérification d’adéquation
N'utilisez un framework d'admin que si vous avez beaucoup d'écrans outils similaires
La bibliothèque fait gagner du temps si plusieurs écrans partagent navigation, formulaires, espacements, icônes et composants d'état. Elle peut ralentir si chaque page a besoin d'un design ou d'interactions spécifiques.
Outils internes et tableaux de bord
Utilisez TablerForNet si les utilisateurs passent du temps dans des grilles, filtres, pages de détails, écrans de paramètres et zones d'administration à flux de travail soutenu.
Écrans CRUD cohérents
Un style de composants partagé aide si beaucoup de pages reprennent formulaires, tableaux, cartes, badges, états vides et actions de barre d'outils.
Petites pages de contenu public
Un framework d'admin complet est souvent superflu pour des articles, pages d'accueil, documentation ou pages où le design de marque doit dominer.
Styles Bootstrap et Tabler mélangés
N'activez pas deux bases visuelles sans plan de migration clair. Les petits conflits CSS coûtent cher à corriger ensuite.
Table des matières
Installation
Installez le package, enregistrez les services, puis remplacez les ressources par défaut de façon réfléchie
Faites l'intégration par petits commits ou étapes. TablerForNet modifie la mise en page de l'application, il est donc plus simple de séparer configuration du package, imports, ressources statiques, navigation et mise en page.
Ajouter le package NuGet
Utilisez le gestionnaire de packages ou la CLI .NET, puis exécutez dotnet restore avant de modifier la mise en page.
dotnet add package TablerForNetEnregistrer TablerForNet
Gardez l'enregistrement du service près de la configuration Blazor pour faciliter les futures évolutions.
using TablerForNet;
builder.Services.AddTablerForNet();Importer les espaces de noms
N'ajoutez que les espaces de noms réellement utilisés. Cela évite les conflits de types si une autre bibliothèque propose des noms similaires.
@using TablerForNet
@using TablerForNet.Components
@using TablerForNet.FlagsCharger les ressources TablerForNet
Ajoutez le bundle CSS et JavaScript une seule fois dans le document hôte ou le chemin de mise en page utilisé par votre application.
<link href="_content/TablerForNet/css/tablerForNet.min.css" rel="stylesheet" />
<script src="_content/TablerForNet/js/tablerForNet.min.js"></script>Migration
Remplacez Bootstrap seulement après avoir identifié la mise en page principale
Le template Blazor par défaut utilise Bootstrap, un NavMenu de base et des conteneurs simples. TablerForNet peut remplacer ces éléments, mais faites-le de façon intentionnelle pour éviter les CSS dupliqués, icônes mélangées ou deux composants de titre de page.
Inventorier la mise en page actuelle
Listez les fichiers du template qui gèrent navigation, conteneurs de page, icônes, références Bootstrap et titres de page.
Remplacez une couche à la fois
Commencez par les ressources et imports, puis migrez NavMenu, MainLayout et une page simple avant de traiter les écrans complexes.
Résolvez les conflits de noms de composants
Si PageTitle ou un autre composant existe dans deux espaces de noms, qualifiez-le explicitement et limitez la liste des using.
Vérifiez le comportement responsive
Testez en desktop et mobile avant de valider la migration. La navigation admin casse souvent d'abord sur petits écrans.
Supprimer les références Bootstrap par défaut
Gardez une seule base visuelle. Laisser le CSS du template actif peut provoquer des bugs de mise en page difficiles à diagnostiquer.
<!-- 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" />Gérer le conflit PageTitle
Si deux bibliothèques proposent un composant PageTitle, précisez celui à utiliser ou supprimez l'import en conflit.
<TablerForNet.Components.PageTitle>
Dashboard
</TablerForNet.Components.PageTitle>Mise en page
Placez navigation et chrome de page dans la mise en page avant de peaufiner les écrans
Une mise en page claire rend le travail sur les pages plus prévisible : un modèle de navigation, un conteneur de contenu, un système d'icônes et un emplacement cohérent pour les actions de page. Commencez par là avant de styliser les pages individuelles.
Exemple de navigation
<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>Exemple de mise en page
@inherits LayoutComponentBase
<NavMenu />
<div class="page">
<main class="container-xl py-3">
@Body
</main>
</div>Réalité SEO
TablerForNet améliore la cohérence de l'interface, pas les métadonnées de recherche
Une interface d'administration propre améliore l'utilisabilité, l'accessibilité et la qualité perçue. Elle ne crée pas d'URL canoniques, de liens hreflang, d'Open Graph ou de JSON-LD. Gérez ces aspects dans les métadonnées et le routage adaptés au contenu.
Implémentation associée
Associez le framework UI aux métadonnées de page et aux liens adaptés à la langue-région
Consultez ces guides si l'application TablerForNet comporte des pages publiques, routes localisées, contenu d'article ou documentation indexable en plus des écrans d'administration.
Validation
Vérifiez l'application rendue, pas juste l'installation du package
Après compilation, vérifiez l'interface réelle dans un navigateur. Navigation, responsive, focus, CSS en double et métadonnées sont plus faciles à repérer visuellement que via le gestionnaire de packages.
- Lancez l'application et ouvrez une page avec la nouvelle mise en page.
- Vérifiez que Bootstrap et TablerForNet ne se gênent pas.
- Contrôlez navigation, focus, icônes et points de rupture responsive.
- Vérifiez titre, H1, méta description, URL canonique et sortie JSON-LD sur les pages publiques.
- Gardez configuration du package, migration de la mise en page et SEO séparés pour faciliter la relecture.
Questions fréquentes
Que propose TablerForNet à une app Blazor ?
Il apporte des blocs UI Blazor basés sur Tabler pour les applications d'administration : navigation, cartes, modèles de formulaires, icônes, éléments de mise en page et structure adaptée aux tableaux de bord.
Faut-il supprimer Bootstrap en utilisant TablerForNet ?
En général oui. TablerForNet repose sur le système visuel Tabler, donc garder Bootstrap peut entraîner des doublons d'espacement, boutons, icônes et règles de mise en page.
TablerForNet convient-il à tous les sites Blazor ?
Non. Il est adapté aux écrans d'administration, outils internes, tableaux de bord et apps riches en données. Pour les pages éditoriales, d'accueil ou sites publics très brandés, un design personnalisé plus léger est souvent préférable.
TablerForNet règle-t-il le SEO Blazor ?
Non. Il aide à une interface plus propre, mais le SEO dépend du contenu rendu, des titres, descriptions, URL canoniques, liens hreflang, données Open Graph et JSON-LD adaptés à la page.
Puis-je utiliser TablerForNet avec Blazor WebAssembly ?
Oui, mais les mêmes règles frontend s'appliquent : gardez les bundles raisonnables, chargez les ressources une seule fois et assurez-vous que le contenu public est bien rendu en HTML si le SEO compte.
Comment gérer les conflits PageTitle ?
Utilisez explicitement l'espace de noms pour le composant voulu ou supprimez le using en conflit. C'est plus clair que de laisser le compilateur choisir le premier PageTitle trouvé.