# Chip-Komponente für Stripe-Apps Verwenden Sie Chips, um Werte anzuzeigen und Nutzerinnen/Nutzern das Bearbeiten von Werten zu ermöglichen. # v8 > This is a v8 for when app-sdk-version is 8. View the full page at https://docs.stripe.com/stripe-apps/components/chip?app-sdk-version=8. So fügen Sie Ihrer App die `Chip` Komponente hinzu: ```js import {Chip, ChipList} from '@stripe/ui-extension-sdk/ui'; ``` Dies ist eine Vorschau mehrerer `Chip`-Komponenten in einer `ChipList`-Komponente mit unterschiedlichen Eigenschaftskonfigurationen: ### ChipList-Eigenschaften | Eigenschaft | Typ | | ----------- | -------------------------------------------------------------------------- | | `children` | (Pflichtfeld) `React.ReactNode` Eine oder mehrere `Chip`-Komponenten. | | `direction` | (Optional) `("row" | "row-reverse") | undefined` | ### Eigenschaften des Chip | Eigenschaft | Typ | | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `label` | (Optional) `string | undefined` Eine Zeichenfolge, durch die sich der `Chip` eindeutig von anderen `Chips` abhebt, die neben ihm angezeigt werden können. Wenn diese Eigenschaft ohne `value` vorhanden ist, wird der `Chip` im „vorgeschlagenen“ Stil gerendert. | | `onAddSuggestion` | (Optional) `(() => void) | undefined` Die Funktion, die aufgerufen werden soll, wenn Nutzer/innen auf einen „vorgeschlagenen“ `Chip` klicken, um ihn zu aktivieren. | | `onClose` | (Optional) `(() => void) | undefined` Die Funktion, die aufgerufen werden soll, wenn Nutzer/innen auf das Symbol klicken, um einen `Chip` zu entfernen. | | `onDropdown` | (Optional) `(() => void) | undefined` Die Funktion, die aufgerufen werden soll, wenn Nutzer/innen auf die rechte Seite eines aktiven `Chip` klicken, um den ausgewählten Wert zu bearbeiten. | | `value` | (Optional) `(string | string[]) | undefined` Der aktuell ausgewählte Wert eines `Chip`. | ## Empfohlener Chip Um dem/der Nutzer/in mit einem `plus`-Symbol, das durch einen Chip dargestellt wird, die Möglichkeit zu geben, etwas hinzuzufügen, übergeben Sie eine Callback-Funktion an die Eigenschaft `onAddSuggestion`. ## Chip mit Dropdown Wenn Sie Nutzerinnen/Nutzern erlauben möchten, den Wert eines Chips zu bearbeiten, nachdem sie ihre anfängliche Auswahl getroffen haben, stellen Sie eine `onDropdown`-Callback-Funktion bereit, um eine Auswahlfläche zu öffnen, die zum Vornehmen von Änderungen erforderlich ist. ## Mehrere Werte darstellen Wenn Sie die Eigenschaft `value` der `Chip`-Komponente mit einem Array von Werten füllen, werden diese innerhalb des Chips aufgelistet. ## Chips in einer Liste darstellen In vielen Fällen werden Chips nicht einzeln angezeigt, sondern neben anderen Chips. Die `ChipList`-Komponente sorgt für einen angemessenen Abstand und die Anordnung von Chips in einer Liste sowie eine praktische Tastaturnavigation von Chips unter Verwendung der rechten und linken Pfeiltasten. ## Nicht verschließbarer Chip Wenn ein `Chip` einen Pflichtwert darstellt, kann es nützlich sein, einen Chip ohne die Symbole `add` oder `cancel` anzuzeigen. Schließen Sie die Callbacks `onAddSuggestion` und `onClose` aus, um Nutzerinnen/Nutzern einen nicht verschließbaren Chip anzuzeigen. # v9 > This is a v9 for when app-sdk-version is 9. View the full page at https://docs.stripe.com/stripe-apps/components/chip?app-sdk-version=9. So fügen Sie Ihrer App die `Chip` Komponente hinzu: ```js import {Chip, ChipList} from '@stripe/ui-extension-sdk/ui'; ``` Dies ist eine Vorschau mehrerer `Chip`-Komponenten in einer `ChipList`-Komponente mit unterschiedlichen Eigenschaftskonfigurationen: ### ChipList-Eigenschaften | Eigenschaft | Typ | | ----------- | -------------------------------------------------------------------------- | | `children` | (Pflichtfeld) `React.ReactNode` Eine oder mehrere `Chip`-Komponenten. | | `direction` | (Optional) `("row" | "row-reverse") | undefined` | ### Eigenschaften des Chip | Eigenschaft | Typ | | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `label` | (Optional) `string | undefined` Eine Zeichenfolge, durch die sich der `Chip` eindeutig von anderen `Chips` abhebt, die neben ihm angezeigt werden können. Wenn diese Eigenschaft ohne `value` vorhanden ist, wird der `Chip` im „vorgeschlagenen“ Stil gerendert. | | `onAddSuggestion` | (Optional) `(() => void) | undefined` Die Funktion, die aufgerufen werden soll, wenn Nutzer/innen auf einen „vorgeschlagenen“ `Chip` klicken, um ihn zu aktivieren. | | `onClose` | (Optional) `(() => void) | undefined` Die Funktion, die aufgerufen werden soll, wenn Nutzer/innen auf das Symbol klicken, um einen `Chip` zu entfernen. | | `onDropdown` | (Optional) `(() => void) | undefined` Die Funktion, die aufgerufen werden soll, wenn Nutzer/innen auf die rechte Seite eines aktiven `Chip` klicken, um den ausgewählten Wert zu bearbeiten. | | `value` | (Optional) `(string | string[]) | undefined` Der aktuell ausgewählte Wert eines `Chip`. | ## Empfohlener Chip Um dem/der Nutzer/in mit einem `plus`-Symbol, das durch einen Chip dargestellt wird, die Möglichkeit zu geben, etwas hinzuzufügen, übergeben Sie eine Callback-Funktion an die Eigenschaft `onAddSuggestion`. ## Chip mit Dropdown Wenn Sie Nutzerinnen/Nutzern erlauben möchten, den Wert eines Chips zu bearbeiten, nachdem sie ihre anfängliche Auswahl getroffen haben, stellen Sie eine `onDropdown`-Callback-Funktion bereit, um eine Auswahlfläche zu öffnen, die zum Vornehmen von Änderungen erforderlich ist. ## Mehrere Werte darstellen Wenn Sie die Eigenschaft `value` der `Chip`-Komponente mit einem Array von Werten füllen, werden diese innerhalb des Chips aufgelistet. ## Chips in einer Liste darstellen In vielen Fällen werden Chips nicht einzeln angezeigt, sondern neben anderen Chips. Die `ChipList`-Komponente sorgt für einen angemessenen Abstand und die Anordnung von Chips in einer Liste sowie eine praktische Tastaturnavigation von Chips unter Verwendung der rechten und linken Pfeiltasten. ## Nicht verschließbarer Chip Wenn ein `Chip` einen Pflichtwert darstellt, kann es nützlich sein, einen Chip ohne die Symbole `add` oder `cancel` anzuzeigen. Schließen Sie die Callbacks `onAddSuggestion` und `onClose` aus, um Nutzerinnen/Nutzern einen nicht verschließbaren Chip anzuzeigen. ## 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)