JS 条件模型 CSS

Question

我正在尝试创建一个包含 'li' 元素的数组，其中包含用于应用级导航的图标。我有一个 css class "is-active" 突出显示列表中的活动 'li' 元素，指示导航模式中的活动位置。我希望 Maquette JS 在最终用户选择时将适当的图标呈现为 'highlighted'。我正在尝试这样使用 classes:{} 属性:

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

显然这是一种不当使用。本教程提供了一个示例，其中布尔值确定 class 是否在 classList 中；但是，我实际上需要使用 classList A if true 或 classList B if false.

很难找到 maquettejs 条件的好例子 css。有什么想法吗？

Answer 1

条件CSS类工作如下：

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

JS 条件模型 CSS

Maquette JS Conditional CSS

maquette