Conditional styling

  • yann_prigent-1359157567720263792

    Yann

    20 days 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
  • lucasg-1359158361328848988

    Lucas G

    20 days 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_prigent-1359160700664287403

    Yann

    20 days ago

    I tried with current url that i parsed but i can't achieve the formula to make it works ...
    1359160700353646702-conditional-styling.png
  • yann_prigent-1359161139195285616

    Yann

    20 days ago

    This is how i setup the page
    1359161139052937487-homepage-setup.png
  • Tod-1359161140885585981

    Tod

    20 days ago

    Great energy @Yann! Your continuous contribution to the toddle Community just made you advance to Community Level 1!
  • lucasg-1359166368011780137

    Lucas G

    20 days 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.kayr-1359167190217134150

    Max

    20 days ago

    If you check "Param", this part of the path becomes dynamic and you can see it in the formula editor
    1359167189994967081-image.png
  • Im my case, I have "page" available
    1359167356571488326-image.png
  • lucasg-1359168994505916619

    Lucas G

    20 days ago

    This gets tricky sometimes if you only have one path
  • lucasg-1359170141564436530

    Lucas G

    20 days 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_prigent-1359172321507672134

    Yann

    20 days ago

    quick video to show you my distress ๐Ÿ˜…
    https://komododecks.com/recordings/MCFNxSIWMdGBis2J3DEh
  • max.kayr-1359173937157767269

    Max

    20 days 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
    1359173936918823052-image.png
  • max.kayr-1359174327966240922

    Max

    20 days ago

    This is what it looks like with a param
    1359174327723102250-image.png
  • I have the "default to" in there to have a fallback, but you might not need that
  • yann_prigent-1359177789927985244

    Yann

    20 days 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.
  • lucasg-1359178590440263891

    Lucas G

    20 days 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_prigent-1359179275412181262

    Yann

    20 days 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
    1359179275215044851-paramFormula.png
  • yann_prigent-1359179720788414597

    Yann

    20 days ago

    It changes a lot with how i'm used to do it in weweb, it seems i'll need to change my habits
  • lucasg-1359179765831041404

    Lucas G

    20 days 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
  • lucasg-1359180218136264775

    Lucas G

    20 days ago

    toddle leans on standard web technologies, anything you do here is useful anywhere
  • lucasg-1359180777727725762

    Lucas G

    20 days ago

    For this, just make sure to update the โ€œdefaultโ€ to an actual value
  • yann_prigent-1359180992643858533

    Yann

    20 days 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
  • lucasg-1359181162722889958

    Lucas G

    20 days ago

    Youโ€™re welcome
  • yann_prigent-1364111695907393627

    Yann

    6 days ago

    [RESOLVED]Conditional styling