mirror of
https://github.com/Dvorinka/Devour.git
synced 2026-06-03 20:13:03 +00:00
Tomas Dvorak
17 lines
3.4 KiB
JSON
17 lines
3.4 KiB
JSON
{
|
|
"id": "93c544efe6e99a69bafbf7f5",
|
|
"source": "solid:signals",
|
|
"type": "github-document",
|
|
"title": "portal",
|
|
"content": "---\ntitle: Portal\norder: 3\nuse_cases: \u003e-\n modals, popups, tooltips, dropdowns, z-index issues, overflow clipping,\n rendering outside parent container\ntags:\n - portal\n - modal\n - popup\n - dom\n - z-index\n - overflow\nversion: '1.0'\ndescription: \u003e-\n Learn how Portal renders elements outside the normal DOM flow to solve z-index\n and overflow issues for modals and popups.\n---\n\nWhen an element requires rendering outside of the usual document flow, challenges related to stacking contents and z-index can interfere with the desired intention or look of an application.\n`\u003cPortal\u003e` helps with this by putting elements in a different place in the document, bringing an element into the document flow so they can render as expected.\n\n```jsx\nimport { Portal } from \"solid-js/web\"\n\n\u003cPortal\u003e\n\t\u003cdiv class=\"popup\"\u003e...\u003c/div\u003e\n\u003c/Portal\u003e\n```\n\nThe content nested within `\u003cPortal\u003e` is rendered and positioned by default at the end of the document body.\n\n\u003cEraserLink\n\thref=\"https://app.eraser.io/workspace/maDvFw5OryuPJOwSLyK9?elements=IEPk0uiH2OC365hkpKf3wA\"\n\tpreview=\"https://app.eraser.io/workspace/maDvFw5OryuPJOwSLyK9/preview?elements=IEPk0uiH2OC365hkpKf3wA\u0026type=embed\"\n/\u003e\n\nThis can be changed by passing a `mount` prop to `\u003cPortal\u003e`.\nThe `mount` prop accepts a [DOM node](https://developer.mozilla.org/en-US/docs/Web/API/Node), which will be used as the mount point for the portal content.\n\n```jsx\nimport { Portal } from \"solid-js/web\"\n\n\u003cPortal mount={document.querySelector(\"main\")}\u003e\n\t\u003cdiv class=\"popup\"\u003e...\u003c/div\u003e\n\u003c/Portal\u003e\n```\n\nUsing `\u003cPortal\u003e` can be particularly useful in cases where elements, like information popups, might be clipped or obscured due to the overflow settings of their parent elements.\nBy putting the element outside of the parent element, it is no longer bound by the overflow settings of its parent.\nThis creates a more accessible experience for users, as the content is no longer obscured.\n\n:::note\n `\u003cPortal\u003e` will render wrapped unless specifically targeting `document.head`.\n\n This is so events propagate through the Portal according to the component hierarchy instead of the elements hierarchy.\n\nBy default, children will wrap in a `\u003cdiv\u003e`. If you portal into an SVG, then the `isSVG` prop must be used to avoid wrapping the children in a `\u003cdiv\u003e` and wrap in a `\u003cg\u003e` instead.\n\n```jsx\nimport { Portal } from \"solid-js/web\"\n\nfunction Rect() {\n return (\n \u003cPortal mount={document.querySelector(\"svg\")} isSVG={true}\u003e\n \u003crect fill=\"red\" x=\"25\" y=\"25\" height=\"50\" width=\"50\" /\u003e\n \u003c/Portal\u003e\n );\n}\n\nfunction SVG() {\n return \u003csvg xmlns=\"http://www.w3.org/2000/svg\" /\u003e;\n}\n```\n:::",
|
|
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/concepts/control-flow/portal.mdx",
|
|
"metadata": {
|
|
"path": "src/routes/concepts/control-flow/portal.mdx",
|
|
"repo": "solidjs/solid-docs",
|
|
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
|
"size": 2610,
|
|
"source_type": "github"
|
|
},
|
|
"hash": "00959fe620adffd63e69634e1002e7aa653c9f5e0e1e54eacf2a084804f89a4a",
|
|
"timestamp": "2026-02-23T11:43:00.18664624+01:00"
|
|
} |