Fließende Benutzeroberfläche

PowerPortalsPro basiert auf Microsofts Fluent UI-Designsystem. Der Blazor-Stack verwendet Fluent UI Blazor, und der React-Stack verwendet Fluent UI React (@fluentui/react-components). PowerPortalsPro-Komponenten basieren auf diesen Bibliotheken unter der Haube, daher hilft dir die Vertrautheit mit der für deinen Stack dabei, das Beste aus dem Framework herauszuholen.

Über die Bibliotheken

Beide sind offizielle Microsoft-Open-Source-Projekte, die das Fluent 2 Design System implementieren:

Fluent UI Blazor (Microsoft.FluentUI.AspNetCore.Components) — 70+ Blazor-Komponenten (Buttons, Formulare, Datenraster, Navigation, Dialoge und mehr), die sowohl Blazor Server als auch WebAssembly-Hosting-Modelle unterstützen.
Fluent UI React (@fluentui/react-componentsauch bekannt als Fluent UI v9) – die React-Komponentenbibliothek, die die React-Vorlage antreibt und dieselbe Designsprache und Token-System teilt.

Schlüsselkomponenten, die von PowerPortalsPro verwendet werden

Die vollständigen Komponentenbibliotheken sind in deinem Portal verfügbar. Auf dem Blazor-Stack wirst du häufig begegnen:

FluentDataGrid — Wird von der SubGrid-Komponente zur Darstellung tabellarischer Daten mit Sortierung, Filterung und Paginierung verwendet
FluentTextField / FluentSelect / FluentCheckbox — Formulareingaben, die von den Editor-Komponenten verwendet werden
FluentDialog — Wird vom Dialogdienst für modale Formulare und Bestätigungen verwendet
FluentNavMenu / FluentNavLink — Site-Navigationskomponenten
FluentTabs — Wird auf der Dokumentationsseite für Codebeispiele und tabierte Inhalte verwendet
FluentMessageBar — Inline-Benachrichtigungen und Benachrichtigungen
FluentToastProvider — Toast-Benachrichtigungen
FluentDesignTheme — Themenverwaltung mit Hell-/Dunkelmodus und Unterstützung für Akzentfarben

Auf dem React-Stack stammen die Äquivalente aus @fluentui/react-components:

Eingabe / Dropdown / Combobox / Checkbox — Formprimitive, auf denen die Komponenten des React-Editors aufbauen
Dialog — Modalformulare und Bestätigungen, die über den React-Dialogdienst angezeigt werden
Navigation (von @fluentui/react-nav) — Site-Navigation
TabList — Tabierte Inhalte, einschließlich der Codebeispiele auf dieser Seite
MessageBar — Inline-Benachrichtigungen und Benachrichtigungen
Toaster — Toast-Benachrichtigungen
FluentProvider — Wendet das Design-Token-Thema (hell / dunkel + Akzent) auf die gesamte App an

Thematisierung

Beide Fluent-UI-Bibliotheken teilen sich ein adaptives Design-Token-System. In Blazor gibt PowerPortalsPro sie über die ThemeProvider und SiteSettingsButton Komponenten frei; in React durch PowerPortalsProThemeProvider (das Fluent's umwickelt) FluentProviderund die React SiteSettingsButton. Beide ermöglichen es den Nutzern, zwischen hellem und dunklem Modus zu wechseln, Akzentfarben zu ändern und die Textrichtung von rechts nach links umzuschalten, wobei das gesamte Design von Design-Tokens gesteuert wird, sodass sich dein Portal automatisch anpasst, wenn sich das Thema ändert.

Tipp
Beim Schreiben benutzerdefinierter Stile bevorzugen Sie Fluent-Design-Tokens gegenüber hartcodierten Farben — var(--accent-fill-rest) / var(--neutral-foreground-rest) in Blazor, oder die Werte tokens.* (z. B. tokens.colorBrandBackground) aus @fluentui/react-components React. Das sorgt dafür, dass deine Stile über helle und dunkle Themen hinweg konsistent bleiben.

Erreichbarkeit

Beide Fluent-UI-Bibliotheken verfügen über integrierte WCAG 2.1-Konformität, Tastaturnavigation und Unterstützung für Bildschirmleser. Indem sie auf diesen Grundlagen aufbauen, übernehmen PowerPortalsPro-Portale diese Barrierefreiheitsfunktionen automatisch auf beiden Stacks.

Ressourcen

Fluent UI Blazor

Fluent UI React

Gemeinsames Designsystem: Fluent 2 Design System