---
description: Comment mettre en place et organiser votre application.
---

# Mise en page

## **De l'idée à l'application**

Pour passer d'une idée à une application, nous vous recommandons vivement d'esquisser votre vision en utilisant les modèles d'application ci-dessous. Il est important de créer d'abord une feuille de route sur la manière dont les gens vont interagir avec votre application.

![](https://549775582-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fthun%2F-MR5YKvK9pBgo1eryNIe%2F-MR5YSvHAfZCGUvcE6B9%2F1.png?generation=1610722697447553\&alt=media)

## **Tutoriel Vidéo**

{% embed url="https://youtu.be/Z9R_kg4ew2M" %}

## **Arranger les écrans avec les navigateurs**

La plupart des applications naviguent sur des écrans à l'aide de navigateurs. Cliquez [ici](https://www.youtube.com/watch?v=Z9R_kg4ew2M) pour voir un tutoriel sur l'utilisation de chaque navigateur.

Voici trois exemples de navigateurs que vous pouvez utiliser sur Thunkable.

1. **Navigateurs** [**Haut** ](layout/top-tab-navigator-onglet-superieur-navigateur)**et** [**Bas** ](layout/bottom-tab-navigator)- Ces navigateurs vous permettent de changer d'écran en cliquant sur les icônes situées en haut ou en bas de l'écran.

![](https://549775582-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fthun%2F-MR5YKvK9pBgo1eryNIe%2F-MR5YSvIpyUd0LuTCdZM%2F2.png?generation=1610722697421839\&alt=media)

Onglet supérieur Navigateur

**2.** [**Navigateurs à tiroir** ](layout/untitled-3)- Un navigateur qui permet de sortir un menu latéral de différentes options à choisir.

![](https://549775582-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fthun%2F-MR5YKvK9pBgo1eryNIe%2F-MR5YSvJjPpjeS6EGjJd%2F3.png?generation=1610722697429106\&alt=media)

**3.** [**Navigators à pile**](layout/stack-navigator-navigateur-de-pile) - Navigateurs qui vous permettent d'empiler des écrans les uns sur les autres.

## **Composants de mise en page**

{% content-ref url="layout/top-tab-navigator-onglet-superieur-navigateur" %}
[top-tab-navigator-onglet-superieur-navigateur](layout/top-tab-navigator-onglet-superieur-navigateur)
{% endcontent-ref %}

{% content-ref url="layout/bottom-tab-navigator" %}
[bottom-tab-navigator](layout/bottom-tab-navigator)
{% endcontent-ref %}

{% content-ref url="layout/stack-navigator-navigateur-de-pile" %}
[stack-navigator-navigateur-de-pile](layout/stack-navigator-navigateur-de-pile)
{% endcontent-ref %}

{% content-ref url="layout/untitled-4" %}
[untitled-4](layout/untitled-4)
{% endcontent-ref %}

{% content-ref url="layout/row-rangee" %}
[row-rangee](layout/row-rangee)
{% endcontent-ref %}

{% content-ref url="layout/column-colonne" %}
[column-colonne](layout/column-colonne)
{% endcontent-ref %}
