1

I need to change the admin tab template by adding my wrapper and class to it.

This is the default code:

<li{{ attributes.addClass(is_active ? 'is-active') }}>{{ link }}</li>

My code:

<div {{ .attributes.addClass(is_active ? 'DefTabs__tabItem--active') }}>{{ link }}</div>

Currently, the "DefTabs__tabItem--active" class is added to the active link, but I need to add an additional CSS class "DefTabs__tabItem" to each DIV element. How can I do this?

1

Create an array, ex:

{%
    set classes = [   
      is_active ? 'is-active',
      'my-second-class-name',
    ]
%}

<div {{ attributes.addClass(classes) }}>{{ link }}</div>

Currently, the "DefTabs__tabItem--active" class is added to the active link, but I need to add an additional CSS class "DefTabs__tabItem" to each DIV element.

By the way, no need to repeat yourself with the naming, do this:

{%
    set classes = [   
      'DefTabs__tabItem',
      is_active ? 'active',
    ]
%}

<div {{ attributes.addClass(classes) }}>{{ link }}</div>

Then in CSS you can target the active with .DefTabs__tabItem.active { ... }

3
  • Your method works. Could you also suggest how to use the {{ link}} element and display the title and URL separately in the right places? Aug 23 '20 at 11:48
  • I tried this option, it doesn't output anything Aug 23 '20 at 17:59
  • 1
    @ВладимирПомелов sorry was guessing, its {{ link['#title'] }} and {{ link['#url'] }} an upvote to the questions answer would be appriciated 😉
    – No Sssweat
    Aug 24 '20 at 12:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.