IgbTabs/IgbTab/IgbTabPanel – 新バージョンへの移行

Ignite UI for Blazor が提供するタブコンポーネントは、バージョン 25.1 で、それまでとは使用方法が変更となりました。以下では従来バージョンで使用していたタブコンポーネントを、どのようにしてバージョン 25.1 に移行するか、その方法を説明します。

使用法の変更箇所と対応方法

• <IgbTab> の Panel パラメータは廃止されました。代わりに Label パラメータに置き換えてください。
• <IgbTab> 内に記載していたタブのテキストは、<span> などの要素で囲み、slot=”label” の属性を付けてください。
• <IgbTabPanel> は廃止されました。代わりに、<IgbTabPanel> 内に配置していたコンテンツは、対応する <IgbTab> 内に移動してください。

実際の例

以下のようなタブコンポーネントの使用例があったとします。

<IgbTabs>

  <IgbTab Panel="tab-A">
    タブ A
  </IgbTab>

  <IgbTab Panel="tab-B">
    タブ B
  </IgbTab>

  <IgbTabPanel id="tab-A">
    <div>
      ここにタブ A のコンテンツを配置します。
    </div>
  </IgbTabPanel>

  <IgbTabPanel id="tab-A">
    <div>
      ここにタブ B のコンテンツを配置します。
    </div>
  </IgbTabPanel>

</IgbTabs>

これをバージョン 25.1 に対応させるには、以下のように書き換えます。

<IgbTabs>

  <IgbTab Label="tab-A">

    <span slot="label"> タブ A </span>

    <div>
      ここにタブ A のコンテンツを配置します。
    </div>

  </IgbTab>

  <IgbTab Label="tab-B">

    <span slot="label"> タブ B </span>

    <div>
      ここにタブ B のコンテンツを配置します。
    </div>

  </IgbTab>

</IgbTabs>

より具体的なサンプルは以下から参照いただけます。また、以下の GitHub リポジトリでは、バージョン 25.1 以降前と移行後とでコミット分けていますので、その差分も確認いただけます。