モーダル

注意を必要とする、または追加情報を提供するカスタムコンテンツを持つダイアログを表示します。

インストール

npx nextui-cli@latest add modal

上記のコマンドは個別のインストール専用です。もし @nextui-org/react がグローバルにインストールされている場合は、このステップをスキップできます。

インポート

NextUI は、モーダル関連のコンポーネントを 5 つエクスポートします。

• Modal: モーダルを表示するためのメインコンポーネント。
• ModalContent: 他のモーダルコンポーネントのラッパー。
• ModalHeader: モーダルのヘッダー。
• ModalBody: モーダルの本体。
• ModalFooter: モーダルのフッター。

使い方

モーダルが開くと

• フォーカスはモーダル内に制限され、最初のタブ移動可能な要素に設定されます。
• モーダルダイアログの背後にあるコンテンツは非アクティブになり、ユーザーは操作できなくなります。

サイズ

非破棄可能

デフォルトでは、モーダルはオーバーレイをクリックするか、Escキーを押すことで閉じることができます。この動作を無効にするには、次のプロパティを設定します。

• isDismissable プロパティを false に設定すると、オーバーレイをクリックしてもモーダルが閉じられなくなります。
• isKeyboardDismissDisabled プロパティを true に設定すると、Esc キーを押してもモーダルが閉じられなくなります。

モーダルの配置

デフォルトでは、モーダルは sm より大きい画面では中央に配置され、モバイルでは画面の 下部 に配置されます。この配置は auto と呼ばれますが、placement プロパティを使用して変更できます。

注意: top-center および bottom-center の位置は、モーダルがモバイルでは画面の上部/下部に配置され、デスクトップでは画面の中央に配置されることを意味します。

オーバーフロースクロール

モーダルのスクロール動作を設定するには、scrollBehavior プロパティを使用できます。

• inside: モーダルのコンテンツがスクロール可能になります。
• outside: モーダルのコンテンツがスクロール可能になり、モーダルが固定されます。

フォームの使用

Modal は、モーダルコンテンツ内のフォーカスを処理します。つまり、フォーム要素を持つモーダルを問題なく使用できます。モーダルが閉じると、フォーカスはトリガーに戻ります。

注意: モーダルが開いたときにフォーカスを当てるには、最初の Input コンポーネントに autoFocus プロパティを追加できます。

背景

Modal コンポーネントには、モーダルの背後に背景を表示する backdrop プロパティがあります。背景は、transparent、opaque、または blur のいずれかにできます。デフォルト値は opaque です。

カスタム背景

backdrop スロットを使用すると、背景をカスタマイズできます。

カスタムモーション

モーダルは、enter / exit アニメーションをカスタマイズするための motionProps プロパティを提供します。

Framer motion variants の詳細については、こちらを参照してください。

スロット

• wrapper: モーダルのラッパースロット。base スロットと backdrop スロットをラップします。
• base: モーダルコンテンツのメインスロット。
• backdrop: 背景スロット。モーダルの背後に表示されます。
• header: モーダルのヘッダー。モーダルの上部に表示されます。
• body: モーダルの本文。モーダルの中央に表示されます。
• footer: モーダルのフッター。モーダルの下部に表示されます。
• closeButton: モーダルの閉じるボタン。

カスタムスタイル

コンポーネントスロットにカスタムTailwind CSSクラスを渡すことで、Modal コンポーネントをカスタマイズできます。

データ属性

Modal の base 要素には、次の属性があります。

• data-open: モーダルが開いている場合。モーダル状態に基づきます。
• data-dismissable: モーダルが閉じることが可能な場合。isDismissable プロパティに基づきます。

アクセシビリティ

• モーダルが開いている間、モーダル外のコンテンツは支援技術から隠されます。
• モーダルは、モーダル外の操作時、またはEscキーを押すとオプションで閉じます。
• フォーカスはマウント時にモーダル内に移動し、アンマウント時にトリガー要素に戻ります。
• 開いている間、フォーカスはモーダル内に閉じ込められ、ユーザーが外にタブ移動することを防ぎます。
• モーダルが開いている間、モバイルブラウザを含め、モーダルの背後にあるページのスクロールは阻止されます。

API

モーダルProps

モーダルイベント

モーダルタイプ

Motion Props

export type MotionProps = HTMLMotionProps<"div">; // @see https://www.framer.com/motion/