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 bindableProgressPercent
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
-
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
. -
Ensuite, ajoutez cette ligne à votre fichier
App.razor
(ou à votre page Layout), pour appliquer automatiquement le thème à toutes vos pages.<FluentDesignTheme StorageName="theme" />"
-
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
ouApp.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 -->"
-
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ésMode
etOfficeColor
, et définir unStorageName
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 Componentfluent-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.