IgbTabs – 選択しているタブのラベルを取得したい

IgbTabsを使用して、現在選択されているタブのラベルをコードビハインドで取得する方法について解説します。ここでは、Changeイベントを利用して、タブが切り替わったタイミングでラベルを取得する方法を紹介します。

IgbTabs の設定

まず、IgbTabsを使用してタブを表示する準備をします。@refディレクティブを使ってIgbTabsを参照できるように設定し、Changeイベントにタブ切り替え時の処理を割り当てます。各タブの表示名はLabelプロパティで指定します。
以下のコード例では、3つのタブを配置し、選択中のタブのラベルを _panel に保持して画面に表示しています。

<IgbTabs @ref="tabs" Change="OnChangeTabs">
    <IgbTab Label="Tab 1">
        <span>Content for tab 1</span>
    </IgbTab>
    <IgbTab Label="Tab 2">
        <span>Content for tab 2</span>
    </IgbTab>
    <IgbTab Label="Tab 3">
        <span>Content for tab 3</span>
    </IgbTab>
</IgbTabs>

<div>Selected panel is [@_panel]</div>

タブ切り替え時にラベルを取得する（Changeイベントの使用）

タブが切り替わったタイミングでラベルを取得するには、Changeイベントに割り当てたハンドラー内でGetSelectedAsyncを呼び出します。

private async Task OnChangeTabs(IgbTabComponentEventArgs args)
{
    if (tabs is null) return;
    _panel = await tabs.GetSelectedAsync();
}

実行結果

この実装により、初期表示時には最初に選択されているタブのラベルが表示され、タブを切り替えるたびに選択中タブのラベルが画面に反映されます。