Next.js と Headless UI で、ダイアログを実装する

Headless UI の Dialog

Dialog は重要なアクションや確認が必要な場面で使います。簡単にいうとアラートですね。例えば、ユーザーにデータ削除の確認を求めるときや、フォームを入力させるとき、ユーザーにとって重要な情報をアラート表示する場合などに適しています。

公式サイトのダイアログのドキュメントはこちらです。

ダイアログの実装例

以下は、Next.js と Headless UI を使用してダイアログを実装する例です。ダイアログはユーザーに重要なアクションの確認を求める際に役立ちます。

この例では、useState フックを使ってダイアログの開閉を管理しています。

アニメーション

開閉時にアニメーションを付与するには、Dialog コンポーネントに、transition プロパティを追加するだけで OK です。

CSS の sticky が効かなくなる問題

Headless UI のダイアログを表示すると、html のクラスに overflow: hidden; padding-right: 0px; が付与されることがあります。この影響で、sticky が効かなくなる問題が発生することがあります。

この問題を解決するには、ダイアログをオープンしたときに html の overflow を visible に設定することが有効です。

おわりに

ダイアログはユーザーに重要な情報を提供したり、確認を求める際に便利です。Headless UI の Dialog コンポーネントを使えば、シンプルかつ直感的に実装できます。Transition コンポーネントを使うことで、より魅力的な UI にもできます。ぜひ一度試してみて、自分のプロジェクトに役立ててみてくださいね。

参考

• Headless UI Dialog Documentation
• Tailwind CSS Documentation