Dialog
Dialogは、ユーザーに実行の確認または中断に使用されるコンポーネントです。
インポート
import {Dialog,DialogOverlay,DialogCloseButton,DialogHeader,DialogBody,DialogFooter,} from "@yamada-ui/react"
Dialog: ダイアログの状態を制御するラッパーコンポーネントです。DialogOverlay: ダイアログの背後に存在するオーバーレイのコンポーネントです。DialogCloseButton: ダイアログを閉じるボタンのコンポーネントです。DialogHeader: ダイアログのヘッダーを表示するコンポーネントです。DialogBody: ダイアログのメインコンテンツを表示するコンポーネントです。DialogFooter: ダイアログのフッターを表示するコンポーネントです。
DialogOverlay, DialogCloseButton, DialogHeader, DialogBodyとDialogFooterは、省略することができます。
使い方
表示または非表示を制御するために、isOpenとonCloseを設定します。
Dialogは、内部的にModalを使用しており、Modalを簡素化したコンポーネントです。
編集可能な例
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> </> )
または、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> </> )
サイズを変更する
編集可能な例
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} Dialog </Button> ))} </Wrap> <Dialog isOpen={isOpen} onClose={onClose} size={size} header="孫悟空" cancel="わけない" onCancel={onClose} success="わける" onSuccess={onClose} > だ…大地よ海よ そして生きているすべての みんな… このオラにほんのちょっとずつだけ元気をわけてくれ…！！！ </Dialog> </> )
位置を変更する
表示位置を変更するには、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} Dialog </Button> ))} </Wrap> <Dialog isOpen={isOpen} onClose={onClose} placement={placement} header="孫悟空" cancel="わけない" onCancel={onClose} success="わける" onSuccess={onClose} > だ…大地よ海よ そして生きているすべての みんな… このオラにほんのちょっとずつだけ元気をわけてくれ…！！！ </Dialog> </> )
所要時間を変更する
所要時間を変更する場合は、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> </> )
オーバーフローの動作を変更する
デフォルトでは、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> </> )
ダイアログを開いたときにスクロールをブロックしない
デフォルトでは、ダイアログを開いた際に主要なコンテンツのスクロールをブロックしています。これは、アクセシビリティを確保するためです。もし、主要なコンテンツのスクロールをブロックしたくない場合は、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> </> )
その他のボタンを追加する
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> </> )
フッターのボタンをカスタマイズする
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> </> )
閉じるボタンをカスタマイズする
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> </> )
閉じるボタンを無効にする
onCloseを設定しない場合は、閉じるボタンを無効(非表示)になります。
デフォルトでは、オーバーレイをクリック時にダイアログを閉じます。onCloseが設定されないことでオーバーレイのクリックして閉じる動作も無効になることに注意してください。
編集可能な例
const { isOpen, onOpen, onClose } = useDisclosure() return ( <> <Button onClick={onOpen}>Open Dialog</Button> <Dialog isOpen={isOpen} header="孫悟空" cancel="わけない" onCancel={onClose} success="わける" onSuccess={onClose} > だ…大地よ海よ そして生きているすべての みんな… このオラにほんのちょっとずつだけ元気をわけてくれ…！！！ </Dialog> </> )
オーバーレイをカスタマイズする
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> </> )
オーバーレイを無効にする
ダイアログのオーバーレイを無効(非表示)にする場合は、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> </> )
GitHubでこのページを編集する