Themen- und Standorteinstellungen

Jedes PowerPortalsPro-Portal wird mit einem eingebauten Seitenpanel ausgeliefert, mit dem Ihre Besucher Themen, Akzentfarben, Textrichtung und Sprache wechseln können, ohne dass Sie eine individuelle Benutzeroberfläche benötigen. Das Panel wird von einem <SiteSettingsButton> kleinen Zahnrad-Symbol gestartet, das man in die Seitenkopfzeile legt – und der Rest des Frameworks reagiert live auf das, was der Besucher auswählt.

Probier es in dieser Demo aus

Schau oben rechts auf jeder Seite dieser Demo nach dem Zahnrad-Symbol – dasselbe <SiteSettingsButton> , das auf dieser Seite verdrahtet ist. MainLayout.razor Klicken Sie darauf, öffnet sich ein Seitenpanel mit:

• Thema – zwischen Hell, Dunkel und System umschalten (System folgt der OS-Einstellung und aktualisiert live, wenn sie sich ändert).
• Farbe – wähle eine Akzentfarbe der Marke. Das Raster, die Tasten, die Links und die Fokusringe werden alle entsprechend gefärbt.
• Richtung – Wechsel das gesamte Layout zwischen links nach rechts und rechts nach links, um deine RTL-Geschichte vorzuschauen.
• Sprache – wechsle zwischen jeder auf dem Server konfigurierten Kulturen (das Equipment dieser Demo verbirgt diesen Abschnitt; dein eigenes Portal kann ihn über AllowLanguageChange) anzeigen.

Anmerkung

Deine Auswahl bleibt unter localStorage der von gegebenen Taste <ThemeProvider StorageName="…">gespeichert, sodass eine Aktualisierung deine Wahl beibehält. Wähle unten im Panel die Einstellungen zurücksetzen , um die Präferenz zu löschen und auf die Theme-Standardwerte zurückzufallen.

Verdrahte es in deinem eigenen Portal

Füge ein A <SiteSettingsButton> in den Header deines Layouts zusammen mit den übrigen Top-Bar-Steuerungen ein und stelle sicher, dass die App in einen Theme-Anbieter gewickelt ist, damit das Panel ein Theme zum Steuern hat. Die Blazor- und React-Tabs unten spiegeln wider, wie jede Vorlage sie verbindet:

Anmerkung

Der Theme-Anbieter nennt die Präferenzen pro Nutzer in localStorage — via StorageName auf Blazors <ThemeProvider>, oder storageKey auf Reacts <PowerPortalsProThemeProvider>. Verwende einen Namen, der einzigartig für dein Portal ist, damit mehrere Portale auf derselben Domain nicht kollidieren.

Die Akzentfarbe an deine Marke anpassen

Standardmäßig gehört die Akzentfarbe dem Besucher, und seine Auswahl überdauert jede von dir konfigurierte Standardfarbe. Portale, die ungefähr bleiben müssen, können sie stattdessen pinnen: Setze den Akzent beim Themenanbieter und schalte das Schloss ein. Die konfigurierte Farbe gewinnt dann vor dem, was der Besucher zuvor gewählt hat, die gespeicherte Präferenz wird neu geschrieben, und der Akzentwähler entfernt sich aus dem Einstellungspanel. Der Hell-/Dunkelmodus bleibt dem Besucher zur Wahl.

Anmerkung

Ohne das Schloss ist ein Akzent auf dem Themenanbieter nur ein Standard – er gilt für Erstbesucher und wird sofort überschrieben, sobald jemand seinen eigenen auswählt. Das Ausblenden des Pickers mit AllowColorChange="false" legt auch keine Farbe fest; es verdeckt nur den Bereich, sodass alle, die bereits einen Akzent gewählt haben, diese Wahl überlassen. Greif nach dem Schloss, wenn die Farbe wirklich zählt.

Welche Abschnitte gezeigt werden sollen

Jeder Abschnitt des Panels wird durch einen booleschen Parameter auf <SiteSettingsButton>gesperrt. Setze die, die du versteckt haben möchtest; falsedas Panel fließt um sie herum.

• AllowLanguageChange — setzt standardmäßig auf true. Zeig es dem Sprachauswähler. Auf einsprachige Portale eingestellt false , damit der Abschnitt nicht leer angezeigt wird.
• AllowThemeChange — setzt standardmäßig auf true. Zeige den Schalter für Licht / Dunkel / System.
• AllowColorChange — setzt standardmäßig auf true. Zeigen Sie den Akzent-Farbwähler an. Das Ausblenden behebt die Farbe jedoch nicht: Um einen Markenakzent vorzuschreiben, sperren Sie ihn auf den Themenanbieter (siehe oben) — das verbirgt diesen Abschnitt für sich allein.
• AllowRightToLeftChange — setzt standardmäßig auf false. Zeige den Text-Richtungs-Schalter. Aktivieren Sie nur, wenn Ihr Portal aktiv RTL-Inhalte unterstützt.

Wenn du alle vier Bereiche ausschaltest, versteckt sich der Button – es gibt nichts Nützliches für das Panel zu zeigen.

API-Referenz