Theming - SDC Single Directory Components

Single Directory Component SDC

Nella cartella principale del tema deve esserci una sottocartella components/ con dentro una cartella per ogni component e i file .yml e .twig (eventualmente anche .css e .js), ad esempio nome_tema/components/button/button.component.yml e nome_tema/components/button/button.twig (il nome del file non è button.html.twig ma è button.twig).

Per includere un component in un template usare:

{# verificare questo esempio che probabilmente non è corretto #}
{# https://www.drupal.org/docs/develop/theming-drupal/using-single-directory-components/using-your-new-single-directory-component #}
{{ include('nome_tema:nome_component', {
  props: { {# props per dati strutturati e slots per dati non strutturati #}
    message: 'Ciao!'
  }
}) }}

Nel file .component.yml devono essere specificati i seguenti dati:

• $schema: utile all'IDE per funzionalità di autocomplete, link alla documentazione e riconoscimento degli errori
• name: il nome del componente
• description: descrizione del componente
• props: le proprietà che il componente accetta (numeri, booleani, oggetti strutturati)
• slots: markup da inserire nel componente
• group: etichetta se si vogliono raggruppare i componenti
• status: experimental | stable | deprecated | obsolete
• dependencies: array di librerie
• libraryOverrides: per fare l'override di librerie CSS/JS
• replaces: dichiara che il componente sostituisce un altro componente

Le chiavi definite in props.properties e in slots diventano variabili disponibili nel template del componente. Le props sono dati strutturati validabili tramite JSON Schema; gli slot sono contenuti/render array o markup da inserire nel componente.