Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.7.2

Dialog

Dialogは、ユーザーに実行の確認または中断に使用されるコンポーネントです。

ソース@yamada-ui/modal

インポート

import {
  Dialog,
  DialogOverlay,
  DialogCloseButton,
  DialogHeader,
  DialogBody,
  DialogFooter,
} from "@yamada-ui/react"
Copied!
  • Dialog: ダイアログの状態を制御するラッパーコンポーネントです。
  • DialogOverlay: ダイアログの背後に存在するオーバーレイのコンポーネントです。
  • DialogCloseButton: ダイアログを閉じるボタンのコンポーネントです。
  • DialogHeader: ダイアログのヘッダーを表示するコンポーネントです。
  • DialogBody: ダイアログのメインコンテンツを表示するコンポーネントです。
  • DialogFooter: ダイアログのフッターを表示するコンポーネントです。

使い方

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

編集可能な例

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

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

    <Dialog
      isOpen={isOpen}
      onClose={onClose}
      header="孫悟空"
      cancel="わけない"
      onCancel={onClose}
      success="わける"
      onSuccess={onClose}
    >
      だ…大地よ海よ　そして生きているすべての　みんな…
      このオラにほんのちょっとずつだけ元気をわけてくれ…！！！
    </Dialog>
  </>
)
Copied!

または、DialogHeaderやDialogBodyを省略しない場合は、このように記述します。

編集可能な例

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

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

    <Dialog isOpen={isOpen} onClose={onClose}>
      <DialogHeader>孫悟空</DialogHeader>

      <DialogBody>
        だ…大地よ海よ　そして生きているすべての　みんな…
        このオラにほんのちょっとずつだけ元気をわけてくれ…！！！
      </DialogBody>

      <DialogFooter>
        <Button variant="ghost" onClick={onClose}>
          わけない
        </Button>
        <Button colorScheme="primary" onClick={onClose}>
          わける
        </Button>
      </DialogFooter>
    </Dialog>
  </>
)
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">
      <For each={sizeMap}>
        {(size) => (
          <Button
            key={size}
            onClick={() => {
              setSize(size)
              onOpen()
            }}
          >
            Open {size} Dialog
          </Button>
        )}
      </For>
    </Wrap>

    <Dialog
      isOpen={isOpen}
      onClose={onClose}
      size={size}
      header="孫悟空"
      cancel="わけない"
      onCancel={onClose}
      success="わける"
      onSuccess={onClose}
    >
      だ…大地よ海よ　そして生きているすべての　みんな…
      このオラにほんのちょっとずつだけ元気をわけてくれ…！！！
    </Dialog>
  </>
)
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">
      <For each={placementMap}>
        {(placement) => (
          <Button
            key={placement}
            onClick={() => {
              setPlacement(placement)
              onOpen()
            }}
          >
            Open {placement} Dialog
          </Button>
        )}
      </For>
    </Wrap>

    <Dialog
      isOpen={isOpen}
      onClose={onClose}
      placement={placement}
      header="孫悟空"
      cancel="わけない"
      onCancel={onClose}
      success="わける"
      onSuccess={onClose}
    >
      だ…大地よ海よ　そして生きているすべての　みんな…
      このオラにほんのちょっとずつだけ元気をわけてくれ…！！！
    </Dialog>
  </>
)
Copied!

所要時間を変更する

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

編集可能な例

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

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

    <Dialog
      isOpen={isOpen}
      onClose={onClose}
      header="孫悟空"
      cancel="わけない"
      onCancel={onClose}
      success="わける"
      onSuccess={onClose}
      duration={0.4}
    >
      だ…大地よ海よ　そして生きているすべての　みんな…
      このオラにほんのちょっとずつだけ元気をわけてくれ…！！！
    </Dialog>
  </>
)
Copied!

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

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

編集可能な例

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

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

    <Dialog
      isOpen={isOpen}
      onClose={onClose}
      scrollBehavior={scrollBehavior}
      h="xl"
      header="孫悟空"
      cancel="わけない"
      onCancel={onClose}
      success="わける"
      onSuccess={onClose}
    >
      <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>
    </Dialog>
  </>
)
Copied!

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

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

