How does the button component of the start kit work?

Ask us anything
1

I was analysing the button component of the starter kit. Something I don’t understand is how the type swithc works. For example: When I choose a type the background is changing. Primary is Blue, Danger is red.

image
image238×217 3.84 KB

But when I check how this component is set up, I don’t see the background of the button is bound to something.

image
image247×201 4.19 KB

I noticed the default class is “button” and there are sub classes for typ-primary and type-danger, and that there are formula’s to switch background.

image
image233×522 11.7 KB

I also noticed that there are formulas defined to switch colors. But I don’t see how these are used?

image
image241×515 6.81 KB

So you does this work? Are subclasses dynamically set or something?

2

Besides the question about the button component of the starterkit, I would like to know how to best setup a button component that should have the following functionality

  • Upon hover, the alpha value of the current button color should be 80 of 100
  • Being able to set a type: Success or Danger
    • If success, background should be green (upon hover: alpha of this green background should be 80)
    • If danger, should be green (upon hover: alpha of this green background should be 80)

I have defined several classes

  • btn: default state = black button, white text >
    • hover (subclass)=applicable when state: hover is active. In this class backround alpha is set to 80
  • btn-success: Background of button is Green (alpha 100)
  • btn-warning: Background of button is Red (alpha 100)

I was thinking to also add subclass hover to btn-success and btn-warning.

But how can I change class based on the (succes/danger) Type I select?

  • When type = success add class btn-success (remove class btn-danger)
  • When type = danger add class btn-danger (remove class btn-success)

Or should I drop the use of classes, and only use states (state:danger, state: success), but how can I combine that with state hover preserving the background color associated to success and danger state.

I also have a formula that switches background color based on the type (succes/danger) chosen in the component design options. I am able to bind that formula to the background color property, but (again) how can I combine that with state hover preserving the background color associated to success and danger state.

3

Hi, the component was created to be as reusable as possible, that’s why it has so many settings.

I think it will be easier for you to understand it better if you simply take a look at component properties: Advanced properties | WeWeb Documentation and components in general and then experimenting with it.

4

Thanks. I understand the vision behind it. I checked again and I see the component is using states, to change color. My confusion behind is that I want to als have a specific hover effect.

Question: Is it possible to make the hover state context aware or make it act like a sub state? For example:

Based on type: success, the button uses the btn-success state giving it a green color. On hover state I want use a light green color because I already uses btn-success state

Based on type: danger, the button uses the btn-danger state giving it a red color. On hover state I want use a lighter red color because I already uses btn-danger state.