Tema y configuración del sitio

Cada portal de PowerPortalsPro viene con un panel lateral integrado que permite a tus visitantes cambiar temas, colores de acento, dirección de texto y lenguaje sin necesidad de hacer trabajo personalizado por tu parte. El panel se inicia desde <SiteSettingsButton> — un pequeño icono de engranaje que colocas en el encabezado de página — y el resto del framework reacciona en directo a lo que elija el visitante.

Pruébalo en esta demo

Mira en la esquina superior derecha de cada página de esta demo el icono de engranaje — el <SiteSettingsButton> mismo que está conectado en este MainLayout.razorsitio en el archivo de . Haz clic y se abre un panel lateral con:

• Tema — alterna entre Luz, Oscuro y Sistema (Sistema sigue la preferencia del sistema operativo y se actualiza en directo cuando cambia).
• Color — elige un color de acento de marca. La cuadrícula, los botones, los enlaces y los anillos de enfoque se recolorean para que coincidan.
• Dirección — cambia todo el diseño de izquierda a derecha y derecha a izquierda para previsualizar tu historia en RTL.
• Idioma — cambia entre cada cultura configurada en el servidor (el equipo de esta demo oculta esta sección; tu propio portal puede mostrarlo a través AllowLanguageChangede ).

Nota

Tu selección permanece por localStorage debajo de la clave proporcionada por <ThemeProvider StorageName="…">, así que una actualización mantiene tu elección. Pulsa Reset en la parte inferior del panel para borrar la preferencia y vuelve a los valores predeterminados del tema.

Conectarlo a tu propio portal

Introduce una <SiteSettingsButton> en la cabecera de tu diseño junto con el resto de los controles de la barra superior, y asegúrate de que la app esté envuelta en un proveedor de temas para que el panel tenga un tema que impulsar. Las pestañas Blazor y React que aparecen a continuación reflejan cómo cada plantilla lo conecta:

Nota

El proveedor de temas asigna espacios de nombres a las preferencias por usuario en localStorage — a través StorageName de Blazor <ThemeProvider>o storageKey en React <PowerPortalsProThemeProvider>de . Usa un nombre único para tu portal para que varios portales en el mismo dominio no choquen.

Qué secciones mostrar

Cada sección del panel está bloqueada por un parámetro booleano en <SiteSettingsButton>. Pon los que quieres ocultar a false; el panel se refluye alrededor de ellos.

• AllowLanguageChange — por defecto es true. Muestra al selector de idiomas. Configurado en false portales de un solo idioma para que la sección no aparezca vacía.
• AllowThemeChange — por defecto es true. Muestra el interruptor de luz / oscuro / sistema.
• AllowColorChange — por defecto es true. Muestra el selector de colores de acento. Desactiva cuando tu marca exija un acento específico.
• AllowRightToLeftChange — por defecto es false. Muestra el interruptor de dirección de texto. Activa solo cuando tu portal soporte activamente contenido RTL.

Si desactivas las cuatro secciones, el botón se oculta solo: no hay nada útil para que el panel se muestre.

Referencia API