FluentUI.Blazor v4.2

Vue d’ensemble

Nous venons de publier une nouvelle version 4.2 de Microsoft.FluentUI.AspNetCore.Components. Cette version corrige certains bugs détectés ces derniers jours, mais ajoute également quelques nouvelles fonctionnalités.

• FluentDesignTheme: pour gérer le thème et les couleurs de votre site web
• FluentCheckbox: Ajout d’un mode Intermediate
• FluentAutoComplete: Attribut AutoComplete permettant de désactiver (Off) l’autocomplete par défaut du navigateur
• FluentGrid: Attribut HiddenWhen pour cacher les éléments lorsque l’écran est redimensionné
• FluentInputFile: ProgressTemplate et bindable ProgressPercent

Nouvelles fonctionnalités

FluentDesignTheme

Le Theme Provider spécifie toutes les couleurs, formes, tailles et ombres pour votre mise en page.

FluentDesignTheme vous permet de gérer rapidement la couleur principale et le mode (sombre/clair) de votre application entière. Si vous souhaitez personnaliser tous les détails de votre application, ou seulement une partie, veuillez utiliser les DesignTokens.

Guide rapide

1. Tout d’abord, choisissez un nom pour enregistrer le mode du thème (sombre/clair) et la couleur, dans le stockage local du navigateur. par exemple : theme.

2. Ensuite, ajoutez cette ligne à votre fichier App.razor (ou à votre page Layout), pour appliquer automatiquement le thème à toutes vos pages.

    <FluentDesignTheme StorageName="theme" />"
   

3. Pour éviter un “effet de scintillement” lors du chargement de la page (principalement en mode sombre), nous vous recommandons d’ajouter ces lignes de code au fichier index.html, _layout.cshtml ou App.razor (.NET8).

    <!-- Set the default theme -->
    <script src="_content/Microsoft.FluentUI.AspNetCore.Components/js/loading-theme.js" type="text/javascript"></script>
    <loading-theme storage-name="theme"></loading-theme>
    <!-- End -->"
   

4. Enfin, vous pouvez ajouter un bouton ou une page qui permet à l’utilisateur de choisir son thème. Pour ce faire, vous devez utiliser un composant FluentDesignTheme sur lequel vous pouvez lier les propriétés Mode et OfficeColor, et définir un StorageName pour enregistrer tout cela dans le LocalStorage.

    @implements IDialogContentComponent
   
    <FluentDesignTheme @bind-Mode="@Mode"
                      @bind-OfficeColor="@Color"
                      StorageName="theme" />
   
    <FluentSelect Label="Theme"
                  Items="@(Enum.GetValues<DesignThemeModes>())"
                  @bind-SelectedOption="@Mode" />
   
    <FluentSelect Label="Color"
                  Items="@(new OfficeColor?[] { OfficeColor.Word, OfficeColor.Excel, OfficeColor.PowerPoint })"
                  @bind-SelectedOption="@Color" />
   
    @code
    {
        private DesignThemeModes Mode = DesignThemeModes.System;
        private OfficeColor? Color = OfficeColor.Word;
    }
   

ℹ️ FluentDesignTheme est également disponible en Web Component fluent-design-theme pour gérer plus facilement le thème depuis du code JavaScript.

Vous trouverez un exemple complet en vidéo, qui explique pas à pas comment ajouter une page de gestion des thèmes.

FluentCheckbox

Ajout du choix de l’ordre entre Uncheck / Intermediate / Check via l’attribut ThreeStateOrderUncheckToIntermediate. #1099.

NavMenu

Les composants NavMenu ont été améliorés pour permettre au menu de se développer lorsqu’il est réduit et que l’on clique sur l’icône de l’élément de navigation.

Les composants NavMenu prennent désormais en charge les infobulles pour les groupes et les éléments. Pour les groupes, le paramètre Title était déjà utilisé, mais il peut désormais être remplacé par le paramètre Tooltip.

FluentAutoComplete

Ajout d’un attribut AutoComplete permettant de désactiver (Off) l’autocomplete par défaut du navigateur 1084.

FluentGrid

Ajout d’un attribut HiddenWhen pour cacher les éléments lorsque l’écran est redimensionné 1048.

FluentInputFile

Ajout d’un template ProgressTemplate et d’un attribut bindable ProgressPercent 1037

List components

Avec le nouveau paramètre OptionTemplate, vous pouvez fournir un contenu personnalisé pour chaque option dans les composants de liste (listbox, select, combobox et autocomplete). Comme nous l’avons déjà mentionné, nous l’utilisons en interne pour donner une représentation visuelle de la couleur d’accent dans le composant DesignTheme.

Un autre exemple est disponible sur les pages de documentation des différents composants de liste.

Templates

De nombreux correctifs ont été mis en œuvre pour s’assurer que les pages et les mises en page obtiennent le bon jeu d’attributs @rendermode et les options NavMenu en fonction des choix d’interactivité effectués lors de la création d’une application.

Installez le [Modèle Visual Studio en utilisant ce lien] (https://www.nuget.org/packages/Microsoft.FluentUI.AspNetCore.Templates).

Preview NuGet Feed

Si vous voulez être à la pointe du progrès et suivre ce que nous construisons, nous avons un flux disponible qui héberge les paquets pour la bibliothèque de base qui sont construits à chaque livraison que nous faisons sur la branche dev. L’adresse du flux est https://pkgs.dev.azure.com/fluent-blazor/public/_packaging/previews/nuget/v3/index.json

Il ne s’agit pas d’un flux à utiliser en production. Ce flux est directement lié à notre branche Développement. Il est donc possible (probable) que certains Packages causent des problèmes pendant quelques heures, pour les détecter et les corriger.

Web sites

• Documentation: https://www.fluentui-blazor.net
• NuGet packages: https://aka.ms/fluent-blazor-libs

Feedback

Si vous trouvez quelque chose qui sort de l’ordinaire, faites-le nous savoir dans le repo sur GitHub, ou Twitter / X.