Guida · Il contenuto
Varianti sullo stesso componente
Tre nomi, un componente. È il caso più frequente, ed è quello che spiega perché i viewMode sono centosessantuno e i componenti quarantuno.
Dove siamo
Sai collegare un blocco a un viewMode. Alla fine di questo capitolo avrai tre aspetti diversi che condividono lo stesso componente, e saprai riconoscere quando una variante non basta più.
Il gesto
Duplica il tuo viewMode due volte. Cambia solo name e className. Lascia component uguale.
Assegna i tre nomi a tre blocchi identici. Ricarica.
// db.viewmodes.json — tre voci, un componente solo
{ "name": "CardCompact", "component": "Box", "className": "rounded-xl p-4" }
{ "name": "CardWide", "component": "Box", "className": "rounded-xl p-8 w-full" }
{ "name": "CardPanel", "component": "Box", "className": "border p-4" }Cos’è appena successo
Niente, dal punto di vista del codice: non è stato scritto un solo file. La differenza fra i tre vive interamente nello store, cioè in un dato — e un dato si modifica senza deploy.
È il motivo per cui i viewMode sono quattro volte i componenti. Un componente è una capacità: sapere disporre dei figli, sapere aprire e chiudere. Un viewMode è una decisione su come quella capacità appare qui.
Tre nomi, un componente
{ "name": "CardCompact", "component": "Box", "className": "rounded-xl p-4" }
{ "name": "CardWide", "component": "Box", "className": "rounded-xl p-8 w-full" }
{ "name": "CardPanel", "component": "Box", "className": "border p-4" }Quando una variante non basta
Finché la differenza è aspetto — margini, colori, tag, quali slot esistono — è una variante. Quando la differenza è comportamento — serve uno stato che prima non c’era, o una risposta a un evento — non è più una variante: è un componente.
La domanda che discrimina: due varianti si comportano allo stesso modo se le usi? Se sì, restano due voci nello store.
Quando non funziona
Duplica un viewMode senza cambiargli il name. Nessun errore: vince l’ultimo letto, e il primo smette di esistere in silenzio.
Se una modifica «non ha effetto», cerca il nome due volte nello store prima di cercare altrove.
Avanti
Hai la forma sotto controllo. Nel capitolo dopo la porti tutta insieme da un’altra parte: un tema tuo.