Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.7.2

Modal

Modalは、主要なコンテンツに重ねて表示され、ユーザーの注意を情報のみに集中させるコンポーネントです。

ソース@yamada-ui/modal

インポート

import {
  Modal,
  ModalOverlay,
  ModalCloseButton,
  ModalHeader,
  ModalBody,
  ModalFooter,
} from "@yamada-ui/react"
Copied!
  • Modal: モーダルの状態を制御するラッパーコンポーネントです。
  • ModalOverlay: モーダルの背後に存在するオーバーレイのコンポーネントです。
  • ModalCloseButton: モーダルを閉じるボタンのコンポーネントです。
  • ModalHeader: モーダルのヘッダーを表示するコンポーネントです。
  • ModalBody: モーダルのメインコンテンツを表示するコンポーネントです。
  • ModalFooter: モーダルのフッターを表示するコンポーネントです。

使い方

表示または非表示を制御するために、isOpenとonCloseを設定します。

編集可能な例

const { isOpen, onOpen, onClose } = useDisclosure()

return (
  <>
    <Button onClick={onOpen}>Open Modal</Button>

    <Modal isOpen={isOpen} onClose={onClose}>
      <ModalHeader>ドラゴンボール</ModalHeader>

      <ModalBody>
        『ドラゴンボール』（DRAGON
        BALL）は、鳥山明による日本の漫画作品。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
      </ModalBody>

      <ModalFooter>
        <Button variant="ghost" onClick={onClose}>
          とじる
        </Button>
        <Button colorScheme="primary">Wikipedia</Button>
      </ModalFooter>
    </Modal>
  </>
)
Copied!

サイズを変更する

編集可能な例

const sizeMap = [
  "xs",
  "sm",
  "md",
  "lg",
  "xl",
  "2xl",
  "3xl",
  "4xl",
  "5xl",
  "6xl",
  "full",
]
const [size, setSize] = useState("md")
const { isOpen, onOpen, onClose } = useDisclosure()

return (
  <>
    <Wrap gap="md">
      {sizeMap.map((size) => (
        <Button
          key={size}
          onClick={() => {
            setSize(size)
            onOpen()
          }}
        >
          Open {size} Modal
        </Button>
      ))}
    </Wrap>

    <Modal isOpen={isOpen} onClose={onClose} size={size}>
      <ModalHeader>ドラゴンボール</ModalHeader>

      <ModalBody>
        『ドラゴンボール』（DRAGON
        BALL）は、鳥山明による日本の漫画作品。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
      </ModalBody>

      <ModalFooter>
        <Button variant="ghost" onClick={onClose}>
          とじる
        </Button>
        <Button colorScheme="primary">Wikipedia</Button>
      </ModalFooter>
    </Modal>
  </>
)
Copied!

位置を変更する

表示位置を変更するには、placementにtopやleft-startなどを設定します。デフォルトでは、bottomが設定されています。

編集可能な例

const placementMap = [
  "center",
  "top",
  "right",
  "bottom",
  "left",
  "top-left",
  "top-right",
  "bottom-left",
  "bottom-right",
]
const [placement, setPlacement] = useState("center")
const { isOpen, onOpen, onClose } = useDisclosure()

return (
  <>
    <Wrap gap="md">
      {placementMap.map((placement) => (
        <Button
          key={placement}
          onClick={() => {
            setPlacement(placement)
            onOpen()
          }}
        >
          Open {placement} Modal
        </Button>
      ))}
    </Wrap>

    <Modal isOpen={isOpen} onClose={onClose} placement={placement}>
      <ModalHeader>ドラゴンボール</ModalHeader>

      <ModalBody>
        『ドラゴンボール』（DRAGON
        BALL）は、鳥山明による日本の漫画作品。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
      </ModalBody>

      <ModalFooter>
        <Button variant="ghost" onClick={onClose}>
          とじる
        </Button>
        <Button colorScheme="primary">Wikipedia</Button>
      </ModalFooter>
    </Modal>
  </>
)
Copied!

アニメーションを変更する

表示または非表示のアニメーションを変更するには、animationにtopやleftなどを設定します。デフォルトでは、scaleが設定されています。

編集可能な例

const animationMap = ["scale", "top", "left", "bottom", "right"]
const [animation, setAnimation] = useState("scale")
const { isOpen, onOpen, onClose } = useDisclosure()

return (
  <>
    <Wrap gap="md">
      {animationMap.map((animation) => (
        <Button
          key={animation}
          onClick={() => {
            setAnimation(animation)
            onOpen()
          }}
        >
          Open {animation} Modal
        </Button>
      ))}
    </Wrap>

    <Modal isOpen={isOpen} onClose={onClose} animation={animation}>
      <ModalHeader>ドラゴンボール</ModalHeader>

      <ModalBody>
        『ドラゴンボール』（DRAGON
        BALL）は、鳥山明による日本の漫画作品。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
      </ModalBody>

      <ModalFooter>
        <Button variant="ghost" onClick={onClose}>
          とじる
        </Button>
        <Button colorScheme="primary">Wikipedia</Button>
      </ModalFooter>
    </Modal>
  </>
)
Copied!

