テーマとサイト設定

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

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

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

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

注記

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

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

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

注記

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

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

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

• AllowLanguageChange — デフォルトは true。言語選びの人を見せてください。単一言語ポータルで false に設定して、セクションが空に表示されないようにしてください。
• AllowThemeChange — デフォルトは true。ライト/ダーク/システムの切り替え表示。
• AllowColorChange — デフォルトは true。アクセントカラーピッカーを見せてください。ブランドが特定のアクセントを義務付けている場合は無効にしましょう。
• AllowRightToLeftChange — デフォルトは false。テキスト方向切り替えを見せてください。ポータルがRTLコンテンツを積極的にサポートしている場合にのみ有効にしてください。

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

API参照