# Composant de liste pour les applications Stripe Affichez une liste d'informations dans un large éventail de formats préconfigurés. # v8 > This is a v8 for when app-sdk-version is 8. View the full page at https://docs.stripe.com/stripe-apps/components/list?app-sdk-version=8. Pour ajouter le composant `List` à votre application : ```js import {List, ListItem} from '@stripe/ui-extension-sdk/ui'; ``` Vous pouvez utiliser le gestionnaire `onAction` pour répondre aux événements `press` sur les éléments de liste. ### Propriétés des listes | Propriété | Type | | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `children` | (Obligatoire) `React.ReactNode` Un ou plusieurs composants `ListItem`. | | `onAction` | (Facultatif) `((id: React.Key) => void) | undefined` Gestionnaire d’événement de pression qui reçoit la touche correspondante du `ListItem` qui a été pressé. | ## Éléments de liste Chaque liste est composée d’une collection de composants `ListItem`. Vous devez identifier de façon unique chaque élément de liste à l’aide de la propriété `key`. ### Propriétés ListItem | Propriété | Type | | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | | `icon` | (Facultatif) `React.ReactNode` Icône qui apparaît à gauche du contenu et de la description. Elle est remplacée par `image` si les deux sont présents. | | `id` | (Facultatif) `string | undefined` Identifiant de l’élément. Celui-ci sera transmis au gestionnaire `onAction` de la valeur `List`. | | `image` | (Facultatif) `React.ReactNode` Image qui apparaît à gauche du contenu et de la description. Elle est remplacée par `icon` si les deux sont présents. | | `secondaryTitle` | (Facultatif) `React.ReactNode` Contenu secondaire pour le composant `ListItem`. | | `size` | (Facultatif) `("default" | "large") | undefined` Taille du composant `ListItem`. | | `title` | (Facultatif) `React.ReactNode` Titre du composant `ListItem`. | | `value` | (Facultatif) `React.ReactNode` Valeur à afficher sur le côté droit de l’élément. | ## Titre secondaire Vous pouvez ajouter un titre secondaire à un élément d’une liste à l’aide de la propriété `secondaryTitle`. ## Valeurs La propriété `value` `ListItem` peut prendre en charge du JSX arbitraire. ### Composants non pris en charge Notez que certains composants interactifs ne fonctionneront **pas** en tant que propriétés `value` dans un `ListItem` : - [Select](https://docs.stripe.com/stripe-apps/components/select.md) - [TextArea](https://docs.stripe.com/stripe-apps/components/textarea.md) - [TextField](https://docs.stripe.com/stripe-apps/components/textfield.md) # v9 > This is a v9 for when app-sdk-version is 9. View the full page at https://docs.stripe.com/stripe-apps/components/list?app-sdk-version=9. Pour ajouter le composant `List` à votre application : ```js import {List, ListItem} from '@stripe/ui-extension-sdk/ui'; ``` Vous pouvez utiliser le gestionnaire `onAction` pour répondre aux événements `press` sur les éléments de liste. ### Propriétés des listes | Propriété | Type | | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `children` | (Obligatoire) `React.ReactNode` Un ou plusieurs composants `ListItem`. | | `onAction` | (Facultatif) `((id: React.Key) => void) | undefined` Gestionnaire d’événement de pression qui reçoit la touche correspondante du `ListItem` qui a été pressé. | ## Éléments de liste Chaque liste est composée d’une collection de composants `ListItem`. Vous devez identifier de façon unique chaque élément de liste à l’aide de la propriété `key`. ### Propriétés ListItem | Propriété | Type | | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | | `icon` | (Facultatif) `React.ReactNode` Icône qui apparaît à gauche du contenu et de la description. Elle est remplacée par `image` si les deux sont présents. | | `id` | (Facultatif) `string | undefined` Identifiant de l’élément. Celui-ci sera transmis au gestionnaire `onAction` de la valeur `List`. | | `image` | (Facultatif) `React.ReactNode` Image qui apparaît à gauche du contenu et de la description. Elle est remplacée par `icon` si les deux sont présents. | | `secondaryTitle` | (Facultatif) `React.ReactNode` Contenu secondaire pour le composant `ListItem`. | | `size` | (Facultatif) `("default" | "large") | undefined` Taille du composant `ListItem`. | | `title` | (Facultatif) `React.ReactNode` Titre du composant `ListItem`. | | `value` | (Facultatif) `React.ReactNode` Valeur à afficher sur le côté droit de l’élément. | ## Titre secondaire Vous pouvez ajouter un titre secondaire à un élément d’une liste à l’aide de la propriété `secondaryTitle`. ## Valeurs La propriété `value` `ListItem` peut prendre en charge du JSX arbitraire. ### Composants non pris en charge Notez que certains composants interactifs ne fonctionneront **pas** en tant que propriétés `value` dans un `ListItem` : - [Select](https://docs.stripe.com/stripe-apps/components/select.md) - [TextArea](https://docs.stripe.com/stripe-apps/components/textarea.md) - [TextField](https://docs.stripe.com/stripe-apps/components/textfield.md) ## See also - [Modèles de conception](https://docs.stripe.com/stripe-apps/patterns.md) - [Styliser votre application](https://docs.stripe.com/stripe-apps/style.md) - [Tests d’interface utilisateur](https://docs.stripe.com/stripe-apps/ui-testing.md)