How to apply state to children - documentation doesn't provide enough detail

Ask us anything How do I?
1

The documentation on this could use a little more detail.

Here’s the documentation:

CleanShot 2024-10-20 at 14.16.17@2x
CleanShot 2024-10-20 at 14.16.17@2x1566×1132 123 KB

What’s missing from here is:

  • What is the significance of the {{Parent}} label and where is it set?
  • Do you first define the “Button” state on the parent?
  • In the screenshot, to which element is this state being applied?

For example, I have a component called Card with the following structure.

  • Component
    • Container
      • Text

On the container, I want to create a state called “Medium,” which is the Medium version of the card.

I want to use this state on the child Text element so it adjusts the size of the text.

How would I do that?

3

Sorry I deleted my original reply, this is my first engagement in this forum and I asked ChatGPT to rephrase my message, and it sounds too roboty :smiley: English is not my native language.

below is my 2 cents :smiley:

First, I just want to make sure that you’re not mixing “State” and “Component.”
If you want to be able to choose different variants for an element, you need to convert that element into a component. For your example, you make the text a component, then you create an option property with labels and values: “Small” and “Medium.”
For the “Small” variant, you set the font size to 14, and in the “Medium” variant, the font size to 16. To do that you bind the font size and use IF formula.
You can apply this to your Card.
Then you’ll be able to choose small or medium on the component.

“State” refers to a condition that triggers a change in the element, like when it’s hovered over, active, or when a user is authenticated.

Nevertheless, if you actually want to use State:
You first define the state on the parent. For example, if the button is the parent, you set the state on the button, and the icon inside the button would be the child. If you set the state on a parent element like a div that wraps the button, then the button becomes the child. To apply the state to the child, you follow this format: {{Parent}}:{{State name}} (e.g., Button Wrapper: New State).

1 Like
4

I think you’re mixing things as Lukas said. To answer your questions:

It’s just to identify the State, how it works is WeWeb gives you the following:
[Parent component that has the current child] : [State name]

You first define the Please Click Me! state on the parent and turn on Apply to children

To the Button mainly because it’s it’s state and to Icon - which is the child of Button because it’s being propagated via the Apply to children.

1 Like
5

Thanks @rivan_lukas and @Broberto!

That helped. I can only mark one of your answers as the solution, but both were helpful!