Maquette JS Conditional CSS

Question

I am trying to create an array of 'li' elements that hold icons for app level navigation. I have a css class "is-active" that highlights the active 'li' element in the list indicating the active location in the nav schema. I expect Maquette JS to render the appropriate icon as 'highlighted' when it is selected by the end user. I am trying to use the classes:{} property as such:

"classes": this._activeNavElementId === navItem.id ? "nav-menu-item nav-menu-item-is-active" : "nav-menu-item", ...

Clearly this is an improper use. The tutorial provides an example where the boolean determines if a class is in the classList; however, I actually need to use classList A if true or classList B if false.

Having a hard time finding good examples of maquettejs conditional css. Any thoughts?

Answer 1

Conditional CSS classes work as follows:

h("li.nav-menu-item", {
  "classes": {
    "nav-menu-item-is-active": this._activeNavElementId === navItem.id
  }
}