Portal
Portalは、現在のDOM階層の外側に要素をレンダリングするコンポーネントです。
インポート
import { Portal } from "@yamada-ui/react"
使い方
Portalは、要素を別のDOM階層へ転送します。デフォルトでは、document.bodyの終わりに転送します。これは、親要素のスタイルや非表示の影響を防ぐのに便利です。
編集可能な例
<Box bg="primary" color="white"> This is Box <Portal>This text is portaled at the end of document.body</Portal> </Box>
転送先を変更する
転送先を変更する場合は、containerRefに転送先のrefを設定します。デフォルトでは、document.bodyの終わりに転送します。
編集可能な例
const containerRef = useRef<HTMLDivElement>(null) return ( <Box bg="primary" color="white"> This is Box <Portal containerRef={containerRef}> This text is portaled at the Container </Portal> <Box ref={containerRef} bg="secondary" color="white"> This is Container </Box> </Box> )
ネストされたポータル
ネストしたPortalコンポーネントは、親のPortalコンポーネントを追従します。
編集可能な例
const containerRef = useRef<HTMLDivElement>(null) return ( <> <Portal containerRef={containerRef}> <Box bg="primary" color="white"> This text is portaled at the Container <Portal>This text is attached to parent portal</Portal> </Box> </Portal> <Box ref={containerRef} bg="secondary" color="white"> This is Container </Box> </> )
ネストしたポータルの転送先を変更する
ネストしたPortalコンポーネントは、親のPortalコンポーネントを追従します。もし、親要素のPortalコンポーネントの追従を無効にしたい場合は、appendToParentPortalをfalseに設定します。
編集可能な例
const containerRef = useRef<HTMLDivElement>(null) return ( <> <Portal containerRef={containerRef}> <Box bg="primary" color="white"> This text is portaled at the Container <Portal appendToParentPortal={false}> This text is portaled at the end of document.body </Portal> </Box> </Portal> <Box ref={containerRef} bg="secondary" color="white"> This is Container </Box> </> )
GitHubでこのページを編集する