-
Notifications
You must be signed in to change notification settings - Fork 0
Mount Points
NOTICE: I'm thinking of removing mount points, take a look at this issue for more information and to join the conversation: https://github.com/nombrekeff/cardboard-js/issues/37
Mount points let you control where new elements are added by setting a "current parent" with mountPoint(tag). Any tags you mount afterward become children of this parent.
You should use mount points with care—they require you to keep track of the current hierarchy in your head, which can get tricky in complex layouts. Use them when you need dynamic or deeply nested structures, but prefer explicit parent-child relationships when possible for clarity.
If you want to manually set the mount point, use the mountPoint() function:
mountPoint(myTag);
mountPointreturns the tag you pass in.
Once you have a mount point, you can start adding elements to it.
Tags have a .mount() method, which adds them as children to the current mount point:
div.mount();This
divwill be a child of the current mount point (e.g.,<body>or your custom root).
Alternatively, you can use the getMountPoint() function, which returns the mounted tag:
getMountedPoint().append(div());You can change the mount point multiple times and then restore previous mount points as needed:
init();
const wrapper = div.mount();
mountPoint(wrapper);
const childDiv = div.mount("I'm inside wrapper");
mountPoint(childDiv);
p.mount("I'm inside child div!");
restoreMountPoint();
p.mount("I'm now inside wrapper!");-
mountPoint(tag)sets a new mount point. -
restoreMountPoint()restores the previous mount point. -
clearMountPoints()clears all the mount point. -
resetMountPoints()pops to the first mount point.
➡️ Next: State.
➡️ Next: Reusable Components.
➡️ Next: Conditionals.
This Wiki is a work in progress, and your help is greatly appreciated!
If you have some free time and are interested in contributing to the wiki or the project in general, please don't hesitate to reach out. All contributions are welcome!