跳至主要内容

[UI] Modal

Headless UI​

dialog @ headless UI

使用方式（API）​

都包在 Dialog 這個元件內，包含 Dialog.Overlay、Dialog.Title 和 Dialog.Description：

  • 在 <Dialog> 上透過 open 來操作 modal 的開關
  • Dialog 打開時，scroll 會被 locked，
  • 點擊 Dialog 的外面或按 ESC 時會觸發 <Dialog> 上的 onClose()
import { Dialog } from '@headlessui/react'

<Dialog open={isOpen} onClose={() => setIsOpen(false)}>