When creating a composed component, you might want to allow that component to accept a component(s) as a child to be inserted into the component at a specified slot in the composition tree.
For example, let's look at the
Card component. Its composition includes several nested boxes, an image, and some typography. Now we want a user to be able to add either an image, SVG, or an icon in the place where the image is located, but we want it to be accessible out of the composition but render in the same place.
If we select the components
Component Configuration menu, we will have a modal with an option to add
After selecting the
+ icon I named the slot
I can now move my media slot to where I want it to render in my tree, in this case, where the image component is located. The image has also been removed, as we will add it to our new media slot outside the composition.
x on the
Card component to close the composition. Now we see the media slot in the tree as a child to the
Image or your media of choice, and it will now render in your components composition where you placed the
Slots are created on the component configuration.
They are not associated directly with a property in the UI.
They support passing vars down.
Updated about 2 months ago