https://www.youtube.com/watch?v=1XBxrvtsp-E

Vidéo précédente: 🇫🇷Guide complet (7/12) : Disposition & Section

Intro

Contenu de la vidéo

Présentation ( 0:00 - 0:28 ) Range ( 0:28 - 2:22 ) Grille ( 2:22 - 4:50 ) En tête ( 4:50 - 6:29 ) Fenêtre modulaire ( 6:29 - 11:39 ) Overlay ( 11:39 - 14:49 ) Exemple : page de login ( 14:49 - 20:26 )

Script

1. Présentation

Regardons d’autres noeuds qui permettent de faire des placements d’éléments à l’écran et créons quelques exemples.

2. Range

Repassons sur une disposition de noeuds verticaux qui prennent 100% de la largeur de la section.

Un point sur la valeur Range.

Si on veut donner une taille maximale à la largeur, on peut utiliser une échelle de valeur, “range”.

Définissons que Contenu ne peut pas faire plus de 100% maximum de la largeur de l’écran, mais que sa valeur par défaut est de 800 pixels. Ainsi, sur un appareil plus petit comme un téléphone, cela prendra bien les 100% de la largeur de l’écran.

3. Grille

Regardons quelques noeuds de mise en forme.

Grille tout d’abord.

Changeons un texte pour l’appeler Item. Glissons le dans le noeud Grille. Dupliquer Item remplira la grille.

On voit qu’elle est de largeur 300 pixels. C’est la taille maximum que peuvent faire l’ensemble des colonnes.