テーマとサイト設定

すべてのPowerPortalsProポータルには、カスタムUIなしでテーマ、アクセントカラー、テキストの方向性、言語を切り替えられる内蔵サイドパネルが付属しています。パネルは <SiteSettingsButton> から起動します。ページヘッダーに置く小さな歯車アイコンで、フレームワークの他の部分が訪問者が選んだものにリアルタイムで反応します。

このデモで試してみてください

このデモのすべてのページの右上にあるギアアイコンを探してください。これはこのサイトのMainLayout.razorと同じ配線<SiteSettingsButton>です。クリックするとサイドパネルが開きます:

• テーマ — ライト、ダーク、システム(システムはOSの設定に従い、変更時にリアルタイムで更新)。
• 色 — ブランドのアクセントカラーを選びましょう。グリッド、ボタン、リンク、フォーカスリングはすべて同じ色に変色されます。
• 方向 — レイアウト全体を左から右、右から左に切り替えてRTLのストーリーをプレビューします。
• 言葉遣い — サーバー上で設定されたすべての文化を切り替えてください(このデモの装備はこのセクションを隠しています。 AllowLanguageChangeで自分のポータルで表示されます)。

注記

<ThemeProvider StorageName="…">で提供されたキーのlocalStorageに選択が残るため、リフレッシュしても選択が保持されます。パネル下部のリセット設定を押して、設定を消してテーマのデフォルトに戻します。

自分のポータルに配線する

レイアウトのヘッダーに <SiteSettingsButton> を入れ、トップバーの他のコントロールと一緒に配置し、アプリがテーマプロバイダーでラップされているか確認して、パネルにテーマを割り当てましょう。以下の Blazor と React のタブは、それぞれのテンプレートがどのように配線されているかを反映しています:

注記

テーマ提供者は、Blazorの<ThemeProvider>上のStorageNameやReactの<PowerPortalsProThemeProvider>のstorageKeyを通じて、ユーザーごとの設定をlocalStorageでネームスペース化します。同じドメイン内の複数のポータルが衝突しないように、ポータル固有の名前を使いましょう。

アクセントカラーをブランドに固定する

デフォルトではアクセントカラーは訪問者のものであり、その選択は設定したデフォルトよりも長く残ります。ブランドに合う必要があるポータルは、代わりにピンできます:テーマプロバイダーでアクセントを設定し、ロックをオンにします。設定された色が訪問者が以前に選んだ色に勝ち、保存された好みがそれに合わせて書き換えられ、アクセント選択は設定パネルから外されます。ライト/ダークモードは訪問者がどちらを選ぶかのままです。

注記

ロックがなければ、テーマ提供者のアクセントは デフォルト に過ぎず、初めて訪れる人に適用され、誰かが自分のアクセントを選んだ瞬間に上書きされます。 AllowColorChange="false" でピックを隠しても色は設定されません。ただセクションを隠すだけで、すでにアクセントを選んだ人はその選択に残ります。色が本当に重要なときに鍵に手を伸ばしましょう。

どのセクションを表示するか

パネルの各セクションは <SiteSettingsButton>のブールパラメータによってゲートされています。隠したいものを falseに設定すると、パネルがその周りにリフローします。

• AllowLanguageChange — デフォルトは true。言語選びの人を見せてください。単一言語ポータルで false に設定して、セクションが空に表示されないようにしてください。
• AllowThemeChange — デフォルトは true。ライト/ダーク/システムの切り替え表示。
• AllowColorChange — はデフォルトで trueです。アクセントカラーピッカーを表示します。ただし、非表示しても色は直りません。ブランドアクセントを強制するには、テーマプロバイダー(上記参照)でロックしてください。このセクション自体が非表示になります。
• AllowRightToLeftChange — デフォルトは false。テキスト方向切り替えを見せてください。ポータルがRTLコンテンツを積極的にサポートしている場合にのみ有効にしてください。

4つのセクション すべて をオフにすると、ボタン自体が隠れてしまい、パネルに表示されるものが何もありません。

API参照