所要時間を変更する

所要時間を変更する場合は、durationに数値(秒)を設定します。

編集可能な例

const { isOpen, onOpen, onClose } = useDisclosure()

return (
  <>
    <Button onClick={onOpen}>Open Modal</Button>

    <Modal isOpen={isOpen} onClose={onClose} duration={0.4}>
      <ModalHeader>ドラゴンボール</ModalHeader>

      <ModalBody>
        『ドラゴンボール』（DRAGON
        BALL）は、鳥山明による日本の漫画作品。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
      </ModalBody>

      <ModalFooter>
        <Button variant="ghost" onClick={onClose}>
          とじる
        </Button>
        <Button colorScheme="primary">Wikipedia</Button>
      </ModalFooter>
    </Modal>
  </>
)
Copied!

オーバーフローの動作を変更する

デフォルトでは、insideが設定されており、スクロールはModalBody内でのみ発生します。outsideを設定すると、Modal内でスクロールが発生します。

編集可能な例

const [scrollBehavior, setScrollBehavior] = useState("inside")
const { isOpen, onOpen, onClose } = useDisclosure()

return (
  <>
    <Wrap gap="md">
      <Button
        onClick={() => {
          setScrollBehavior("inside")
          onOpen()
        }}
      >
        Open inside scroll Modal
      </Button>
      <Button
        onClick={() => {
          setScrollBehavior("outside")
          onOpen()
        }}
      >
        Open outside scroll Modal
      </Button>
    </Wrap>

    <Modal
      isOpen={isOpen}
      onClose={onClose}
      scrollBehavior={scrollBehavior}
      h="xl"
    >
      <ModalHeader>ドラゴンボール</ModalHeader>

      <ModalBody>
        <Text>
          『ドラゴンボール』（DRAGON
          BALL）は、鳥山明による日本の漫画作品。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
        </Text>

        <Text>
          1986年から1996年までフジテレビ系列で『ドラゴンボール』、『ドラゴンボールZ』が放送され、11年間のシリーズ放送期間中、平均視聴率20%以上を記録した。また、全世界80か国以上で放送されるなど、世界中で絶大な人気を誇る、日本の漫画・アニメを代表する作品である。
          連載終了後もテレビアニメ・映画・ゲームなどが展開しており、映画『ドラゴンボール超
          ブロリー』が全世界興行収入135億円を記録し、各国で大ヒットした。
        </Text>

        <Text>
          1991年に『週刊少年ジャンプ21・22合併号』で行われた読者アンケートでは、同誌のアンケート史上最大得票となる1000通中815票を獲得し、1995年3・4合併号（1994年12月発売）で同誌の発行部数は653万部を記録。本作の連載終了後は同誌の部数が急速に減少していくなど、連載作品の中でも特に影響は大きかった。
        </Text>

        <Text>
          単行本の発行部数は完全版（2000万部）を含み国内で1億6000万部以上、全世界累計で2億6000万部を記録。
        </Text>

        <Text>
          ゲームソフトは現在までにミリオンセラーを10本以上輩出し、シリーズ累計販売本数は全世界5000万本に達する。『スーパードラゴンボールヒーローズ』はカード累計出荷枚数10億枚、登録ユーザー数は400万人を突破し、デジタルキッズカードゲーム市場でNo.1の人気タイトルである。
        </Text>

        <Text>
          2019年時点で、漫画・アニメシリーズ・ゲーム作品などを含めた総売上は230億ドル（約2兆5000億円）に達する。
        </Text>
      </ModalBody>

      <ModalFooter>
        <Button variant="ghost" onClick={onClose}>
          とじる
        </Button>
        <Button colorScheme="primary">Wikipedia</Button>
      </ModalFooter>
    </Modal>
  </>
)
Copied!

モーダルを開いたときにスクロールをブロックしない

デフォルトでは、モーダルを開いた際に主要なコンテンツのスクロールをブロックしています。これは、アクセシビリティを確保するためです。もし、主要なコンテンツのスクロールをブロックしたくない場合は、blockScrollOnMountをfalseに設定します。

編集可能な例

const { isOpen, onOpen, onClose } = useDisclosure()

return (
  <>
    <Button onClick={onOpen}>Open Modal</Button>

    <Modal isOpen={isOpen} onClose={onClose} blockScrollOnMount={false}>
      <ModalHeader>ドラゴンボール</ModalHeader>

      <ModalBody>
        『ドラゴンボール』（DRAGON
        BALL）は、鳥山明による日本の漫画作品。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
      </ModalBody>

      <ModalFooter>
        <Button variant="ghost" onClick={onClose}>
          とじる
        </Button>
        <Button colorScheme="primary">Wikipedia</Button>
      </ModalFooter>
    </Modal>
  </>
)
Copied!

