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:

React

Blazor

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.

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. Zeige den Akzentfarbe-Picker. Deaktivieren Sie, wenn Ihre Marke einen bestimmten Akzent vorschreibt.
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

React

Blazor

SiteSettingsButton Baureihe

Parameter

Name	Typ	Default	Beschreibung
`AllowColorChange`	bool	True	Es gibt oder bestimmt, ob der Bereich zur Auswahl der Akzentfarbe im Einstellungsbereich sichtbar ist.
`AllowLanguageChange`	bool	True	Erhält oder setzt, ob der Sprachauswahlbereich im Einstellungsfeld sichtbar ist.
`AllowRightToLeftChange`	bool	False	Erhält oder setzt fest, ob der Textrichtungsbereich (LTR/RTL) im Einstellungsfeld sichtbar ist.
`AllowThemeChange`	bool	True	Es bekommt oder bestimmt, ob der Themenauswahlbereich (Licht/Dunkel/System) im Einstellungspanel sichtbar ist.

Name: AllowColorChange

Typ: bool

Default: True

Beschreibung: Es gibt oder bestimmt, ob der Bereich zur Auswahl der Akzentfarbe im Einstellungsbereich sichtbar ist.

Name: AllowLanguageChange

Typ: bool

Default: True

Beschreibung: Erhält oder setzt, ob der Sprachauswahlbereich im Einstellungsfeld sichtbar ist.

Name: AllowRightToLeftChange

Typ: bool

Default: False

Beschreibung: Erhält oder setzt fest, ob der Textrichtungsbereich (LTR/RTL) im Einstellungsfeld sichtbar ist.

Name: AllowThemeChange

Typ: bool

Default: True

Beschreibung: Es bekommt oder bestimmt, ob der Themenauswahlbereich (Licht/Dunkel/System) im Einstellungspanel sichtbar ist.