Thème et Paramètres du site

Chaque portail PowerPortalsPro est livré avec un panneau latéral intégré qui permet à vos visiteurs de changer de thème, de couleurs d’accent, de direction du texte et de langage sans aucune interface utilisateur personnalisée de votre part. Le panneau se lance depuis <SiteSettingsButton> — une petite icône d’engrenage que vous placez dans l’en-tête de la page — et le reste du cadre réagit en direct à ce que le visiteur choisit.

Essayez-le dans cette démo

Regardez en haut à droite de chaque page de cette démo l’icône d’engrenage — la <SiteSettingsButton> même que câblée dans le MainLayout.razorfichier de ce site . Cliquez dessus et un panneau latéral s’ouvre avec :

• Thème — bascule entre Lumière, Obscurité et Système (Le système suit la préférence du système d’exploitation et se met à jour en direct quand il change).
• Couleur — choisissez une couleur d’accent de marque. La grille, les boutons, les liens et les anneaux de mise au point sont tous recolorés pour correspondre.
• Direction — inversez toute la disposition de gauche à droite et de droite à gauche pour prévisualiser votre histoire RTL.
• Langue — bascule entre chaque culture configurée sur le serveur (le matériel de cette démo masque cette section ; ton propre portail peut l’afficher via AllowLanguageChange).

Note

Votre sélection reste localStorage sous la touche fournie par <ThemeProvider StorageName="…">, donc une mise à jour maintient votre choix. Appuyez sur Réinitialiser en bas du panneau pour effacer la préférence et revenez aux paramètres par défaut du thème.

Câble-le dans ton propre portail

Insérez un <SiteSettingsButton> message dans l’en-tête de votre mise en page avec les autres contrôles de la barre supérieure, et assurez-vous que l’application est intégrée dans un fournisseur de thème afin que le panneau ait un thème à piloter. Les onglets Blazor et React ci-dessous illustrent la façon dont chaque modèle le relie :

Note

Le fournisseur de thèmes nomme les préférences par utilisateur dans — via StorageName sur Blazor’s <ThemeProvider>, ou storageKey sur React <PowerPortalsProThemeProvider>.localStorage Utilisez un nom unique à votre portail pour éviter que plusieurs portails sur le même domaine ne s’accrochent.

Quelles sections montrer

Chaque section du panneau est verrouillée par un paramètre booléen sur <SiteSettingsButton>. Réglez celles que vous voulez cachées à false; le panneau reflow-s autour d’elles.

• AllowLanguageChange — par défaut est . true Montrez le sélectionneur de langues. Réglez sur false les portails monolingues pour que la section n’apparaisse pas vide.
• AllowThemeChange — par défaut est . true Affichez le bouton clair/sombre/système.
• AllowColorChange — par défaut est . true Montrez le sélecteur de couleurs d’accent. Désactivez lorsque votre marque exige un accent spécifique.
• AllowRightToLeftChange — par défaut est . false Montrez le commutateur de direction du texte. Activez uniquement lorsque votre portail supporte activement le contenu RTL.

Si vous désactivez les quatre sections, le bouton se cache — il n’y a rien d’utile à afficher pour le panneau.

Référence API