1

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?

olearydw
  • 13
  • 2
  • I am using the following code to try and create the conditional hyperscript where the variable `classValue` is a boolean. `return h("li.nav-menu-item", { "key": navItem.id, classes: {classValue: "nav-menu-item-is-active"} }) ...` – olearydw May 26 '17 at 23:47

1 Answers1

1

Conditional CSS classes work as follows:

h("li.nav-menu-item", {
  "classes": {
    "nav-menu-item-is-active": this._activeNavElementId === navItem.id
  }
}
Johan Gorter
  • 1,253
  • 10
  • 13