Dialog

.dialog is for html dialog.

Applicable Elements

• dialog

Basic Usage

<dialog class="dialog" id="dialog-element">
  <p>Hello, this is a dialog.</p>
  <form method="dialog"><button class="button">OK</button></form>
</dialog>
<button class="button" onclick="document.getElementById('dialog-element').showModal()">Open Dialog</button>

React Component

React component <Dialog/> is available.
It has following features:

• Visibility is controlled by open prop. You don’t need to call showModal() or close() imperatively.
• Anchor element can be specified. It works not only as modal, but also as popover.
• React Portal is used to render dialog in front of other elements.
• Click away handler.
• No wrapper elements are introduced. A single <dialog> element is rendered.

Modal style

export default function DialogUsageModal() {
  const [open, setOpen] = useState(false);
  return (
    <div>
      <button className="button" type="button" onClick={() => setOpen(true)}>
        Click to set open={"{true}"}
      </button>
      <Dialog
        mode="modal"
        open={open}
        onClickAway={() => { setOpen(false); }}
        onCancel={() => { setOpen(false); }}
      >
        Click away to close
      </Dialog>
    </div>
  );
}

Popover style

export default function DialogUsagePopover() {
  const buttonRef = React.useRef<HTMLButtonElement>(null);
  const [open, setOpen] = useState(false);
  return (
    <div>
      <button ref={buttonRef} className="button" type="button" onClick={() => setOpen(true)}>
        Menu
      </button>
      <Dialog
        mode="popover"
        open={open}
        anchor={buttonRef.current}
        onClickAway={() => { setOpen(false); }}
      >
        <ul style={{ listStyle: "none", padding: 0 }}>
          <li><button type="button" className="menu-item">Buri</button></li>
          <li><button type="button" className="menu-item">Kampachi</button></li>
          <li><button type="button" className="menu-item">Iwashi</button></li>
        </ul>
      </Dialog>
    </div>
  );
}