JavaScript 新しいモーダルコンポーネントでオーバーレイを作成するサンプル

2024年6月23日

環境
Windows 11Pro 64bit
Google Chrome 126.0.6478.115（Official Build）（64 ビット）

概要
モーダルを使用してユーザーのワークフローを中断し、重要なメッセージに注意を向けます。
現在のアプリケーションウィンドウの上にメッセージを表示するモーダルでは、
アプリケーションの制御を取り戻すにはユーザーが操作する必要があります。

使用例
モーダルコンポーネントを作成するには、JavaScript ファイルの lightning/modal から
LightningModal をインポートします。次に、LightningModal を拡張するコンポーネントクラスを作成します。
LightningModal を拡張するコンポーネントクラスを作成します。

/* c/myModal.js */
import { api } from 'lwc';
import LightningModal from 'lightning/modal';
export default class CftModal extends LightningModal {
    handleOkay() {
        this.close('okay test');
   }
}

このコンポーネントは lightning-modal タグを使用しません。代わりに、モーダルの HTML テンプレートはヘルパー lightning-modal-* コンポーネントを使用して、
モーダルのヘッダー、フッター、および本文を作成します。

lightning-modal-body コンポーネントは必須で、その他は省略可能です。

<!-- c/myModal.html -->
<template>
    <lightning-modal-header label="My Modal Heading"></lightning-modal-header>
 <lightning-modal-body>This is the modal’s contents.123</lightning-modal-body>
  <lightning-modal-footer>
      <lightning-button label="OK" onclick={handleOkay}></lightning-button>
  </lightning-modal-footer>
</template>

Posted by arkgame