編集可能な例

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

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

    <Dialog
      isOpen={isOpen}
      onClose={onClose}
      header="孫悟空"
      cancel="わけない"
      onCancel={onClose}
      success="わける"
      onSuccess={onClose}
      blockScrollOnMount={false}
    >
      だ…大地よ海よ　そして生きているすべての　みんな…
      このオラにほんのちょっとずつだけ元気をわけてくれ…！！！
    </Dialog>
  </>
)
Copied!

その他のボタンを追加する

cancelやsuccess以外のボタンを追加する場合は、otherとonOtherを設定します。

編集可能な例

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

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

    <Dialog
      isOpen={isOpen}
      onClose={onClose}
      header="孫悟空"
      cancel="わけない"
      onCancel={onClose}
      other="どちらでもよい"
      onOther={onClose}
      success="わける"
      onSuccess={onClose}
    >
      だ…大地よ海よ　そして生きているすべての　みんな…
      このオラにほんのちょっとずつだけ元気をわけてくれ…！！！
    </Dialog>
  </>
)
Copied!

フッターのボタンをカスタマイズする

cancelやsuccessは、Buttonのpropsを設定することができます。

編集可能な例

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

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

    <Dialog
      isOpen={isOpen}
      onClose={onClose}
      header="孫悟空"
      cancel={{
        variant: "outline",
        colorScheme: "red",
        children: "わけない",
      }}
      onCancel={onClose}
      other={{
        variant: "outline",
        colorScheme: "orange",
        children: "どちらでもよい",
      }}
      onOther={onClose}
      success={{
        variant: "outline",
        colorScheme: "blue",
        children: "わける",
      }}
      onSuccess={onClose}
    >
      だ…大地よ海よ　そして生きているすべての　みんな…
      このオラにほんのちょっとずつだけ元気をわけてくれ…！！！
    </Dialog>
  </>
)
Copied!

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

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

編集可能な例

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

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

    <Dialog
      isOpen={isOpen}
      onClose={onClose}
      header="孫悟空"
      cancel="わけない"
      onCancel={onClose}
      success="わける"
      onSuccess={onClose}
    >
      <DialogCloseButton color="red.500" />

      <Text>
        だ…大地よ海よ　そして生きているすべての　みんな…
        このオラにほんのちょっとずつだけ元気をわけてくれ…！！！
      </Text>
    </Dialog>
  </>
)
Copied!

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

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

編集可能な例

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

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

    <Dialog
      isOpen={isOpen}
      header="孫悟空"
      cancel="わけない"
      onCancel={onClose}
      success="わける"
      onSuccess={onClose}
    >
      だ…大地よ海よ　そして生きているすべての　みんな…
      このオラにほんのちょっとずつだけ元気をわけてくれ…！！！
    </Dialog>
  </>
)
Copied!

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

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

編集可能な例

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

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

    <Dialog
      isOpen={isOpen}
      onClose={onClose}
      header="孫悟空"
      cancel="わけない"
      onCancel={onClose}
      success="わける"
      onSuccess={onClose}
    >
      <DialogOverlay bg="blackAlpha.300" backdropFilter="blur(10px)" />

      <Text>
        だ…大地よ海よ　そして生きているすべての　みんな…
        このオラにほんのちょっとずつだけ元気をわけてくれ…！！！
      </Text>
    </Dialog>
  </>
)
Copied!

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

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

編集可能な例

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

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

    <Dialog
      isOpen={isOpen}
      onClose={onClose}
      withOverlay={false}
      header="孫悟空"
      cancel="わけない"
      onCancel={onClose}
      success="わける"
      onSuccess={onClose}
    >
      だ…大地よ海よ　そして生きているすべての　みんな…
      このオラにほんのちょっとずつだけ元気をわけてくれ…！！！
    </Dialog>
  </>
)
Copied!

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

前Modal次Drawer