Item

Item est un élément conçu pour être placé dans une List ou dans une TableFlatList. Il permet de concevoir facilement des interfaces sectionnées. Il remplace l'ancien <NativeItem />.

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.

Lors des exemples suivants, les Item seront wrappés dans une List, comme ils doivent être utilisés.

Texte

Pour commencer un Item, on ajoute habituellement un titre et un sous-titre. Pour cela, on va utiliser <Typography/> et ses variantes conçues pour Item.

example.tsx

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

Icône

Pour ajouter une icône, on va faire appel a l'élément <Icon />.

example.tsx

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

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

Trailing

Trailing est un élément placé en fin d'Item, il peut contenir n'importe quel composant React.

Papillon UI le place et l'espace automatiquement, peu importe sa position dans le code.

example.tsx

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

Leading

Leading est un élément placé en début d'Item, il peut contenir n'importe quel composant React.

Papillon UI le place et l'espace automatiquement, peu importe sa position dans le code.

example.tsx

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

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