Przejdź do treści

Drupal 8 - menu local tasks w formie zakładek Bootstrap 4

Stylowanie nawigacyjnych zakładek z wykorzystaniem Bootstrapa 4, przykładowo na dowolnym node:

menu local tabs with Bootstrap 4 screenshot

Zamień scriptun, na nazwę Twojego szablonu i nadpisz potrzebne templatki. Dla głównej listy, w elemencie ul dodaj klasy nav i nav-tabs:

{# /themes/scriptun/templates/navigation/menu-local-tasks.html.twig #}

{#
/**
 * @file
 * Theme override to display primary and secondary local tasks.
 *
 * Available variables:
 * - primary: HTML list items representing primary tasks.
 * - secondary: HTML list items representing primary tasks.
 *
 * Each item in these variables (primary and secondary) can be individually
 * themed in menu-local-task.html.twig.
 */
#}
{% if primary %}
    <div class="container">
        <h2 class="visually-hidden">{{ 'Primary tabs'|t }}</h2>
        <ul class="nav nav-tabs nav-tabs-admin">{{ primary }}</ul>
    </div>
{% endif %}
{% if secondary %}
    <div class="container">
        <h2 class="visually-hidden">{{ 'Secondary tabs'|t }}</h2>
        <ul>{{ secondary }}</ul>
    </div>
{% endif %}

Każdy element na liście w zakładkach musi mieć klasę nav-item:

{# /themes/scriptun/templates/navigation/menu-local-task.html.twig #}

{#
/**
 * @file
 * Theme override for a local task link.
 *
 * Available variables:
 * - attributes: HTML attributes for the wrapper element.
 * - is_active: Whether the task item is an active tab.
 * - link: A rendered link element.
 *
 * Note: This template renders the content for each task item in
 * menu-local-tasks.html.twig.
 *
 * @see template_preprocess_menu_local_task()
 */
#}
<li{{ attributes.addClass('nav-item') }}>{{ link }}</li>

Odnośniki również potrzebują dodatkowej klasy nav-link, ale dodatkowo klasę active kiedy są aktywne. Domyślnie Drupal 8 dodaje wtedy klasę is-active, żeby to zmienić nadpisz zmienne w pliku szablonu *.theme:

// /themes/scriptun/scriptun.theme

function scriptun_preprocess_menu_local_task(&$variables) {
  $class = array('nav-link');
  if($variables['element']["#active"])
  {
    $class[] = 'active';
  }
  $variables['element']['#link']['url']->setOption('attributes', array('class' => $class));
}

Wszystkie zakładki z local task powinny się wyświetlać poprawnie (na stronie z dowolnym node'm, logowanie itd.). 

Dodaj komentarz

CAPTCHA

To pytanie sprawdza czy jesteś człowiekiem i zapobiega wysyłaniu spamu.

Wykorzystujemy cookies na naszej stronie, aby była łatwiejsza w obsłudze i nawigacji. Dodatkowo korzystamy z usług Google takie jak Analytics i Ads.

Dowiedz się więcej Już czytałem