# Registerkarten-Komponente für Stripe-Apps Verwenden Sie Registerkarten, um Inhaltsabschnitte anzuzeigen. # 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. Registerkarten sind Inhaltsabschnitte, die jeweils ein Inhaltsfeld anzeigen. Die Liste der Registerkartenelemente ist am oberen Rand des aktuell angezeigten Bereichs angeordnet. So fügen Sie Ihrer App die `Tabs` Komponente hinzu: ```js import {Tabs, Tab, TabList, TabPanel, TabPanels} from '@stripe/ui-extension-sdk/ui'; ``` ### Eigenschaften der Registerkarten | Eigenschaft | Typ | | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | (Pflichtfeld) `React.ReactNode` Eine oder mehrere `TabList`- oder `TabPanels`-Komponenten. | | `fitted` | (Optional) `boolean | undefined` Gibt an, ob die `TabList` die gesamte Breite des Containers einnehmen soll. | | `onSelectionChange` | (Optional) `((event: React.Key) => void) | undefined` Rückruf, der ausgelöst werden soll, wenn eine `Tab` ausgewählt ist. | | `selectedKey` | (Optional) `React.Key | undefined` Taste der ausgewählten `Tab`, wenn diese als gesteuerte Komponente verwendet wird. Verwenden Sie `onSelectionChange`, um den Status der Registerkartenauswahl zu steuern. | | `size` | (Optional) `("small" | "medium" | "large") | undefined` Die Größe der Komponente. | ## Registerkarte Die Komponente `TabList` unterstützt die Auswahl von Inhalt. `TabList` besteht aus einer Sammlung von `Tab`-Komponenten. Jede `Tab` kann mit einer `tabKey`-Eigenschaft eindeutig identifiziert werden. Wenn Sie `Tab`-Komponenten mithilfe einer `map`-Funktion rendern, müssen Sie dennoch einen `key` hinzufügen, um die [Regeln von React](https://reactjs.org/docs/lists-and-keys.html#keys) zu erfüllen. ### TabList-Eigenschaften | Eigenschaft | Typ | | ----------- | ------------------------------------------------------------------------- | | `children` | (Pflichtfeld) `React.ReactNode` Eine oder mehrere `Tab`-Komponenten. | ### Eigenschaften der Registerkarte | Eigenschaft | Typ | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | (Pflichtfeld) `React.ReactNode` Der Inhalt der Komponente. | | `disabled` | (Optional) `boolean | undefined` Gibt an, ob die Registerkarte deaktiviert werden soll. | | `id` | (Optional) `string | undefined` Eine eindeutige Kennung, die die Auswahl mithilfe der Eigenschaft `selectedKey` der Komponente `Tabs` steuert. | | `tabKey` | (Optional)(Veraltet) Verwenden Sie stattdessen die Eigenschaft `id`. `(React.Key | null) | undefined` Eine eindeutige Kennung, die mit dem `selectedKey` der `Tabs` verwendet werden soll. | ## TabPanel Die Komponente `TabPanels` unterstützt die Anzeige von Inhaltsbereichen mit Registerkarten. `TabPanels` besteht aus einer Auflistung von `TabPanel`-Komponenten. Jedes `TabPanel` kann eindeutig mit einer `tabKey`-Eigenschaft identifiziert werden. Wenn Sie `TabPanel`-Komponenten mithilfe einer `map`-Funktion rendern, müssen Sie dennoch einen `key` hinzufügen, um die [Regeln von React](https://reactjs.org/docs/lists-and-keys.html#keys) zu erfüllen. ### TabPanel-Eigenschaften | Eigenschaft | Typ | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | (Pflichtfeld) `React.ReactNode` Der Inhalt der Komponente. | | `id` | (Optional) `string | undefined` Eine eindeutige Kennung, die die Auswahl mithilfe der Eigenschaft `selectedKey` der Komponente `Tabs` steuert. | | `tabKey` | (Optional)(Veraltet) Verwenden Sie stattdessen die Eigenschaft `id`. `(React.Key | null) | undefined` Eine eindeutige Kennung, die mit dem `selectedKey` der `Tabs` verwendet werden soll. | ## Kleine Registerkarten ## Deaktivierte Registerkarten ## Nicht unterstützte Verwendungszwecke Registerkarten unterstützen keine bedingten Inhalte in Fragmenten, es sei denn, die untergeordneten Fragmente erhalten denselben Schlüssel. Um die nicht unterstützte Verwendung von Registerkarten zu vermeiden, verwenden Sie Komponenten anstelle von Fragmenten. Alternativ können Sie den untergeordneten Elementen von Fragmenten einen gemeinsamen `key` geben. ## Kontrollierte Registerkarten Verwenden Sie die Eigenschaft `selectedKey` von `Tabs` in Kombination mit der Eigenschaft `tabKey` von `Tab` und `TabPanel`, um eine kontrollierte Komponente zu erstellen. # 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. Registerkarten sind Inhaltsabschnitte, die jeweils ein Inhaltsfeld anzeigen. Die Liste der Registerkartenelemente ist am oberen Rand des aktuell angezeigten Bereichs angeordnet. So fügen Sie Ihrer App die `Tabs` Komponente hinzu: ```js import {Tabs, Tab, TabList, TabPanel, TabPanels} from '@stripe/ui-extension-sdk/ui'; ``` ### Eigenschaften der Registerkarten | Eigenschaft | Typ | | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | (Pflichtfeld) `React.ReactNode` Eine oder mehrere `TabList`- oder `TabPanels`-Komponenten. | | `fitted` | (Optional) `boolean | undefined` Gibt an, ob die `TabList` die gesamte Breite des Containers einnehmen soll. | | `onSelectionChange` | (Optional) `((event: string) => void) | undefined` Rückruf, der ausgelöst werden soll, wenn eine `Tab` ausgewählt ist. | | `selectedKey` | (Optional) `string | undefined` Die `id` der ausgewählten `Tab` bei Verwendung als gesteuerte Komponente. Verwenden Sie `onSelectionChange`, um den Status der Registerkartenauswahl zu steuern. | | `size` | (Optional) `("small" | "medium" | "large") | undefined` Die Größe der Komponente. | ## Registerkarte Die Komponente `TabList` unterstützt die Auswahl von Inhalt. `TabList` besteht aus einer Sammlung von `Tab`-Komponenten. Jede `Tab` kann mit einer `id`-Eigenschaft eindeutig identifiziert werden. Wenn Sie `Tab`-Komponenten mithilfe einer `map`-Funktion rendern, müssen Sie dennoch einen `key` hinzufügen, um die [Regeln von React](https://reactjs.org/docs/lists-and-keys.html#keys) zu erfüllen. ### TabList-Eigenschaften | Eigenschaft | Typ | | ----------- | ------------------------------------------------------------------------- | | `children` | (Pflichtfeld) `React.ReactNode` Eine oder mehrere `Tab`-Komponenten. | ### Eigenschaften der Registerkarte | Eigenschaft | Typ | | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------ | | `children` | (Pflichtfeld) `React.ReactNode` Der Inhalt der Komponente. | | `id` | (Pflichtfeld) `string` Eine eindeutige Kennung, die die Auswahl mithilfe der Eigenschaft `selectedKey` der Komponente `Tabs` steuert. | | `disabled` | (Optional) `boolean | undefined` Gibt an, ob die Registerkarte deaktiviert werden soll. | ## TabPanels Die Komponente `TabPanels` unterstützt die Anzeige von Inhaltsbereichen mit Registerkarten. `TabPanels` besteht aus einer Auflistung von `TabPanel`-Komponenten. Jedes `TabPanel` kann eindeutig mit einer `id`-Eigenschaft identifiziert werden. Wenn Sie `TabPanel`-Komponenten mithilfe einer `map`-Funktion rendern, müssen Sie dennoch einen `key` hinzufügen, um die [Regeln von React](https://reactjs.org/docs/lists-and-keys.html#keys) zu erfüllen. ### TabPanels-Eigenschaften | Eigenschaft | Typ | | ----------- | ---------------------------------------------------------------------------- | | `children` | (Pflichtfeld) `React.ReactNode` Eine oder mehrere TabPanel-Komponenten. | ### TabPanel-Eigenschaften | Eigenschaft | Typ | | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------ | | `children` | (Pflichtfeld) `React.ReactNode` Der Inhalt der Komponente. | | `id` | (Pflichtfeld) `string` Eine eindeutige Kennung, die die Auswahl mithilfe der Eigenschaft `selectedKey` der Komponente `Tabs` steuert. | ## Kleine Registerkarten ## Deaktivierte Registerkarten ## Nicht unterstützte Verwendungszwecke Registerkarten unterstützen keine bedingten Inhalte in Fragmenten, es sei denn, die untergeordneten Fragmente erhalten denselben Schlüssel. Um die nicht unterstützte Verwendung von Registerkarten zu vermeiden, verwenden Sie Komponenten anstelle von Fragmenten. Alternativ können Sie den untergeordneten Elementen von Fragmenten einen gemeinsamen `key` geben. ## Kontrollierte Registerkarten Verwenden Sie die Eigenschaft `selectedKey` von `Tabs` in Kombination mit der Eigenschaft `id` von `Tab` und `TabPanel`, um eine kontrollierte Komponente zu erstellen. ## See also - [Entwurfsmuster als Orientierung](https://docs.stripe.com/stripe-apps/patterns.md) - [App gestalten](https://docs.stripe.com/stripe-apps/style.md) - [Test der Nutzeroberfläche](https://docs.stripe.com/stripe-apps/ui-testing.md)