TWIG | System szablonów w Drupalu 8 / 9

Domyślne zmienne ATRYBUTÓW dostępne we wszystkich szablonach

• attributes
• title_attributes
• content_attributes

Atrybut klasa HTML w szablonach

Dodanie klasy z użyciem atrybutu class=" " i zmiennej name

<div class="region region-{{ name }}">

Dodanie jednej klasy poleceniem addClass() zamiast użycia atrybutu class=" "

<div {{ attributes.addClass('klasa') }}> </div>

Dodanie wielu klas

  // Dodanie kilku klas 
  // Także dynamicznych - możliwe tworzenie warunków z użyciem zmiennych. 
  // wytłumaczenie w "Zagadnienia związane z kodowaniem szablonów - inne polecenia"
  {%  set classes = [
    'content',
    'node',
    'custom',
  ]  %}

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

lub

<div {{ attributes.addClass('klasa druga-klasa trzecia-klasa') }}>   </div>

Usunięcie klasy poleceniem removeClass('klasa-do-usunieca'), dodawanej przez system Drupal

<div {{ attributes.addClass(classes).removeClass('klasa-do-usunieca') }}>

Zastąpienie klasy dodawanej przez system Drupal poprzez użycie obu poleceń jednocześnie

<div {{ attributes.addClass('klasa-do-dodania').removeClass('klasa-do-usuniecia') }}>

Zagadnienia związane z kodowaniem szablonów - inne polecenia

Łączenie dwóch ciągów

{%
  set klasy = [
    'klasa',
    'klasa-' ~ zmienna | clean_class,
  ]
%}

~            - operator łączący ze sobą dwa ciągi
zmienna      - może reprezentować np. blok albo region.
|            - pionowa kreska jako separator oddzielający zmienną od polecenia
clean_class  - filtr, który usunie niewłaściwe znaki z klas HTML


Przykład:
{%
  set classes = [
    'region',
    'region-' ~ region|clean_class,
  ]
%}

Wynik: <div class="region region-header">

Operator trójskładnikowy

{{ foo ? 'yes' : 'no' }}

// kolejny przykład dynamicznego tworzenia klas
{%
  set classes = [
    'field-label-' ~ label_display,
    label_display == 'inline' ? 'clearfix',
  ]
%}