フルエントUIです
PowerPortalsProはMicrosoftのFluent UI設計システムに基づいて構築されています。Blazorスタックは Fluent UI Blazorを使い、Reactスタックは Fluent UI React (@fluentui/react-components)を使っています。PowerPortalsProのコンポーネントはこれらのライブラリを基盤に構築されているため、スタック用のものに慣れているとフレームワークを最大限に活用できます。
図書館について
どちらも Fluent 2デザインシステムを実装するMicrosoftの公式オープンソースプロジェクトです。
- Fluent UI Blazor (
Microsoft.FluentUI.AspNetCore.Components) — 70+のBlazorコンポーネント(ボタン、フォーム、データグリッド、ナビゲーション、ダイアログなど)がBlazor ServerとWebAssemblyの両方のホスティングモデルをサポートします。 - Fluent UI React (
@fluentui/react-components、別名Fluent UI v9)— Reactテンプレートを駆動するReactコンポーネントライブラリで、同じデザイン言語とトークンシステムを共有しています。
PowerPortalsProで使用される主要コンポーネント
コンポーネントライブラリはあなたのポータルでご覧いただけます。 ブレイザー スタックではよく出会う:
- FluentDataGrid — SubGridコンポーネントで表形式データの表示に使用され、ソート、フィルタリング、ページ付けが可能
- FluentTextField / FluentSelect / FluentCheckbox — エディタコンポーネントで使用されるフォーム入力
- FluentDialog — ダイアログサービスでモーダルフォームや確認に使用されます
- FluentNavMenu / FluentNavLink — サイトナビゲーションコンポーネント
- FluentTabs — コード例やタブ付きコンテンツのためにドキュメントサイトで使用されます
- FluentMessageBar — インライン通知とアラート
- FluentToastProvider — トースト通知
- FluentDesignTheme — ライト/ダークモードとアクセントカラー対応のテーマ管理
Reactスタックでは、同等のものは以下の@fluentui/react-componentsから来ています:
- 入力 / ドロップダウン / コンボボックス / チェックボックス — React Editor コンポーネントが構築するフォームプリミティブ
- ダイアログ — Reactダイアログサービスを通じて表示されるモーダルフォームや確認
- ナビ (
@fluentui/react-nav年)— サイトナビゲーション - タブリスト — タブ付きのコンテンツ、このサイトのコード例を含む
- MessageBar — インライン通知とアラート
- トースター — トースト通知
- FluentProvider — デザイントークンテーマ(ライト/ダーク+アクセント)をアプリ全体に適用します
テーマ
両方のFluent UIライブラリは適応型デザイントークンシステムを共有しています。Blazorでは、PowerPortalsProがThemeProviderとSiteSettingsButtonコンポーネントを通じてそれを露出します。Reactでは、FluentのFluentProviderを包むPowerPortalsProThemeProviderとReact SiteSettingsButtonを通じて露出します。どちらもライトモードとダークモードを切り替えたり、アクセントカラーを変更したり、右から左へのテキスト方向を切り替えたりでき、すべてのスタイリングはデザイントークンで制御されるため、テーマが変わるとポータルが自動的に適応します。
ヒント
カスタムスタイルを書く際は、ハードコードされた色よりもFluentデザイントークンを好む。Blazorでは
var(--accent-fill-rest)やvar(--neutral-foreground-rest)、Reactでは@fluentui/react-componentsのtokens.*値(例:tokens.colorBrandBackground)を選びます。これにより、明暗のテーマでスタイルが一貫性を保てます。
アクセスのしやすさ
両方のFluent UIライブラリには、WCAG 2.1準拠、キーボードナビゲーション、スクリーンリーダーのサポートが組み込まれています。これらの基盤を基に構築することで、PowerPortalsProポータルはどちらのスタックでも自動的にこれらのアクセシビリティ機能を継承します。
資料
フルエントUIブレイザー
フルエントUIリアクション
共有設計システム: Fluent 2 設計システム