Single Page App Class Toggle with isMatch function

Wappler General Need Help
1

I have light and dark logos I want to show based on what path is loaded on the page like this:

<img class="logo-light" src="assets/img/logo-dark.svg" dmx-class:d-none="pricing.isMatch">
<img class="logo-light" src="assets/img/logo-whiteblack.svg" dmx-class:d-none="home.isMatch">

Problem is the interface does not allow me to add multiple instances of the class with different matching options. It deletes the first one if second one is added.

I then added it manually - also a mission with the “Smart” Wappler that deletes duplicates(maybe another option that users can disable at own risk in advanced section)

That also does not work.

Any other options besides probably using show/hide functions?

Is the class toggle broken because of how it functions now as per above or is it intentionally designed for the Visual Building User’s sake?

2

What are you trying to add exactly and what are your conditions?

3

Dynamic Attributes - > Styling ->Class Toggle -> Enter d-none | Condition -> select home.isMatch

Repeat with d-none and another route does not work

I guess using show/hide functions are best alternative?

4

Works when just using 1 instance

5

Marcel, i don’t understand your idea/what is not working.
Do you want to add the same class, with different conditions multiple times?

Please explain what are you trying to achieve, not what the UI deletes.

6

yes, I have different backgrounds, light and dark, and each has a logo to fit it. These are on multiple routes on a Single Page site, however the header and body is from the main app. So I just want to change classes based on the route to accommodate the color changes of background

Gimme a moment and I will upload to test domain - will just have to setup one for routing to work.

7

Marcel i understand that.

That's what my question is about.
Are you trying to add the same class multiple times in one tag?

Like:

<img class="logo-light" src="assets/img/logo-whiteblack.svg" dmx-class:d-none="home.isMatch" dmx-class:d-none="abc.isMatch" dmx-class:d-none="xyz.isMatch">
8

yes

9

But that is not possible :slight_smile:
That’s why there are conditions and you can add as many conditions as you wish there:

dmx-class:d-none="condition1 || condition2 || condtion3 .... || condition999"

Use the standard javascript operators:
Screenshot_4

2 Likes
10

O yes!!! Haven’t used this in ages and sometimes one forgets. Ok, thanks!

1 Like