# Layouts

Les layouts sont les principaux conteneurs d'une page ou de contenu, contenant les élements scrollables, le header, le footer, etc. **Il est le point d'entrée d'un affichage particulier de données.**

<figure><picture><source srcset="/files/sSsbTWFKqJbd7e33pU5D" media="(prefers-color-scheme: dark)"><img src="/files/2IQr0Fc0ewe10rOgEMOT" alt=""></picture><figcaption></figcaption></figure>

## Commencer avec les layouts

Il existe dans Papillon UI plusieurs types de layouts utilisables pour votre interface.

{% hint style="warning" %}
Si vous ne retrouvez pas votre cas d'usage dans ces types, privilégiez les layouts par défaut tels que [ScrollView](https://reactnative.dev/docs/scrollview), [FlatList](https://reactnative.dev/docs/flatlist) ou ceux importés comme [LegendList](https://github.com/LegendApp/legend-list) ou [FlashList](https://shopify.github.io/flash-list/).
{% endhint %}

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-cover data-type="image">Cover image</th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover-dark data-type="image">Cover image (dark)</th></tr></thead><tbody><tr><td><strong>TabFlatList</strong></td><td>Composition complexes avec un header repliant animé</td><td><a href="/files/bdYsD4VCCUMSs0wCBMEk">/files/bdYsD4VCCUMSs0wCBMEk</a></td><td><a href="/pages/o9ICRcLVXF3wjkNYTpgl">/pages/o9ICRcLVXF3wjkNYTpgl</a></td><td><a href="/files/pSQvFgu5wv44o8ESCXeX">/files/pSQvFgu5wv44o8ESCXeX</a></td></tr><tr><td><strong>TableFlatList</strong></td><td>Affichage de large listes de données scrollables avec sections </td><td><a href="/files/eWVlcTJMKO7tVeQ18eMu">/files/eWVlcTJMKO7tVeQ18eMu</a></td><td><a href="/pages/1ru9LBthuwX2b8bkEwbC">/pages/1ru9LBthuwX2b8bkEwbC</a></td><td><a href="/files/ilylqgQNcZbqtcILOKlc">/files/ilylqgQNcZbqtcILOKlc</a></td></tr><tr><td><strong>Stack</strong></td><td>Affiche des éléments dans un format conditionné</td><td><a href="/files/Lsp1lOk2waYa8GGvIXSp">/files/Lsp1lOk2waYa8GGvIXSp</a></td><td></td><td><a href="/files/I3GcqO1sYRUEGJyou69y">/files/I3GcqO1sYRUEGJyou69y</a></td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.papillon.bzh/ui/components/layouts.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.