Interfaz de usuario fluida

PowerPortalsPro está construido sobre el sistema de diseño de interfaz Fluent de Microsoft. La pila Blazor usa Fluent UI Blazor, y la pila React usa Fluent UI React (@fluentui/react-components). Los componentes de PowerPortalsPro están construidos sobre estas librerías por dentro, así que familiarizarte con la que corresponde a tu stack te ayuda a sacar el máximo partido al framework.

Acerca de las bibliotecas

Ambos son proyectos oficiales de código abierto de Microsoft que implementan el Sistema de Diseño Fluent 2:

Fluent UI Blazor (Microsoft.FluentUI.AspNetCore.Components) — 70+ componentes Blazor (botones, formularios, cuadrículas de datos, navegación, diálogos y más) que soportan tanto modelos de alojamiento Blazor Server como WebAssembly.
Fluent UI React (@fluentui/react-componentstambién conocido como Fluent UI v9) — la biblioteca de componentes de React que alimenta la plantilla React, compartiendo el mismo lenguaje de diseño y sistema de tokens.

Componentes clave utilizados por PowerPortalsPro

Las bibliotecas completas de componentes están disponibles en tu portal. En la pila de Blazor te encontrarás comúnmente:

FluentDataGrid — Utilizado por el componente SubGrid para mostrar datos tabulares mediante ordenación, filtrado y paginación
FluentTextField / FluentSelect / FluentCheckbox — Entradas de formulario utilizadas por los componentes del editor
FluentDialog — Utilizado por el servicio de diálogo para formularios modales y confirmaciones
FluentNavMenu / FluentNavLink — Componentes de navegación del sitio
FluentTabs — Utilizado en la página de documentación para ejemplos de código y contenido con pestañas
FluentMessageBar — Notificaciones y alertas en línea
FluentToastProvider — Notificaciones de tostadas
FluentDesignTheme — Gestión de temas con soporte para modo claro/oscuro y color de acento

En la pila React , los equivalentes provienen de @fluentui/react-components:

Entrada / Desplegable / Combobox / Casilla de verificación — Primitivas de formulario sobre las que se construyen los componentes del editor React
Diálogo — Formas modales y confirmaciones, que aparecen a través del servicio de diálogo React
Navegación (de @fluentui/react-nav) — Navegación del sitio
TabList — Contenido con pestañas, incluyendo los ejemplos de código de este sitio
MessageBar — Notificaciones y alertas en línea
Tostadora — Notificaciones de tostadas
FluentProvider — Aplica el tema design-token (claro / oscuro + acento) a toda la aplicación

Temática

Ambas bibliotecas de Fluent UI comparten un sistema adaptativo de design-token. En Blazor, PowerPortalsPro lo expone a través de los ThemeProvider componentes y SiteSettingsButton ; en React, a través PowerPortalsProThemeProvider de (que envuelve los FluentProvidercomponentes de Fluent ) y React SiteSettingsButton. Ambos permiten a los usuarios cambiar entre modos claro y oscuro, cambiar los colores de acento y alternar la dirección del texto de derecha a izquierda, con todo el estilo controlado por fichas de diseño para que tu portal se adapte automáticamente cuando cambia el tema.

Propina
Al escribir estilos personalizados, prefiero tokens de diseño Fluent a colores codificados en forma fija — var(--accent-fill-rest) / var(--neutral-foreground-rest) en Blazor, o los tokens.* valores (por ejemplo, tokens.colorBrandBackground) de @fluentui/react-components React. Esto mantiene tus estilos consistentes entre temas de luz y sombra.

Accesibilidad

Ambas librerías de Fluent UI incluyen cumplimiento integrado de WCAG 2.1, navegación con teclado y soporte para lectores de pantalla. Al construir sobre estos fundamentos, los portales PowerPortalsPro heredan automáticamente estas características de accesibilidad en cualquiera de las dos pilas.

Recursos

Blazor de interfaz de usuario fluido

Fluent UI React

Sistema de diseño compartido: Sistema de Diseño Fluent 2