https://www.youtube.com/watch?v=SpoSDnXtI8A

Vidéo précédente: 🇫🇷Guide complet (6/12) : Personnaliser l'apparence

Intro

Contenu de la vidéo

Présentation ( 0:00 - 1:46 ) Noeuds de placement ( 1:46 - 3:08 ) Appareils ( 3:08 - 4:05 ) Taille des noeuds ( 4:05 - 8:50 ) Marges ( 8:50 - 11:13 ) Cacher un noeud ( 11:13 - 12:31 ) Noeud section ( 12:31 - 14:48 ) Direction ( 14:48 - 16:44 ) Inverse ( 16:44 - 17:19 ) Aligner & répartir ( 17:19 - 19:01 ) Espacement ( 19:01 - 20:04 ) Collant, scroll, et désactivé ( 20:04 - 22:15 ) Agrandir ( 22:15 - 27:48 ) Rétrécir ( 27:48 - 31:11 )

Script

1. Présentation

Voyons comment placer des éléments à l’écran.

Placer les positions et gérer les différentes tailles des éléments à l’écran.

Contrairement à un logiciel de design comme Figma, sur Voltapp, on ne peut pas les placer de façon arbitraire car on ne sait pas à l’avance quelle taille va faire l’écran de l’utilisateur.

Les placements sont donc ici dynamique et dépendent des autres éléments de contenus.

Nota bene technique: Voltapp se base sur les Flexbox de CSS, ce langage qui permet de définir le design d’un site web.

Sauf qu’au lieu d’écrire du code CSS, on va directement pouvoir manipuler les attributs de différents noeuds.

Ressources

Lexique de Voltapp

CSS

2. Noeuds de placement