Guida · La forma
Gli slot di un viewMode
Uno slot è un’apertura con un nome. Il blocco figlio dice in quale entra, e il componente decide dove finisce.
Dove siamo
Hai un viewMode tuo. Alla fine di questo capitolo saprai perché un figlio finisce in un punto invece che in un altro, e come si veste quel punto senza toccare il figlio.
Il gesto
Dichiara due slot nel tuo viewMode: header e content. Dai a ognuno un className diverso.
Metti due blocchi figli. Assegna a ciascuno il campo slot con uno dei due nomi. Ricarica: sono finiti in due posti diversi.
// db.viewmodes.json — il campo slots di una voce
{
"slots": [
{ "name": "header", "className": "border-b pb-2 mb-3" },
{ "name": "content", "className": "flex flex-col gap-2" }
]
}Cos’è appena successo
Il figlio porta un nome di apertura, non una posizione. Dove quell’apertura stia sulla pagina lo decide il componente; come sia vestita lo decide il viewMode del padre. Il figlio non partecipa a nessuna delle due decisioni.
È questo che lo rende riusabile: lo stesso testo, con lo stesso slot: "content", entra in una card, in una sezione e in un accordion, e in ognuno dei tre è vestito diversamente senza sapere di esserlo.
Il figlio nomina l'apertura, non la posizione
{ blockType: 'text', slot: 'header', text: 'Titolo' }
{ blockType: 'text', slot: 'content', text: 'Corpo' }Il padre decide come si veste
{ name: 'header', className: 'border-b pb-2 mb-3' }
{ name: 'content', className: 'flex flex-col gap-2' }Quando non funziona
Scrivi uno slot che il viewMode del padre non dichiara. Quel figlio non compare da nessuna parte: il componente proietta le aperture che conosce, e quella non è fra loro.
È la prima cosa da controllare quando «un blocco non si vede». Non è il blocco, è il nome dell’apertura.
Avanti
Sai dichiarare una forma e riempirla. Il passo dopo è collegarla al contenuto: un blocco che cita il tuo viewMode.