Pour Commencer

Prérequis

NPM : Pour être capable de compiler localement la solution Simpleter.Components il est nécessaire de disposer de NPM sur votre machine.

En effet, certaines dépendances de la solution et de la bibliothèque de composants sont issues de packages fournis par le gestionnaire de package NPM :

• Bootstrap (bootstrap)
• Material Icons (@material-icons)
• PopperJS (@popperjs)
• ...

Pour installer NPM, il convient d'installer NodeJS sur votr machine depuis le site officiel. Si vous n'installez pas NPM vous ne serez pas en mesure de compiler le projet (vous obtiendrez des erreurs concernant la commande NPM i ou NPM install).

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 :

• 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 Material Icons basée sur les 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 Material Icons.

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>

Guide d'installation pour Blazor Diagrams

• Ajouter dans le index.html :

<link href="_content/Z.Blazor.Diagrams/style.min.css" rel="stylesheet" />

<link href="_content/Z.Blazor.Diagrams/default.styles.min.css" rel="stylesheet" />

<script src="_content/Z.Blazor.Diagrams/script.min.js"></script>

• Pour les pages qui utilisent les diagrams, ne pas oublier de mettre :

@using Simpleter.Components.Diagrams
@using Blazor.Diagrams.Core.Models
@using Simpleter.Components.Components.Diagrams.Enums

ou

@using Blazor.Diagrams.Core
@using Blazor.Diagrams.Core.Models
@using Simpleter.Components.Components.Diagrams.Enums

• Si necessaire aller voir la page de démo

Vous êtes prêts !

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