All topics

Conditional styling

Yann

1 month ago

Hey there 👋
Coming from weweb, i'm exploring toddle.
I feel dumb asking this question but i have a navbar with differents texts that i want to style according to the page i am.
I have created a class in the atributes panel and choose it as style in the styling panel.
I have no clue how to create the formula that return true when pageId == current pageId
Thanks!
✅1
Lucas G

1 month ago

If it’s not a param you can use the you’d have to parse url
Then if path equals x then apply class
Yann

1 month ago

I tried with current url that i parsed but i can't achieve the formula to make it works ...
Yann

1 month ago

This is how i setup the page
Tod

1 month ago

Great energy @Yann! Your continuous contribution to the toddle Community just made you advance to Community Level 1!
Lucas G

1 month ago

Yeah that’s the start of the formula
Just have to actually get the path and compare it
You can see the output preview to get an idea
Max

1 month ago

If you check "Param", this part of the path becomes dynamic and you can see it in the formula editor
Im my case, I have "page" available
Lucas G

1 month ago

This gets tricky sometimes if you only have one path
Lucas G

1 month ago

Need to make sure you manage default values well
ParseURL isn't too bad to use if all you need is to set one condition
Yann

1 month ago

quick video to show you my distress 😅
https://komododecks.com/recordings/MCFNxSIWMdGBis2J3DEh
Max

1 month ago

This is how you can compare it. But be aware that the current url formula shows the url of the editor. Personally, I prefer the params
Max

1 month ago

This is what it looks like with a param
I have the "default to" in there to have a fallback, but you might not need that
@Max
This is how you can compare it. But be aware that the current url formula shows the url of the editor. Personally, I prefer the params
Yann

1 month ago

Ok it works but i must confess it's not very intuitive to understand how to connect the nodes together...
Also without using params you need to set the path according what you see in the editor but i'm suppose it has noting to see once publish.
Lucas G

1 month ago

That’s why you have to manage default values
Ideally you don’t just have one path
Otherwise that can cause issues if you’re using it for more complex conditions
In Max’s example, he has a base ‘app’ path
Path params are very powerful though and great for things like SPAs
In this case, you’re fine to use either one
Yann

1 month ago

Feels strange to me to have the "default to" with 2 values and the equals with obviously also 2 values.
I guess i maybe need to dive deeper in the formula editor to get used with how to connect the dots
Yann

1 month ago

It changes a lot with how i'm used to do it in weweb, it seems i'll need to change my habits
Lucas G

1 month ago

Default to node can have multiple default formulas as you can see with the “+”
If anything evaluates to false then the next value is used
All the nodes are just basic JS
Lucas G

1 month ago

toddle leans on standard web technologies, anything you do here is useful anywhere
@Yann
Feels strange to me to have the "default to" with 2 values and the equals with obviously also 2 values.
I guess i maybe need to dive deeper in the formula editor to get used with how to connect the dots
Lucas G

1 month ago

For this, just make sure to update the “default” to an actual value
@Lucas G
toddle leans on standard web technologies, anything you do here is useful anywhere
Yann

1 month ago

That's why i wanted to explore toddle 😉
As i said the most difficult part will be to change my habits
In any case, thanks to you both @Lucas G and @Max for your help!
🙌1
💪1
Lucas G

1 month ago

You’re welcome
Yann

1 month ago

[RESOLVED]Conditional styling

Conditional styling

Yann

Lucas G

Yann

Yann

Tod

Lucas G

Max

Lucas G

Lucas G

Yann

Max

Max

Yann

Lucas G

Yann

Yann

Lucas G

Lucas G

Lucas G

Yann

Lucas G

Yann