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.

Adaptar el color de acento a tu marca

Por defecto, el color de acento pertenece al visitante, y su selección sobrevive a cualquier valor predeterminado que configures. Los portales que deben mantenerse fijos a la marca pueden fijarlo en su lugar: pon el acento en el proveedor de temas y activa el bloqueo. El color configurado entonces gana sobre el que eligió el visitante anteriormente, la preferencia almacenada se reescribe para coincidir y el selector de acentos se elimina del panel de ajustes. El modo claro/oscuro mantiene la elección del visitante de cualquier manera.

Nota

Sin la cerradura, un acento en el proveedor de temas es solo un valor predeterminado — se aplica a visitantes primerizos y se anula en el momento en que alguien abre el suyo propio. Ocultar el ganzúa con AllowColorChange="false" tampoco establece un color; solo oculta la sección, dejando a cualquiera que ya haya elegido un acento en esa elección. Busca la cerradura cuando el color realmente importe.

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. Mostrar el selector de color de acento. Sin embargo, ocultarlo no arregla el color: para exigir un acento de marca, fijécalo en el proveedor de temas (ver arriba) — que oculta esta sección por sí solo.
• 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