Cluster et espacement
Objectif : placer deux boutons côte à côte sans grille et comprendre d'où vient l'espacement.
Durée : 3 minutes
Il vous faut : une page et deux ou trois petits blocs
Étapes
- Sélectionnez Add Block, puis Cluster.
- Donnez-lui un Name, puis réglez la disposition : Justify, Align, Gap, Wrap et Width.
- Sur la ligne du Cluster, sélectionnez Add child block et ajoutez les éléments — deux Button Links, par exemple.
- Enregistrez et vérifiez le résultat dans une fenêtre étroite comme dans une large.
D'où vient vraiment l'espacement
Quatre blocs commandent l'air d'une page, et se tromper de bloc est la cause habituelle d'une mise en page qui refuse d'obéir :
- Section — Spacing. L'espace vertical au-dessus et en dessous d'une bande de contenu. C'est le grand levier.
- Container — Flow.
stackespace régulièrement les enfants du container ;noneles laisse tels quels. - Grid — Gap. L'espace entre les cellules de la grille.
- Cluster — Gap. L'espace entre les éléments d'une rangée.
Si deux paragraphes sont trop serrés, la réponse est le flow du Container, pas un bloc Plain Text vide.
Remarques
- N'ajoutez jamais un bloc vide pour espacer. Il survit jusqu'à ce que quelqu'un modifie la page au téléphone, et un lecteur d'écran le lit comme un paragraphe vide.
- Wrap: nowrap garde une rangée sur une seule ligne à toutes les largeurs — juste pour deux boutons, faux pour six puces. Dans le doute, laissez passer à la ligne.
- Cluster sert à quelques petits éléments en rangée. Pour du contenu substantiel côte à côte, utilisez Columns ou Grid.
- Cluster est aussi ce qui se loge dans les barres de navigation et les pieds de card — d'où sa présence dans les Shared Slots.