Pour Commencer

Commandes utiles

Pour générer un package nuget en local

Positionnez-vous dans le répertoire racine de la solution et exécutez le code suivant :

.\build.ps1 -VersionPrefix 1.0.1.56 -VersionSuffix beta1

• Où *1.0.1.56 est la dernière version publiée +1 par azure devops libre à vous d'incrémenter ensuite beta1 pour utiliser le package en local
• Le package sera ensuite disponible dans le répertoire ./local-nuget à la racine du repo, à vous de le copier dans votre repository locale de nugets

Vous pouvez aussi changer le répertoire de destination en ajoutant le paramètre destination :

.\build.ps1 -VersionPrefix 1.0.1.56 -VersionSuffix beta1 -Destination "C:\MonRepertoireLocal"

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.