Modal

ユーザの選択を待つ子ウィンドウコンポーネント

OverlayProviderの子孫で使用してください。OverlayProviderはアプリケーション内で複数必要ありません。ModalBody,ModalHeader,ModalAlignを必要に応じて利用できます。

BASIC

import { FC, useState } from 'react'
import {
  Button,
  Modal,
  ModalAlign,
  ModalBody,
  ModalHeader,
  OverlayProvider,
} from '@charcoal-ui/react'

export const ExampleModal: FC = () => {
  const [isOpen, setIsOpen] = useState(false)
  return (
    <>
      <Button onClick={() => setIsOpen(true)}>open</Button>
      <OverlayProvider>
        <Modal
          title="modal"
          isOpen={isOpen}
          onClose={() => setIsOpen(false)}
          portalContainer={
            typeof document !== 'undefined' ? document.body : undefined
          }
        >
          <ModalBody>
            <ModalHeader />
            <ModalAlign>
              <Button onClick={() => setIsOpen(false)}>close</Button>
            </ModalAlign>
          </ModalBody>
        </Modal>
      </OverlayProvider>
    </>
  )
}

size

isDismissable

bottomSheet

Props

name	description	type	default	required
isOpen	モーダルの開閉状態	boolean		YES
onClose	バツボタンやオーバーレイをクリックした際や、ESCキーを押した際に呼ばれる関数	() => void		YES
title	タイトル	string		YES
bottomSheet	モバイル向けに下からシート形式で表示するかどうか、"full"だと画面の高さに合わせて表示される	boolean \| "full"	false	NO
isDismissable	バツボタンを表示しモーダルを閉じれるようにする、かつモーダルの背景をクリックすることで閉じれるようにする	boolean	false	NO
portalContainer	Next.jsで使用する際はdocument.bodyを渡す	HTMLElement		NO
size	モーダルのサイズ	"S" \| "M" \| "L"	"M"	NO
zIndex	z-index	number		NO