Pour Commencer

Guide d'Installation

Installer le Package

 dotnet add package Simpleter.Components

Ajouter dans _Imports.razor

 @using Simpleter.Components

Ajouter dans index.html (côté client) ou _Host.cshtml (côté server) dans le head

 <link href="_content/Simpleter.Components/Simpleter.Components.min.css" rel="stylesheet" />

Ajouter dans index.html ou _Host.cshtml dans le Body

<script src="_content/Simpleter.Components/Simpleter.Bootstrap.js"></script> 
<script src="_content/Simpleter.Components/Simpleter.Components.js"></script>

Ajouter dans la rubrique concernée de Program.cs

 using Simpleter.Components.Services;

 builder.Services.AddSimpleterComponents();

Nettoyage de votre projet avant utilisation

Références à Bootstrap

Dans votre projet, si vous avez déjà une dépendance à Bootstrap, supprimez la dépendance à Boostrap :

• Par exemple, supprimez dans index.html :

 <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />

• (Et éventuellement) supprimez les fichiers statiques de Bootstrap, comme le dossier Boostrap dans wwwroot/css

Références à Open-Iconic

Les composants de Simpleter.Components utilisent la bibliothèque d'icônes de Google Fonts. Aussi, sauf si vous en avez un besoin explicite, supprimez le dossier open-iconic dans wwwroot/css et toute dépendance dans votre fichier index.html ou _Host.cshtml dans le head et préférez l'utilisation des icônes de la bibliothèque Google Fonts.

Par exemple, supprimez la ligne suivante dans le fichier app.css :

@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

Surcharges de styles Bootstrap par défault

Par défaut, dans le fichier de styles d'une application Blazor (fichier app.css), vous trouverez des surcharges des styles Bootstrap par défaut. Il convient d'enlever tous les styles personnalisés.

Supprimer le contenu du fichier app.css en faisant bien attention à conserver les styles liés à Blazor.

Sauf personnalisations réalisées par vos soins, le fichier ne doit contenir que ces classes :

#blazor-error-ui {}
#blazor-error-ui .dismiss {}

.blazor-error-boundary {}
.blazor-error-boundary::after {}

Première utilisation

Comment intégrer le Layout de base ?

Main Layout

Dans MainLayout.razor

• Tout supprimer sauf :

@inherits LayoutComponentBase

• et copier-coller ce contenu :

<SimpleApplicationContainer>

    <NavigationContent>
        <NavMenu />
    </NavigationContent>

    <BodyContent>
        @Body
    </BodyContent>
</SimpleApplicationContainer>

Navigation Menu

Le NavMenu.razor de base n'est pas exploitable tel quel (styles personnalisés) :

• Tout supprimer
• Remplacer par :

<nav class="flex-column">
    <SimpleNavigationSection Label="Navigation">
        <SimpleNavigationLink Href="/" Label="Index" IconName="home" />
    </SimpleNavigationSection>
</nav>

Vous êtes prêts !

Consulter le projet de démo Simpleter.Components.Demo pour voir l'utilisation des composants en situation réelle.