# Composant d’onglets pour les applications Stripe Utilisez des onglets pour afficher des sections de contenu. # v8 > This is a v8 for when app-sdk-version is 8. View the full page at https://docs.stripe.com/stripe-apps/components/tabs?app-sdk-version=8. Les onglets sont des sections qui affichent un panneau de contenu à la fois. Les différents onglets disponibles apparaissent sur le bord supérieur du panneau actuellement sélectionné. Pour ajouter le composant `Tabs` à votre application : ```js import {Tabs, Tab, TabList, TabPanel, TabPanels} from '@stripe/ui-extension-sdk/ui'; ``` ### Propriétés des onglets | Propriété | Type | | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | (Obligatoire) `React.ReactNode` Un ou plusieurs composants `TabList` ou `TabPanels`. | | `fitted` | (Facultatif) `boolean | undefined` Indique si la `TabList` doit ou non occuper toute la largeur de son conteneur. | | `onSelectionChange` | (Facultatif) `((event: React.Key) => void) | undefined` Rappel à déclencher lorsqu’un `Tab` est sélectionné. | | `selectedKey` | (Facultatif) `React.Key | undefined` Touche du composant `Tab` sélectionné lorsque vous l’utilisez en tant que composant contrôlé. À utiliser avec `onSelectionChange` pour contrôler l’état de sélection de l’onglet. | | `size` | (Facultatif) `("small" | "medium" | "large") | undefined` La taille du composant. | ## Onglet Le composant `TabList` prend en charge la sélection de contenu. `TabList` est composé d’un ensemble de composants `Tab`. Chaque `Tab` peut être identifié de façon unique à l’aide d’une propriété `tabKey`. Si vous affichez des composants `Tab` à l’aide d’une fonction `map`, vous devez tout de même ajouter une `key` pour respecter [les règles de React](https://reactjs.org/docs/lists-and-keys.html#keys). ### Propriétés TabList | Propriété | Type | | ---------- | ---------------------------------------------------------------------- | | `children` | (Obligatoire) `React.ReactNode` Un ou plusieurs composants `Tab`. | ### Propriétés de l’onglet | Propriété | Type | | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | (Obligatoire) `React.ReactNode` Le contenu du composant. | | `disabled` | (Facultatif) `boolean | undefined` Indique si l’onglet doit être désactivé ou non. | | `id` | (Facultatif) `string | undefined` Un identifiant unique qui contrôle la sélection à l’aide de la propriété `selectedKey` du composant `Tabs`. | | `tabKey` | (Facultatif)(Obsolète) Utilisez plutôt la propriété `id`. `(React.Key | null) | undefined` Identifiant unique à utiliser avec la `selectedKey` de `Tabs`. | ## TabPanel Le composant `TabPanels` prend en charge l’affichage de panneaux de contenu avec des onglets. `TabPanels` est constitué d’un ensemble de composants `TabPanel`. Chaque `TabPanel` peut être identifié à l’aide d’une propriété `tabKey`. Si vous affichez des composants `TabPanel` à l’aide d’une fonction `map`, vous devez tout de même ajouter une `key` pour respecter [les règles de React](https://reactjs.org/docs/lists-and-keys.html#keys). ### Propriétés TabPanel | Propriété | Type | | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | (Obligatoire) `React.ReactNode` Le contenu du composant. | | `id` | (Facultatif) `string | undefined` Un identifiant unique qui contrôle la sélection à l’aide de la propriété `selectedKey` du composant `Tabs`. | | `tabKey` | (Facultatif)(Obsolète) Utilisez plutôt la propriété `id`. `(React.Key | null) | undefined` Identifiant unique à utiliser avec la `selectedKey` de `Tabs`. | ## Petits onglets ## Onglets désactivés ## Utilisations non prises en charge Les onglets ne prennent pas en charge le contenu conditionnel dans les fragments, sauf si le fragment enfant reçoit une clé identique. Utilisez des composants au lieu de fragments afin d’éviter les utilisations non prises en charge des onglets. Vous pouvez aussi donner une `key` partagée aux fragments enfants. ## Onglets contrôlés Utilisez la propriété `selectedKey` de `Tabs` avec la propriété `tabKey` de `Tab` et de `TabPanel` pour créer un composant contrôlé. # v9 > This is a v9 for when app-sdk-version is 9. View the full page at https://docs.stripe.com/stripe-apps/components/tabs?app-sdk-version=9. Les onglets sont des sections qui affichent un panneau de contenu à la fois. Les différents onglets disponibles apparaissent sur le bord supérieur du panneau actuellement sélectionné. Pour ajouter le composant `Tabs` à votre application : ```js import {Tabs, Tab, TabList, TabPanel, TabPanels} from '@stripe/ui-extension-sdk/ui'; ``` ### Propriétés des onglets | Propriété | Type | | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | (Obligatoire) `React.ReactNode` Un ou plusieurs composants `TabList` ou `TabPanels`. | | `fitted` | (Facultatif) `boolean | undefined` Indique si la `TabList` doit ou non occuper toute la largeur de son conteneur. | | `onSelectionChange` | (Facultatif) `((event: string) => void) | undefined` Rappel à déclencher lorsqu’un `Tab` est sélectionné. | | `selectedKey` | (Facultatif) `string | undefined` L’`id` du composant `Tab`sélectionné lorsque vous l’utilisez en tant que composant contrôlé. À utiliser avec `onSelectionChange` pour contrôler l’état de sélection de l’onglet. | | `size` | (Facultatif) `("small" | "medium" | "large") | undefined` La taille du composant. | ## Onglet Le composant `TabList` prend en charge la sélection de contenu. `TabList` est composé d’un ensemble de composants `Tab`. Chaque `Tab` peut être identifié de façon unique à l’aide d’une propriété `id`. Si vous affichez des composants `Tab` à l’aide d’une fonction `map`, vous devez tout de même ajouter une `key` pour respecter [les règles de React](https://reactjs.org/docs/lists-and-keys.html#keys). ### Propriétés TabList | Propriété | Type | | ---------- | ---------------------------------------------------------------------- | | `children` | (Obligatoire) `React.ReactNode` Un ou plusieurs composants `Tab`. | ### Propriétés de l’onglet | Propriété | Type | | ---------- | --------------------------------------------------------------------------------------------------------------------------------------- | | `children` | (Obligatoire) `React.ReactNode` Le contenu du composant. | | `id` | (Obligatoire) `string` Un identifiant unique qui contrôle la sélection à l’aide de la propriété `selectedKey` du composant `Tabs`. | | `disabled` | (Facultatif) `boolean | undefined` Indique si l’onglet doit être désactivé ou non. | ## TabPanels Le composant `TabPanels` prend en charge l’affichage de panneaux de contenu avec des onglets. `TabPanels` est constitué d’un ensemble de composants `TabPanel`. Chaque `TabPanel` peut être identifié à l’aide d’une propriété `id`. Si vous affichez des composants `TabPanel` à l’aide d’une fonction `map`, vous devez tout de même ajouter une `key` pour respecter [les règles de React](https://reactjs.org/docs/lists-and-keys.html#keys). ### Propriétés TabPanels | Propriété | Type | | ---------- | ------------------------------------------------------------------------- | | `children` | (Obligatoire) `React.ReactNode` Un ou plusieurs composants TabPanel. | ### Propriétés TabPanel | Propriété | Type | | ---------- | --------------------------------------------------------------------------------------------------------------------------------------- | | `children` | (Obligatoire) `React.ReactNode` Le contenu du composant. | | `id` | (Obligatoire) `string` Un identifiant unique qui contrôle la sélection à l’aide de la propriété `selectedKey` du composant `Tabs`. | ## Petits onglets ## Onglets désactivés ## Utilisations non prises en charge Les onglets ne prennent pas en charge le contenu conditionnel dans les fragments, sauf si le fragment enfant reçoit une clé identique. Utilisez des composants au lieu de fragments afin d’éviter les utilisations non prises en charge des onglets. Vous pouvez aussi donner une `key` partagée aux fragments enfants. ## Onglets contrôlés Utilisez la propriété `selectedKey` de `Tabs` avec la propriété `id` de `Tab` et de `TabPanel` pour créer un composant contrôlé. ## 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)