ポータル

フロントエンド開発では、コンポーネント（モーダルやツールチップなど）をトリガーされた場所とは異なる場所に表示する必要がある場合があります。問題は、UI要素をDOMツリーの異なる部分にレンダリングする必要があり、要素をトリガーするコンポーネントがレンダリングの場所を制御する方法を持つ必要があることです。

他のフレームワークでは、createPortal()などの専用のAPIによって解決されることがよくあります。しかし、このようなAPIはサーバーサイドレンダリングではうまく機能しないため、代替アプローチが必要です。

幸いなことに、これを処理するネイティブの動作があります。それはトップレイヤーと呼ばれ、すべての主要なブラウザでサポートされています。

Qwik UI

Qwik UIチームは、ギャップを埋め、すべてのブラウザで本番環境でこの動作を使用できるようにする素晴らしい仕事をしました。

モーダル

ユーザーにページの他の部分と対話させたくない場合に、モーダルを使用します。残りのコンテンツは不活性、つまり対話できません。

Qwik UIのモーダルコンポーネントは、dialog要素のshowModalメソッドを使用しており、ブラウザでよくサポートされており、HTMLドキュメントの外にUIを自動的に配置します。

フォーカスとスクロールのロック、警告ダイアログ、自動的な入退場アニメーションのサポート、背景アニメーションなどの動作も含まれています。

ポップオーバー

UI要素がページの他の部分と対話できる場合は、モーダルではありません。

モーダルではないコンポーネントの例をいくつか示します。

• ポップオーバー
• オーバーレイ
• トースト
• ツールチップ
• ドロップダウンメニュー
• セレクト
• コンボボックス

MDNのポップオーバーAPIは、モーダルではないコンポーネントでポータルの必要性を置き換えます。すべての主要なブラウザでもサポートされています。

Qwik UIは、ネイティブ仕様と同等の機能を持つポリフィルを提供することで、この問題に取り組んでいます。Qwik UIのPopoverコンポーネントを使用すると、今日から本番環境でポップオーバーAPIの動作を使用できます。

セレクトやコンボボックスのようなコンポーネントの場合、Qwik UIは「フローティング」動作を選択することもできます。たとえば、リストボックスが入力要素にアンカーされている場合です。Popoverコンポーネントにfloating={true}を追加することで実行できます。これにより、フローティング動作に必要な追加のJavaScriptが実行されます。

これは意図的にオプトインです。いずれはCSS Anchor APIがネイティブソリューションを提供するため、より一般的なサポートが得られたときに、容易に移行できるはずです。

これらのソリューションはネイティブ仕様に基づいて構築されているため、プリフェッチする必要があるJavaScriptが少なくなり、実行する必要がある作業も少なくなります！

Qwik UIのポップオーバーとモーダルコンポーネントの両方とも、メタフレームワークやマイクロフロントエンドに関係なく、Qwikをサポートしている限り使用できます。