IgrTabs – タブを閉じる前に確認ダイアログを表示するには

  • 公開日:
  • 最終更新日:

Ignite UI for React のタブコンポーネント IgrTabs で、各タブに閉じるボタンを配置し、クリックしたときに確認ダイアログを表示してからタブを削除する方法を紹介します。

IgrTabs の設定

今回の例では IgrTab の label スロット (slot="label") にタブ名と IgrIconButton を配置します。アイコンは registerIconFromText で SVG を “close” という名前で登録しておき、IgrIconButton の name と collection で指定します。タブは state の配列 (tabs) から map で生成します。

const closeIcon = "...";
registerIconFromText("close", closeIcon, "material");

<IgrTabs>
  {tabs.map((tab) => (
    <IgrTab key={tab.id}>
      <span slot="label">
        {tab.label}
        <IgrIconButton
          name="close"
          collection="material"
          variant="flat"
          onClick={() => closeTab(tab.id, tab.label)}
        />
      </span>
      <span>{tab.content}</span>
    </IgrTab>
  ))}
</IgrTabs>

window.confirm の使用

閉じるボタンのクリック時に呼び出す closeTab 関数で window.confirm を呼び出し、確認ダイアログを表示します。
「OK」が選択された場合のみ、filter で該当タブを除いた配列を setTabs に渡してタブを削除します。「キャンセル」が選択された場合は、何もせずに処理を終了します。

const [tabs, setTabs] = useState<TabItem[]>(initialTabs);

const closeTab = (id: string, label: string) => {
  const confirmed = window.confirm(`${label} タブを閉じますか？`);
  if (!confirmed) return;
  setTabs((prev) => prev.filter((tab) => tab.id !== id));
};

実行結果

各タブのラベルに表示された閉じるボタンをクリックすると確認ダイアログが表示され、「OK」を選択するとタブが削除されます。「キャンセル」を選択した場合、タブは削除されません。

サンプルプログラムのダウンロード GitHub リポジトリはこちら

ダウンロード後、以下のコマンドで実行できます。

npm ci
npm run dev
Tagged: