Fluent UI

O PowerPortalsPro é construído sobre o sistema de design de UI Fluent da Microsoft. A pilha Blazor usa Fluent UI Blazor, e a pilha React usa Fluent UI React (@fluentui/react-components). Componentes PowerPortalsPro são construídos sobre essas bibliotecas por dentro, então familiaridade com a do seu stack ajuda a aproveitar ao máximo o framework.

Sobre as Bibliotecas

Ambos são projetos oficiais de código aberto da Microsoft que implementam o Sistema de Design Fluent 2:

Fluent UI Blazor (Microsoft.FluentUI.AspNetCore.Components) — 70+ componentes Blazor (botões, formulários, grades de dados, navegação, diálogos e mais) suportando modelos de hospedagem Blazor Server e WebAssembly.
Fluent UI React (@fluentui/react-componentstambém conhecido como Fluent UI v9) — a biblioteca de componentes React que alimenta o modelo React, compartilhando a mesma linguagem de design e sistema de tokens.

Componentes Principais Usados pelo PowerPortalsPro

As bibliotecas completas de componentes estão disponíveis no seu portal. No stack Blazor você vai encontrar comumente:

FluentDataGrid — Usado pelo componente SubGrid para exibir dados tabulares com ordenação, filtragem e paginação
FluentTextField / FluentSelect / FluentCheckbox — Entradas de formulário usadas pelos componentes do editor
FluentDialog — Usado pelo serviço de diálogo para formas modais e confirmações
FluentNavMenu / FluentNavLink — Componentes de navegação de site
FluentTabs — Usado no site de documentação para exemplos de código e conteúdo com abas
FluentMessageBar — Notificações e alertas inline
FluentToastProvider — Notificações de Toast
FluentDesignTheme — Gerenciamento de temas com modo claro/escuro e suporte a cores de destaque

Na pilha React , os equivalentes vêm de @fluentui/react-components:

Input / Menu suspenso / Combobox / Caixa de seleção — Primitivas de formulário que os componentes do editor React se baseiam
Diálogo — Formas modais e confirmações, apresentadas pelo serviço de diálogo React
Nav (de @fluentui/react-nav) — Navegação do site
TabList — Conteúdo com ababadas, incluindo os exemplos de código neste site
MessageBar — Notificações e alertas inline
Torradeira — Notificações de torrada
FluentProvider — Aplica o tema design-token (claro / escuro + acento) a todo o aplicativo

Temática

Ambas as bibliotecas de UI Fluent compartilham um sistema adaptativo de design-token. No Blazor, o PowerPortalsPro o expõe através dos ThemeProvider componentes e; SiteSettingsButton no React, através PowerPortalsProThemeProvider de (que envolve o Fluent's FluentProvider) e o React SiteSettingsButton. Ambos permitem que os usuários alternem entre modos claro e escuro, alterem cores de destaque e alternem a direção do texto da direita para a esquerda, com todo o estilo sendo direcionado por tokens de design para que seu portal se adapte automaticamente quando o tema muda.

Dica
Ao escrever estilos personalizados, prefira tokens de design Fluent em vez de cores codificadas — var(--accent-fill-rest) / var(--neutral-foreground-rest) em Blazor, ou os tokens.* valores (por exemplo, tokens.colorBrandBackground) do @fluentui/react-components React. Isso mantém seus estilos consistentes em temas claros e sombrios.

Acessibilidade

Ambas as bibliotecas Fluent UI incluem conformidade com WCAG 2.1 integrada, navegação por teclado e suporte a leitor de tela. Ao construir sobre essas bases, os portais PowerPortalsPro herdam automaticamente esses recursos de acessibilidade em qualquer uma das pilhas.

Recursos

Fluent UI Blazor

Fluent UI React

Sistema de design compartilhado: Sistema de Design Fluent 2