Fluent UI

PowerPortalsPro est basé sur le système de conception Fluent UI de Microsoft. La pile Blazor utilise Fluent UI Blazor, et la pile React utilise Fluent UI React (@fluentui/react-components). Les composants PowerPortalsPro sont construits à partir de ces bibliothèques en interne, donc connaître celle de votre stack vous permet de tirer le meilleur parti du framework.

À propos des bibliothèques

Les deux sont des projets officiels open source de Microsoft implémentant le système Fluent 2 Design :

Fluent UI Blazor (Microsoft.FluentUI.AspNetCore.Components) — 70+ composants Blazor (boutons, formulaires, grilles de données, navigation, dialogues, et plus encore) prenant en charge à la fois les modèles d’hébergement Blazor Server et WebAssembly.
Fluent UI React (@fluentui/react-componentségalement connu sous le nom de Fluent UI v9) — la bibliothèque de composants React qui alimente le modèle React, partageant le même langage de conception et le même système de jetons.

Composants clés utilisés par PowerPortalsPro

Les bibliothèques complètes de composants sont disponibles sur votre portail. Sur la pile de Blazor , vous rencontrerez fréquemment :

FluentDataGrid — Utilisé par le composant SubGrid pour afficher les données tabulaires avec tri, filtrage et pagination
FluentTextField / FluentSelect / FluentCheckbox — Entrées de formulaires utilisées par les composants de l’éditeur
FluentDialog — Utilisé par le service de dialogue pour les formulaires modaux et les confirmations
FluentNavMenu / FluentNavLink — Composants de navigation de site
FluentTabs — Utilisé dans le site de documentation pour les exemples de code et le contenu à onglets
FluentMessageBar — Notifications et alertes en ligne
FluentToastProvider — Notifications de toast
FluentDesignTheme — Gestion des thèmes avec mode clair/sombre et support des couleurs d’accent

Sur la pile React , les équivalents proviennent de @fluentui/react-components:

Entrée / Menu déroulant / Boîte combo / Case à cocher — Primitives de formulaire sur lesquelles les composants de l’éditeur React s’appuient
Dialogue — Formes modales et confirmations, mises en avant via le service de dialogue React
Nav (de @fluentui/react-nav) — Navigation du site
TabList — Contenu à onglets, y compris les exemples de code sur ce site
MessageBar — Notifications et alertes en ligne
Toaster — Notifications de toast
FluentProvider — Applique le thème design-token (clair / foncé + accent) à toute l’application

Thèmes

Les deux bibliothèques Fluent UI partagent un système adaptatif de jetons de design. Dans Blazor, PowerPortalsPro l’expose via les ThemeProvider composants et SiteSettingsButton ; dans React, à PowerPortalsProThemeProvider travers (qui enveloppe Fluent’s FluentProvider) et React SiteSettingsButton. Les deux permettent aux utilisateurs de passer des modes clair et sombre, de changer les couleurs d’accent et de basculer la direction du texte de droite à gauche, tout le style étant contrôlé par des jetons de design afin que votre portail s’adapte automatiquement au changement de thème.

Conseil
Lorsque vous écrivez des styles personnalisés, privilégiez les jetons de design Fluent aux couleurs codées en dur — var(--accent-fill-rest) / var(--neutral-foreground-rest) dans Blazor, ou les tokens.* valeurs (par exemple tokens.colorBrandBackground) issues @fluentui/react-components de React. Cela permet de garder vos styles cohérents entre thèmes clair et sombre.

Accessibilité

Les deux bibliothèques Fluent UI incluent la conformité WCAG 2.1 intégrée, la navigation au clavier et la prise en charge des lecteurs d’écran. En s’appuyant sur ces fondations, les portails PowerPortalsPro héritent automatiquement de ces fonctionnalités d’accessibilité sur l’une ou l’autre des piles.

Ressources

Fluent UI Blazor

Fluent UI React

Système de conception partagée : Système de conception Fluent 2