PugsJs добавляют дополнительные классы в mixin - PullRequest
Новая
       10

PugsJs добавляют дополнительные классы в mixin

0 голосов
/ 24 октября 2019

Как я могу добавить несколько дополнительных классов в миксин, у которых уже есть классы. Вот мой код, и я пытаюсь добавить третий параметр, но он не работает. 

mixin item(title, url, extraClasses)
    mixin linkA
        a.nav-link(href=url)= title
    li.nav-item.mr-auto.#{extraClasses}(class=title === activeMenu ? 'active' : '')
        +linkA

ul.navbar-nav.ml-auto
    each val in ['Menu1', 'Menu2', 'Menu3', 'Menu4']
      if val !=='Menu1'      
        +item(val, href='/' + val.toLowerCase() + '.html', 'test1')
      else
        +item(val, href='/' + val.toLowerCase() + '.html', 'test2')

Смотрите его вживую под: https://codepen.io/Bizboss/pen/zYYwoZP?editors=1011

1 Ответ

1 голос
/ 24 октября 2019

Вы можете использовать синтаксис &attributes, чтобы легко передавать дополнительные классы элементу в миксине.

Вот упрощенный пример: 

mixin item(title, url, isActive)
  li(class= isActive ? 'active' : '')&attributes(attributes)
    a(href= url) #{title}

ul
  +item('Home', '/', true).myClass
  +item('About', '/about', false)
  +item('Contact', '/contact', false).foo.bar

Это будет визуализировать: 

<ul>
  <li class="active myClass">
    <a href="/">Home</a>
  </li>
  <li>
    <a href="/about">About</a>
  </li>
  <li class="foo bar">
    <a href="/contact">Contact</a>
  </li>
</ul>
...