オーバーレイをカスタマイズする

ModalOverlayにpropsなどを渡して、カスタマイズしたい場合は、省略せずに設定します。

編集可能な例

const { isOpen, onOpen, onClose } = useDisclosure()

return (
  <>
    <Button onClick={onOpen}>Open Modal</Button>

    <Modal isOpen={isOpen} onClose={onClose}>
      <ModalOverlay bg="blackAlpha.300" backdropFilter="blur(10px)" />

      <ModalHeader>ドラゴンボール</ModalHeader>

      <ModalBody>
        『ドラゴンボール』（DRAGON
        BALL）は、鳥山明による日本の漫画作品。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
      </ModalBody>

      <ModalFooter>
        <Button variant="ghost" onClick={onClose}>
          とじる
        </Button>
        <Button colorScheme="primary">Wikipedia</Button>
      </ModalFooter>
    </Modal>
  </>
)
Copied!

オーバーレイを無効にする

モーダルのオーバーレイを無効(非表示)にする場合は、withOverlayをfalseにします。

編集可能な例

const { isOpen, onOpen, onClose } = useDisclosure()

return (
  <>
    <Button onClick={onOpen}>Open Modal</Button>

    <Modal isOpen={isOpen} onClose={onClose} withOverlay={false}>
      <ModalHeader>ドラゴンボール</ModalHeader>

      <ModalBody>
        『ドラゴンボール』（DRAGON
        BALL）は、鳥山明による日本の漫画作品。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
      </ModalBody>

      <ModalFooter>
        <Button variant="ghost" onClick={onClose}>
          とじる
        </Button>
        <Button colorScheme="primary">Wikipedia</Button>
      </ModalFooter>
    </Modal>
  </>
)
Copied!

閉じるボタンをカスタマイズする

ModalCloseButtonにpropsなどを渡して、カスタマイズしたい場合は、省略せずに設定します。

編集可能な例

const { isOpen, onOpen, onClose } = useDisclosure()

return (
  <>
    <Button onClick={onOpen}>Open Modal</Button>

    <Modal isOpen={isOpen} onClose={onClose}>
      <ModalCloseButton color="red.500" />

      <ModalHeader>ドラゴンボール</ModalHeader>

      <ModalBody>
        『ドラゴンボール』（DRAGON
        BALL）は、鳥山明による日本の漫画作品。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
      </ModalBody>

      <ModalFooter>
        <Button variant="ghost" onClick={onClose}>
          とじる
        </Button>
        <Button colorScheme="primary">Wikipedia</Button>
      </ModalFooter>
    </Modal>
  </>
)
Copied!

閉じるボタンを無効にする

onCloseを設定しない場合は、閉じるボタンを無効(非表示)になります。

編集可能な例

const { isOpen, onOpen, onClose } = useDisclosure()

return (
  <>
    <Button onClick={onOpen}>Open Modal</Button>

    <Modal isOpen={isOpen}>
      <ModalHeader>ドラゴンボール</ModalHeader>

      <ModalBody>
        『ドラゴンボール』（DRAGON
        BALL）は、鳥山明による日本の漫画作品。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
      </ModalBody>

      <ModalFooter>
        <Button variant="ghost" onClick={onClose}>
          とじる
        </Button>
        <Button colorScheme="primary">Wikipedia</Button>
      </ModalFooter>
    </Modal>
  </>
)
Copied!

ネストされたモーダル

編集可能な例

const firstControls = useDisclosure()
const secondControls = useDisclosure()

return (
  <>
    <Button onClick={firstControls.onOpen}>Open Modal</Button>

    <Modal isOpen={firstControls.isOpen} onClose={firstControls.onClose}>
      <ModalHeader>ドラゴンボール</ModalHeader>

      <ModalBody>
        『ドラゴンボール』（DRAGON
        BALL）は、鳥山明による日本の漫画作品。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
      </ModalBody>

      <ModalFooter>
        <Button variant="ghost" onClick={firstControls.onClose}>
          とじる
        </Button>
        <Button colorScheme="primary" onClick={secondControls.onOpen}>
          あらすじ
        </Button>
      </ModalFooter>

      <Modal
        isOpen={secondControls.isOpen}
        onClose={secondControls.onClose}
        size="sm"
      >
        <ModalHeader>あらすじ</ModalHeader>

        <ModalBody>
          地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。
        </ModalBody>

        <ModalFooter>
          <Button variant="ghost" onClick={secondControls.onClose}>
            とじる
          </Button>
          <Button colorScheme="primary">Wikipedia</Button>
        </ModalFooter>
      </Modal>
    </Modal>
  </>
)
Copied!

GitHubでこのページを編集する

前オーバーレイ次Dialog