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.

Fixando a cor de destaque para sua marca

Por padrão, a cor de destaque pertence ao visitante, e a escolha dele sobrevive a qualquer padrão que você configure. Portais que precisam permanecer na marca podem fixá-la: definir o destaque no provedor de tema e ativar o bloqueio. A cor configurada então vence o que o visitante escolheu anteriormente, a preferência armazenada é reescrita para corresponder, e o seletor de destaque se remove do painel de configurações. O modo claro/escuro fica com o visitante a escolha de qualquer forma.

Nota

Sem a fechadura, um destaque no provedor de tema é apenas padrão — ele se aplica a visitantes de primeira viagem e é anulado no momento em que alguém abre a sua própria. Esconder o abridor com AllowColorChange="false" também não define uma cor; ele apenas esconde a seção, deixando quem já escolheu um destaque nessa escolha. Alcance a fechadura quando a cor realmente importa.

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. Mostrar o seletor de cor de destaque. Escondê-lo não corrige a cor: para exigir um acento da marca, bloquee-o no provedor de tema (veja acima) — que esconde essa seção sozinho.
• 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