Can I show a div only if the slot inside is not empty ?

Aburio · 2024-07-18T14:09:52.478+00:00

I have a card component with 3 div and each div contain a slot. I want to show each div only if the slot is not empty. Is this possible ?

Aburio
1 year ago
I have a card component with 3 div and each div contain a slot. I want to show each div only if the slot is not empty. Is this possible ?
Jacob Kofoed
1 year ago
I think you can use the :empty selector on the div together with display:none. Only works if the div has no other children.
Aburio
1 year ago
It works thanks you !

Is there any change we can do the same kind of behaviour with a show formula ?
Jacob Kofoed
1 year ago
I cannot think of any way without using a custom code formula. It is not too pretty, but you can probably fix it in your case by adding three attributes to the component with the condition to show/hide the divs.
Aburio
1 year ago
Yes, my first solution was to add attributes, but I finally chose to add three slots inside my card component and export each section as a sub-component. So, I have a card, a card-header, and a card-footer, and the default slot of the card is the card-content.