Modal

ナビゲーションを開く

Prop	Type	Default
`aria-describedby?`	`string`	-
`aria-label?`	`string`	-
`aria-labelledby?`	`string`	-
`children?`	`ReactNode`	-
`defaultOpen?`	`boolean`	-
`isOpen?`	`boolean`	-
`onClose?`	`() => void`	-
`ref?`	`Ref<HTMLDialogElement>`	-

const [isOpen, setIsOpen] = useState(false);

<Button onClick={() => setIsOpen(true)}>
  Open Modal
</Button>
<Modal
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  side="center"
>
  <Dialog.Root>
    <Dialog.Header
      onClose={() => setIsOpen(false)}
      title="Confirmation"
    />
    <Dialog.Content>
      <p>Are you sure you want to proceed?</p>
    </Dialog.Content>
  </Dialog.Root>
</Modal>

<Button onClick={() => setCenterOpen(true)}>Center</Button>
<Button onClick={() => setBottomOpen(true)}>Bottom</Button>
<Button onClick={() => setRightOpen(true)}>Right</Button>

<Modal isOpen={centerOpen} onClose={() => setCenterOpen(false)} side="center">
  <Dialog.Root>
    <Dialog.Header onClose={() => setCenterOpen(false)} title="Center Modal" />
    <Dialog.Content>Centered on screen</Dialog.Content>
  </Dialog.Root>
</Modal>

<Modal isOpen={bottomOpen} onClose={() => setBottomOpen(false)} side="bottom">
  <Dialog.Root>
    <Dialog.Header onClose={() => setBottomOpen(false)} title="Bottom Modal" />
    <Dialog.Content>Slides up from bottom</Dialog.Content>
  </Dialog.Root>
</Modal>

<Modal isOpen={rightOpen} onClose={() => setRightOpen(false)} side="right">
  <Dialog.Root>
    <Dialog.Header onClose={() => setRightOpen(false)} title="Right Modal" />
    <Dialog.Content>Slides in from right</Dialog.Content>
  </Dialog.Root>
</Modal>

<Modal defaultOpen side="center">
  <Dialog.Root>
    <Dialog.Header
      onClose={() => {}}
      title="Default Open Modal"
    />
    <Dialog.Content>
      <p>This modal is open by default.</p>
    </Dialog.Content>
  </Dialog.Root>
</Modal>

import { usePortalRoot } from '@k8ordo/ui';
import { createPortal } from 'react-dom';

function FloatingLayer({ children }) {
  // Inside a Modal this is the top-layer <dialog>; outside it is undefined.
  const portalRoot = usePortalRoot();
  return createPortal(children, portalRoot?.current ?? document.body);
}

インポート

使い方

基本的な使い方

配置

デフォルトで開く

トップレイヤーとPortal

Modal

インポート

使い方

基本的な使い方

配置

デフォルトで開く

トップレイヤーとPortal

Props