Tema e Configurações do Local

Todo portal PowerPortalsPro vem com um painel lateral embutido que permite aos visitantes trocar temas, cores de destaque, direção do texto e idioma sem que você precise de uma interface personalizada. O painel é lançado a partir <SiteSettingsButton> de — um pequeno ícone de engrenagem que você coloca no cabeçalho da página — e o restante da estrutura reage ao vivo ao que o visitante escolher.

Experimente nessa demo

Olhe no canto superior direito de cada página desta demo o ícone de engrenagem — o mesmo <SiteSettingsButton> que está ligado neste site MainLayout.razor. Clique nele e um painel lateral se abre com:

• Tema — alterne entre Luz, Escuro e Sistema (Sistema segue a preferência do sistema operacional e atualiza ao vivo quando muda).
• Cor — escolha uma cor de destaque da marca. A grade, botões, links e anéis de foco são todos recoloridos para combinar.
• Direção — vire todo o layout da esquerda para a direita e da direita para a esquerda para pré-visualizar sua história em RTL.
• Idioma — alterne entre todas as culturas configuradas no servidor (o equipamento desta demo esconde essa seção; seu próprio portal pode mostrar via AllowLanguageChange).

Nota

Sua seleção permanece localStorage sob a tecla fornecida por <ThemeProvider StorageName="…">, então uma atualização mantém sua escolha. Clique em Reset na parte inferior do painel para limpar a preferência e volte para os padrões do tema.

Conectando no seu próprio portal

Coloque um <SiteSettingsButton> no cabeçalho do seu layout junto com os demais controles da barra superior e certifique-se de que o app esteja envolvido em um provedor de tema para que o painel tenha um tema para conduzir. As abas Blazor e React abaixo refletem como cada template conecta:

Nota

O provedor de tema namespaceja as preferências por usuário em localStorage — via StorageName no Blazor's <ThemeProvider>, ou storageKey no <PowerPortalsProThemeProvider>React . Use um nome único para seu portal para que múltiplos portais no mesmo domínio não entrem em conflito.

Quais seções mostrar

Cada seção do painel é bloqueada por um parâmetro booleano em <SiteSettingsButton>. Defina os que você quer ocultar para false; o painel reflow ao redor deles.

• AllowLanguageChange — por padrão é true. Mostre o seletor de idiomas. Defina para false portais de um único idioma, assim a seção não aparece vazia.
• AllowThemeChange — por padrão é true. Mostre o interruptor claro/escuro / sistema.
• AllowColorChange — por padrão é true. Mostre o seletor de cores de destaque. Desative quando sua marca exigir um sotaque específico.
• AllowRightToLeftChange — por padrão é false. Mostre o interruptor de direção do texto. Ative somente quando seu portal suportar ativamente conteúdo RTL.

Se você desligar as quatro seções, o botão se esconde — não há nada útil para o painel exibir.

Referência API