Can someone tell me: 1. When I configure components in Plasmic, what should I use META PROPS for? what is the difference between slot and meta props? 2. How to use the children property? should I put children on a shared component container? can you explain the logic when I see that there are children on a common container and sometimes I see slot children is on the internal element of the component, for example, on the text in the card?
Let me know if this helps for meta props https://docs.plasmic.app/learn/code-component-substitution/#meta-props
In general, it helps me, I have read these documents many times:
-
the main thing is I can’t figure out when I should do children and when I shouldn’t? what actually happens if there is a support for children or when the support is not for children?
-
It turns out that I can only use meta-props to replace components? or can I also set meta props and use this component in the code without replacement?
Right here I will ask the question how do I specify such meta-props in plasmic?
<ul>
{products.map((product) => {
return (
<Link href={
/products/${product.id}}>{product.title}
${product.price}
For 2, meta props are only useful for code to read from - it requires component substitution. Were you looking for something specifically / how are you hoping to use the props from code?
For 1, slots are for whenever you have a component and you want to pass in different content for certain parts of it. Like a Button might have a single slot.
(Usually the main slot is called children but it doesn’t have to be.)
I’m not sure what you mean “if there is support for children or not,” do you have an example?
- I was hoping to create components in plasma, assign meta-props to them in the same way as attributes are assigned in HTML and then use the plasma loader and not redefine the rendering of the component from the code, for example, I thought this way by setting the following values:
data-item-name={product.title}
data-item-id={product.id}
data-item-price={product.price}
data-item-url={/products/${product.id}}
data-item-description={product.title}
data-item-image={product.image}
but if meta-props are used to replace components, can I still set the above example as html attributes? would that be right? I’ve tried it and it works with plasmic-loader…
- in short, when should I use slot children and when just slot? I understand it this way if there are several slots in the component, then I put children on the main container if, as in your example with the button, there is only one slot for text, I put the text slot is that correct?
children is just a common name for slots, it doesn’t have any special meaning, usually people call their “main” slot children
For 2, yes exactly, you should be able to forward the metaprops onto elements as data attributes like that
But if all you are doing is setting data attributes, you don’t need code for that, you can do that directly from the studio
When adding attributes you can type in whatever data- attribute you want
And then you can also right click these attributes and link them as props on the outer component
Thank you very much! only I have a question if I have a component button, the examples I gave above can be installed as html attributes on the right panel, but they can also be installed in the component settings as meta-props and in both cases it seems to work, but is it right to put it?
If you want attributes to be set on elements, then you should use attributes, not meta props. Meta props will have no effect unless you consume them using code (component substitution), so they’re a more advanced/abstract concept.
