タブ

Tabs ページをタブに分割し、それぞれ TabPanel は Value 名で名付けられます(Reactではvalue )、BlazorやReactでも同様です。選択したタブをURL内に保持できるため、ページは再びそのタブで開き、各パネルは初めて表示された時にのみマウントされます。

選択したタブを覚えて

SelectedTabQueryParameter(ReactでselectedTabQueryParameter)を設定し、選択したタブをそのクエリ文字列パラメータ内に保持します。リフレッシュ、共有リンク、またはページに戻ると、そのタブでタブが開きます。タブを選択するとブラウザの履歴エントリーが置き換わるため、戻るボタンはタブを経由せずページを離れ、フォームの未保存変更警告も表示されません。デフォルトのタブはURLから省略されます。タブは位置ではなく値で名前が付けられるため、タブを追加または移動してもリンクは右側のタブを開きます。ページ上の各タブセットに独自のパラメータを与えましょう。

取り付けパネル

パネルはタブが初めて表示されたときにマウントされ、その後はマウントされたままなので、そのパネル上のグリッドは必要な時まで読み込まれず、ユーザーが戻ってきても再度読み込まれず、ページや検索も失われません。パネルのエディターはマウントされるまでフォームの一部ではないので、フォームのフィールドのパネルをタブでマウントしてください。LazyMount(ReactではlazyMount)をそのTabPanelに設定falseし、フォームがタブを開く前にそれらを検証・保存します。タブをマウントするすべてのパネルをTabsに設定してください。

タブの選択

どのタブが選択されているか、または選択するために SelectedTab (ReactのselectedTab と onSelectedTabChange )をバインドします。 DefaultTab (defaultTab)は、他に何も選ばれないときに選択されます。そうでなければ、最初に無効になっていないタブです。ページを開くときに、URLで名付けられたタブが両方のタブの上に選択されます。