FluentUI.Blazor v5 RC3

Annonce de Fluent UI Blazor v5 RC3 — ColorPicker, Wizard, Overlay global et plus encore

Nous sommes ravis d’annoncer la troisième Release Candidate de la bibliothèque Fluent UI Blazor v5 ! Depuis la RC2, l’équipe a continué à livrer sur la branche dev-v5 avec deux nouveaux composants — FluentColorPicker et FluentWizard — un tout nouveau service Overlay global, le contrôle programmatique de FluentMenu, ainsi qu’une longue liste d’améliorations apportées aux composants Dialog, Badge, Checkbox, Switch, Input et DataGrid.

Visitez notre site de démonstration.

Nouveau composant : FluentColorPicker

Le composant FluentColorPicker permet aux utilisateurs de choisir une couleur dans une palette prédéfinie ou sur une surface de sélection interactive. Il prend en charge trois vues différentes, exposées via l’énumération ColorPickerView :

• SwatchPalette — une grille d’échantillons de couleurs prédéfinis.
• ColorWheel — une roue chromatique hexagonale présentant un ensemble organisé de couleurs.
• HsvSquare — un carré HSV permettant de choisir n’importe quelle couleur par teinte, saturation et valeur.

La couleur sélectionnée est toujours retournée sous forme de chaîne hexadécimale (par exemple #FF0000) que vous pouvez lier à votre propre modèle avec @bind-Value ou @bind-SelectedColor.

Utilisation de base

<FluentColorPicker @bind-SelectedColor="@MyColor"
                   View="ColorPickerView.HsvSquare" />

@code
{
    string MyColor { get; set; } = "#0078D4";
}

FluentColorPickerInput

Le composant FluentColorPickerInput combine un champ de texte avec un FluentColorPicker affiché en popover, offrant un sélecteur de couleurs compact et adapté aux formulaires, qui s’intègre naturellement à côté d’autres contrôles de saisie. Vous pouvez choisir la View affichée dans le popover et éventuellement masquer le champ de texte avec HideTextInput afin de ne conserver que le bouton d’échantillon.

<FluentColorPickerInput @bind-Value="@MyColor"
                        View="ColorPickerView.SwatchPalette" />

Les deux composants sont des enveloppes non stylisées autour de la même logique de sélection. Voir #4712 pour plus de détails.

Nouveau composant : FluentWizard

Le très attendu composant FluentWizard est désormais disponible en v5, migré depuis la v4 avec des améliorations et une nouvelle API. Il guide les utilisateurs à travers une séquence d’étapes, avec prise en charge intégrée de la validation, des modèles d’étape, des boutons personnalisés et des dispositions horizontales ou verticales.

Utilisation de base

<FluentWizard @bind-Value="@StepIndex" OnFinish="@OnFinishAsync">
    <Steps>
        <FluentWizardStep Label="Account">
            <p>Enter your account information.</p>
        </FluentWizardStep>
        <FluentWizardStep Label="Profile">
            <p>Tell us about yourself.</p>
        </FluentWizardStep>
        <FluentWizardStep Label="Confirm">
            <p>Review and submit.</p>
        </FluentWizardStep>
    </Steps>
</FluentWizard>

@code
{
    int StepIndex { get; set; } = 0;

    Task OnFinishAsync() => Task.CompletedTask;
}

Points forts

• FluentWizardStepValidator — Attachez une logique de validation à une étape pour empêcher l’utilisateur d’avancer tant que l’étape n’est pas valide.
• ButtonTemplate et StepTemplate personnalisés — Personnalisez entièrement l’apparence des boutons de navigation et de l’en-tête d’étape.
• Dispositions horizontale et verticale — Choisissez l’orientation qui correspond à votre design.
• Statut d’étape — Chaque étape expose un WizardStepStatus (None, Current, Done, All) pour des scénarios de rendu avancés.

Consultez #4682 pour tous les détails de la migration.

Overlay global via IDialogService

En complément du composant FluentOverlay existant, vous pouvez désormais utiliser IDialogService pour afficher un overlay global depuis n’importe où dans votre application, sans avoir à déclarer un FluentOverlay dans votre balisage.

Un seul overlay global peut être affiché à la fois. L’overlay présente un spinner centré, accompagné d’un message texte optionnel affiché en dessous. Vous pouvez également choisir une CardAppearance pour personnaliser le rendu du contenu de l’overlay.

Afficher et masquer

@inject IDialogService DialogService

// Overlay simple
await DialogService.ShowOverlayAsync();

// Avec un message personnalisé et une taille de spinner
await DialogService.ShowOverlayAsync(options =>
{
    options.Text = "Processing...";
});

// Le masquer
await DialogService.HideOverlayAsync();

FluentMenu — Ouverture programmatique et positionnement par cible

FluentMenu peut désormais être ouvert et fermé de manière programmatique, et positionné par rapport à n’importe quel élément du DOM. Cela est idéal pour les scénarios de menu contextuel où le menu doit apparaître à côté de l’élément sur lequel l’utilisateur a fait un clic droit.

La nouvelle méthode OpenMenuAsync accepte un paramètre optionnel targetId. Lorsqu’il est fourni, le menu est positionné par rapport à l’élément portant cet id plutôt que par rapport à l’élément Trigger d’origine. Vous pouvez affiner la position avec les paramètres targetOffsetLeft et targetOffsetTop (en pixels).

<div id="Target1" @oncontextmenu="@(e => Menu.OpenMenuAsync("Target1"))">Zone 1</div>
<div id="Target2" @oncontextmenu="@(e => Menu.OpenMenuAsync("Target2", targetOffsetLeft: 10, targetOffsetTop: 5))">Zone 2</div>

<FluentMenu @ref="@Menu">
    <FluentMenuList>
        <FluentMenuItem>Menu item 1</FluentMenuItem>
        <FluentMenuItem>Menu item 2</FluentMenuItem>
        <FluentMenuItem>Menu item 3</FluentMenuItem>
    </FluentMenuList>
</FluentMenu>

@code
{
    FluentMenu Menu = default!;
}

Voir #4860.

Améliorations de Dialog

Le composant FluentDialog a bénéficié de plusieurs améliorations dans la RC3 :

Refactorisation des composants — ChildContent partout

Plusieurs composants ont été refactorisés pour utiliser le paramètre standard ChildContent, les rendant plus cohérents avec le reste de la bibliothèque et plus faciles à composer :

• FluentBadge — utilise désormais ChildContent et un nouveau paramètre AnchorContent (#4845)
• FluentCheckbox et FluentSwitch — les libellés sont désormais fournis via ChildContent (#4844)

<FluentCheckbox @bind-Value="@IsAccepted">
    J'accepte les <a href="/terms">termes et conditions</a>
</FluentCheckbox>

<FluentSwitch @bind-Value="@DarkMode">
    Activer le mode sombre
</FluentSwitch>

Améliorations des champs et formulaires

• Validation des paramètres nullables dans les composants FluentInput (#4847) — Tous les composants d’entrée valident désormais correctement les valeurs liées nullables, corrigeant des problèmes subtils de liaison avec int?, DateTime?, etc.
• Héritage de la taille et de la famille de police (#4856) — Les champs héritent désormais par défaut de la typographie de leur conteneur.
• FluentAutocomplete — correction de la valeur initiale OnSetValue (#4757) — La valeur initiale est désormais correctement appliquée au premier rendu.

Listes & DataGrid

• SelectedItemsExpression / SelectedItemExpression sur les listes (#4759) — Fournit une expression fortement typée pour le ou les éléments sélectionnés, permettant la validation et une liaison adaptée aux formulaires, similaire à ValueExpression sur les champs de saisie.
• Test d’intégration OnChangeAfter (#4753) — Vérifie que l’événement déclenché après modification fonctionne correctement pour tous les types d’entrée.

Card

• CardShadow.None (#4758) — Une nouvelle valeur pour afficher une carte plate, sans aucune ombre.

<FluentCard Shadow="CardShadow.None">
    Contenu de carte plate
</FluentCard>

Corrections de thèmes

• Correction de data-theme pour les valeurs light et system (#4766) — Résout les cas où la valeur light ou system n’était pas correctement appliquée lors de la lecture de l’attribut data-theme sur <body>.

Navigation

• FluentNav — accessibilité et nettoyage des commentaires (#4868) — Clarification du comportement du paramètre Width, en supprimant la mention trompeuse de « default » dans le commentaire de documentation.

Documentation & outillage

Le site de documentation a bénéficié d’une importante passe de finition :

Serveur MCP

• Outils MCP ListCategories et ListEnums (#4764) — Le serveur MCP expose désormais des outils pour lister toutes les catégories et énumérations disponibles dans la bibliothèque, ce qui facilite la découverte et la compréhension de la surface d’API par les agents IA.

Essayez-le maintenant

Cette troisième Release Candidate nous rapproche fortement de la version finale de la v5. La surface d’API est désormais considérée comme stable, et nous nous concentrons sur le polissage, les correctifs et les éléments restants suivis dans dev-v5 - TODO List.

Comme toujours, n’hésitez pas à signaler les problèmes sur GitHub et à contribuer. Un immense merci à tous ceux qui ont testé la RC2, signalé des problèmes et soumis des pull requests — un remerciement tout particulier aux contributeurs de la communauté tels que @MarvinKlein1508,@aclerbois et @vnbaaij pour leur implication continue.

Bon Blazoring !