Set component's empty state

Question

Hi @artf , How would you recommend giving a component an empty state? Say, for instance, I have a layout component (ie. a column) which should contain child elements (ie. text component or image). When that layout component is empty I'd like to display some help text inside such as "Add an element here" and when it has children it shouldn't be displayed. Of course, this should only exist in the view and not render in the output HTML. Here is an example of what I am looking to create: If there i...

Joshmamroud · Accepted Answer

@artf You are THE MAN! I didn't even know the :empty selector existed. So simple, so awesome! Mind blown. Thank you!

artf · Answer

I've done something similar in this way using only CSS

hellocaio · Answer

Hi Josh, I like your idea. No expert here, but here are couple thoughts: Basically I would add some kind of flag to the component itself. idea 1) If the component is some kind of container (i.e. div), add a

Drag an element here

to it, then when a new component is added, you could use the editor event component:addand check for any siblings with the empty-message class and remove it. idea 2) Add a empty-message class to the component itself, then use CSS :before/:aft...

Set component's empty state

Question

Answers (3)

Related Questions and Answers

How can I update the nodeValue (text value) of components by inputs forms

Custom component - how to set editable to true

Child elements not draggable ,droppable highlightable. also the CSS of all child elements not pushed in style section while develop a banner component in as plugin

How to sync the order of sub children across all child elements ?

Paid Plugins That Match This Issue

Related tutorials

Find the Right GrapesJS Plugin in Seconds: Smarter Discovery Is Live

Browse Plugin Categories