Changing Css for navigation bar based on my current Page

0
i am trying to make a navigation bar for an application that I am working on, and am having trouble with getting my styling to do what I want. It looks like this:  So I have the coloring set, and I want as they progress through the pages for the blue to follow along, how can I do this? I was thinking about using conditional visibility, but I do not know how to bind that to a page name. I also have this in the layout that i am using for the pages, which I want to be universal for all of the stages.
asked
3 answers
1

we fix this with awesome sass.

so your steps can be put in a snippet.

each snippet has a container (.ap_wizard-wrap) per page with an active class (.active1), that determaines which item should be active.

this way, you only need to maintain a single snippet. You can get quite crazy with this setup.

here is a basic example:

$amountOfLinks: 20;
@for $i from 1 through $amountOfLinks {
  .ap_wizard-wrap.active#{$i} > div:nth-child(#{$i}){
    background-color: red;
  }
}

 

If this is a bit confusing, you can always check out: https://www.sassmeister.com/
sometimes gives a bit more insight into how the sass is compiling.

answered
0

What ended up working was having a few different enum classes that retrieved the enum for the object that was passed into the page or the entity linked to it. This allowed me to more or less determine where I was, and return an enum based on that to style. (I had one enum class for each shade of blue I wanted, and had gray as the default)

answered
-1

Michael,

You can use the building blocks that are included with every Mendix app to accomplish this.  You’ll find these building blocks in the Atlas UI Resources module under the App Store modules section in the Project Explorer.  The building blocks that match your styling are the Progress Wizard building blocks.  For each page in your progression, you’ll use the appropriate building block (visited, active, step, etc.).

For some examples of how to create a wizard, you can view these videos:  https://www.youtube.com/watch?v=6GcCd5Q9irU  https://www.youtube.com/watch?v=I2puNfCP14k  and https://www.youtube.com/watch?v=_M9xP3guEho

Here is a screenshot of where to find these building blocks:

Hope that helps,

Mike

answered