# Item Item est un élément conçu pour être placé dans une [`List`](/ui/components/list.md) ou dans une [`TableFlatList`](/ui/components/layouts/tableflatlist.md). Il permet de concevoir facilement des interfaces sectionnées. **Il remplace l'ancien ``.**

## Fonctionnement Item est un élément **dynamique et intelligent**. Il adapte automatiquement le placement de son contenu selon son type, ce qui lui permet d'être utile pour construire rapidement des interfaces complètes. {% hint style="info" %} Lors des exemples suivants, les Item seront wrappés dans une List, comme ils doivent être utilisés. {% endhint %} ### Texte Pour commencer un Item, on ajoute habituellement un titre et un sous-titre. Pour cela, on va utiliser `` et ses variantes conçues pour Item. {% columns %} {% column width="50%" %}

<List>
  <Item>
    <Typography variant="title">
      Salut tout le monde !
    </Typography>
    <Typography variant="caption">
      Comment ça va ?
    </Typography>
  </Item>
<List>

{% endcolumn %} {% column width="50%" %}

{% endcolumn %} {% endcolumns %} ### Icône Pour ajouter une icône, on va faire appel a l'élément ``. {% columns %} {% column width="50%" %}

<List>
  <Item>
    <Icon papicon>
      <Papicons.Student />
    </Icon>

    <Typography variant="title">
      Salut tout le monde !
    </Typography>
    <Typography variant="caption">
      Comment ça va ?
    </Typography>
  </Item>
</List>

{% endcolumn %} {% column width="50%" %}

{% endcolumn %} {% endcolumns %} ### Trailing `Trailing` est un élément placé en fin d'Item, il peut contenir n'importe quel composant React. {% hint style="success" %} Papillon UI le place et l'espace automatiquement, peu importe sa position dans le code. {% endhint %} {% columns %} {% column width="50%" %}

<List>
  <Item>
    {/* Reste du code */}
    
    <Trailing>
      <Button
        title="Bouton"
        size="small"
        inline
      />
    </Trailing>
  </Item>
</List>

{% endcolumn %} {% column width="50%" %}

{% endcolumn %} {% endcolumns %} ### Leading `Leading` est un élément placé en début d'Item, il peut contenir n'importe quel composant React. {% hint style="success" %} Papillon UI le place et l'espace automatiquement, peu importe sa position dans le code. {% endhint %} {% columns %} {% column width="50%" %}

<List>
  <Item>
    <Leading>
      <Image source={require('@/assets/images/icon.png')} style={{ width: 40, height: 40, borderRadius: 10 }} />
    </Leading>

    {/* Reste du code */}
  </Item>
</List>

{% endcolumn %} {% column width="50%" %}

{% endcolumn %} {% endcolumns %} ## Propriétés ### `onPress` Appelé lorsqu'un appui est enregistré sur l'`Item` | Type | | ----------------------------------- | | ({nativeEvent: PressEvent}) => void | --- # 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/item.md?ask= ``` 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.