Documentation on advanced component properties?

I’m particularly interested in learning how to use the States and Classes options for a component property.

Having documentation on all the properties would be a great resource to have for the entire community, especially those who are just coming into WeWeb, like me :slight_smile:

1 Like

That just means that when you use a state or a class, you can bind a value and it will change upon the class/state. Otherways with only Bindable, you can only bind the data. Same goes for responsive,

Hi @Broberto,

I’m coming back to this as I am trying to set a class dynamically via a component property.

It’s still unclear how to use the advanced properties for classes. I was thinking that by turning it on, then I’d be able to select a Class that has already been defined for the property of a Component instance.

Here’s how I set it up for the Component property.

Here’s what it looks like on the Component instance.

As you can see, it’s just plain text.

When I click the bind button, none of the defined CSS classes can be found.

Are you open to showing me an example?

Hey, it means that when you Select or create a class it lets you apply a value to your Class property of your component.

Thanks for getting back to me.

That’s what I thought, but I can’t seem to make it work.

I’m not able to use the Property value as the Class.

On top of that, I can only set the Property value with plain text. It’s not a “bind” value, as there is not list of Classes to select from.

I think you’re looking in a wrong spot? Just tested it and it works with WeWeb’s class system


Thanks again, @Broberto!

I noticed you’re using a Select type. Do I have to provide the names of the classes as options manually?

Also, how do you apply the class in the component?

Hi @kanepaamauloa and @Broberto. We will be releasing new documentation on components soon, this will be covered, as well as dropzones and use cases for the thisInstance object. If you have any more suggestions for the upcoming docs, feel free to share!

1 Like

Thanks!

Any idea when it will be released?

In general, I think it’s helpful to show an example of how to use each feature.

Especially because the IDE has so many different interfaces, and sometimes many interfaces need to be used to complete one use case, like the one I’m trying to do here, explaining the process procedurally (e.g., step-by-step) would go a long way.

I still haven’t figured out how to use the Classes property, even with @Broberto’s help, so I’ve left it for now until I have more time to try to work things out.

I haven’t heard from @danlopes

Would you be open to recording a video of how you use this property?

Hello @kanepaamauloa

The Classes property allows us to save component properties to classes. The main point is to allow us to quickly create classes from component properties and you can save anything to them, not just CSS properties.

For instance, imagine you have a button component with two style properties: color and width with Classes enabled:

We can define where we want the property to be used inside the component in Edit mode just like we would with any other property:

t

If I exit Edit mode and try to create a class at instance level, I will have the option to save the properties to the class:

I can now add a new Button instance and select the class:

The cool thing about this is that it allows you to save anything to classes, not just CSS properties. For instance, I will wrap my button component inside a flexbox component and add an image element. Then I will add an image property called ‘‘bottom image’’ to the flexbox component with Classes enabled:

I will then define where in the flexbox I want the image property to be used, in this case, as a URL in the image element:

Now, if I exit Edit mode, I can pass an image url to the Flexbox component:

And now I can create a new class that contains the image:

If I add another instance of the flexbox component, it will not have an image by default. I will have to upload it:

Instead of having to upload the image again or manually pass the properties, I can simply select the class I created with the image:

This is a super simple example just to illustrate how it works - passing an image like that is probably not the best use case, but the feature is just a way to allow you to create complex classes by saving anything you want (not just styles/CSS!) to them and reusing them from anywhere.

Is it clear?

1 Like