> For the complete documentation index, see [llms.txt](https://docs.papillon.bzh/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.papillon.bzh/design/components/layouts/stack.md).

# Stack

Stack permet de créer facilement des assemblages de vues, alignées et réparties équitablements, à la manière de **l'Auto Layout** de Figma ou du **Flexbox** en CSS.

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

## Exemple

Cet exemple aligne 3 titres H2 verticalement avec un espacement de 12 pixels

{% columns %}
{% column %}

<pre class="language-tsx" data-title="example.tsx" data-line-numbers><code class="lang-tsx"><strong>&#x3C;Stack
</strong><strong>  direction="vertical"
</strong><strong>  gap={12}
</strong><strong>>
</strong>  &#x3C;Typography variant="h2">
    Hey
  &#x3C;/Typography>
  &#x3C;Typography variant="h2">
    Comment
  &#x3C;/Typography>
  &#x3C;Typography variant="h2">
    Ça va
  &#x3C;/Typography>
<strong>&#x3C;/Stack>
</strong></code></pre>

{% endcolumn %}

{% column %}

<figure><picture><source srcset="/files/4lZeRGrDwLwffPULiMMO" media="(prefers-color-scheme: dark)"><img src="/files/BgdJn0mVNtRJKGLxAh9V" alt=""></picture><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

## Propriétés

{% hint style="success" %}
Stack étend [**View**](https://reactnative.dev/docs/view) et dispose de toutes ses propriétés
{% endhint %}

### `direction`

Direction de l'alignement des éléments :

* `horizontal`
* **`vertical` (par défaut)**

| Type   | Valeur par défaut |
| ------ | ----------------- |
| String | vertical          |

### `gap`

Espacement entre les éléments

| Type   | Valeur par défaut |
| ------ | ----------------- |
| Nombre | 4                 |

### `padding`

Espacement autour des éléments de la Stack

| Type                         | Valeur par défaut |
| ---------------------------- | ----------------- |
| Nombre ou `[Nombre, Nombre]` | 0                 |

### `margin`

Espacement au dehors des éléments de la Stack

| Type   | Valeur par défaut |
| ------ | ----------------- |
| Nombre | 0                 |

### `vAlign`

Alignement vertical à l'intérieur de la Stack

| Type                       | Valeur par défaut |
| -------------------------- | ----------------- |
| `start`, `center` ou `end` | start             |

### `hAlign`

Alignement horizontal à l'intérieur de la Stack

| Type                       | Valeur par défaut |
| -------------------------- | ----------------- |
| `start`, `center` ou `end` | start             |

### `inline`

Empêche la Stack de prendre toute la largeur

| Type    | Valeur par défaut |
| ------- | ----------------- |
| Booléen | false             |

### `flex`

Applique `flex: 1` a la Stack

| Type    | Valeur par défaut |
| ------- | ----------------- |
| Booléen | false             |

### `backgroundColor`

Applique une couleur de fond à la Stack

| Type   |
| ------ |
| String |

### `radius`

Valeur d'arrondi de la stack

| Type   | Valeur par défaut |
| ------ | ----------------- |
| Nombre | 0                 |

### `card`

Transforme la stack en une Carte similaire a une [`<List />`](/design/components/list.md)

{% hint style="danger" %}
Cette propriété en overwrite d'autres par défaut telles que `backgroundColor` ou `radius`.
{% endhint %}

| Type    | Valeur par défaut |
| ------- | ----------------- |
| Booléen | false             |

### `flat`

Désactive les `ombres` lorsque card est actif.

| Type    | Valeur par défaut |
| ------- | ----------------- |
| Booléen | false             |


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.papillon.bzh/design/components/layouts/stack.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.