Guida · Il comportamento
Un’azione che naviga
Il primo blocco che fa qualcosa invece di mostrare qualcosa. Tre campi, e la differenza fra un link e un bottone smette di essere una questione di aspetto.
Dove siamo
Finora tutto quello che hai messo in pagina stava fermo. Alla fine di questo capitolo avrai un bottone che porta da qualche parte, e saprai perché lo stesso blocco può anche non portare da nessuna parte e non è un errore.
Il gesto
Aggiungi un blocco action. Scegli un viewMode fra quelli dei bottoni.
Nel gruppo action metti actionType: link e l’indirizzo in actionTarget. Lascia target su _self.
Salva, ricarica, clicca.
// un blocco dentro layout di una pagina, in Payload
{
"blockType": "action",
"viewMode": "ButtonPrimary",
"action": {
"actionType": "link",
"actionTarget": "/guida/eventi",
"target": "_self"
}
}Cos’è appena successo
L’etichetta non è un campo del bottone: è un blocco figlio dentro il suo content. Per questo un’azione può contenere un’icona, un testo, o entrambi, senza che nessuno abbia previsto la combinazione — il bottone dispone dei figli, non li conosce.
E actionType non descrive l’aspetto ma il comportamento: link naviga, submit invia un form, none non fa niente di suo. Un bottone che sembra un link e un link che sembra un bottone sono due combinazioni legittime di viewMode e actionType, e il fatto che siano ortogonali è il punto.
`none` non vuol dire inerte
Un’azione con actionType: none è quella che serve quando il click deve far accadere qualcosa dentro la pagina invece che portare altrove: il comportamento non lo mette l’azione, lo mette il suo uiState.
È il capitolo dopo, ed è il modo in cui funzionano il torna-in-cima, l’apri-chiudi e tutto il resto.
Quando non funziona
Metti actionType: link e lascia actionTarget vuoto. Il bottone si disegna, si clicca, e resta dov’è.
Nessun avviso: l’indirizzo di default è #, che è un indirizzo valido. Se un link «non fa niente», guarda il target prima del tipo.
Avanti
Sai far navigare. Nel capitolo dopo fai accadere qualcosa senza cambiare pagina.