Komponente für Stripe-Apps auswählen

Verwenden Sie „Auswählen“, um aus einer Reihe von Optionen in einem Dropdown-Menü auszuwählen.

SDK-Version

So fügen Sie Ihrer App die Select Komponente hinzu:

import {Select} from '@stripe/ui-extension-sdk/ui';

Beispiel wird geladen ...

<Select
  name="demo-001"
  label="Choose a pet"
  onChange={(e) => {
    console.log(e);
  }}
>
  <option value="">Choose an option</option>
  <option value="dogs">Dogs</option>
  <option value="cats">Cats</option>
</Select>

Eigenschaften auswählen

Eigenschaft	Typ
`children`	Pflichtfeld `React.ReactNode` Der Inhalt der Komponente.
`autoComplete`	Optional `string \| undefined` Gibt eine der möglichen Verhaltensweisen für die automatische Vervollständigung an.
`autoFocus`	Optional `boolean \| undefined` Wenn `true`, fokussiert React das Element auf „verbinden“.
`css`	Optional `CSS \| undefined` Verwandte Typen: CSS.
`defaultValue`	Optional `(string \| string[]) \| undefined` Eine Zeichenfolge (oder ein Array von Zeichenfolgen für `multiple={true}`). Gibt die anfänglich ausgewählte Option an, die ein/e Nutzer/in ändern kann.
`description`	Optional `string \| undefined` Beschreibender Text, der neben dem Label des Steuerelements angezeigt wird.
`disabled`	Optional `boolean \| undefined` Legt fest, ob das Element deaktiviert werden soll. Verhindert die Auswahl.
`error`	Optional `string \| undefined` Fehlertext, der unter dem Steuerelement angezeigt wird.
`form`	Optional `string \| undefined` Gibt die `id` des `<form>` an, zu dem diese Eingabe gehört. Wenn es weggelassen wird, handelt es sich um das nächstliegende übergeordnete Formular.
`hiddenElements`	Optional `("label" \| "description" \| "error")[] \| undefined` Blendet die angegebenen Elemente visuell aus. Die ausgeblendeten Elemente sind weiterhin vorhanden und für Screenreader sichtbar.
`invalid`	Optional `boolean \| undefined` Legt fest, ob sich das Element in einem ungültigen Status befindet. Diese Eigenschaft kann nicht bearbeitet werden und verhindert die Übermittlung des Formulars nicht.
`label`	Optional `React.ReactNode` Text, der das Steuerelement beschreibt. Wird sichtbar sein und kann angeklickt werden.
`multiple`	Optional `boolean \| undefined` Wenn `true`, erlaubt der Browser die Mehrfachauswahl.
`name`	Optional `string \| undefined` Gibt den Namen für diese Eingabe an, die mit dem Formular übermittelt wird.
`onChange`	Optional `((event: React.ChangeEvent<HTMLSelectElement>) => void) \| undefined` Erforderlich für kontrollierte Eingaben. Wird sofort ausgelöst, wenn der Wert der Eingabe vom Nutzer/von der Nutzerin geändert wird (z. B. bei jedem Tastenanschlag ausgelöst). Verhält sich wie das Eingabeereignis des Browsers.
`required`	Optional `boolean \| undefined` Im Fall von `true` muss der Wert angegeben werden, damit das Formular übermittelt werden kann.
`size`	Optional `("small" \| "medium" \| "large") \| undefined` Die Größe der Komponente.
`value`	Optional `(string \| string[]) \| undefined` Eine Zeichenfolge (oder ein Array von Zeichenfolgen für `multiple={true}`). Steuert, welche Option ausgewählt wird.

CSS

Eigenschaft Typ

Eigenschaft	Typ
`width`	Optional `(number \| "auto" \| "fill" \| "min" \| "max" \| "fit" \| "1/2" \| "1/3" \| "2/3" \| "1/4" \| "2/4" \| "3/4" \| "1/5" \| "2/5" \| "3/5" \| "4/5" \| "1/6" \| "2/6" \| "3/6" \| "4/6" \| "5/6" \| "1/12" \| "2/12" \| "3/12" \| "4/12" \| "5/12" \| "6/12" \| "7/12" \| "8/12" \| "9/12" \| "10/12" \| "11/12") \| undefined` Die Breite der Komponente. Siehe Größenanpassung für weitere Informationen.

width

Optional

(number | "auto" | "fill" | "min" | "max" | "fit" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12") | undefined

Die Breite der Komponente. Siehe Größenanpassung für weitere Informationen.

Statusmanagement

Verwenden Sie die Select-Komponente als unkontrollierte Eingabe:

Beispiel wird geladen ...

<Select
  name="demo-001"
  label="Choose a pet"
  onChange={(e) => {
    console.log(e);
  }}
>
  <option value="">Choose an option</option>
  <option value="dogs">Dogs</option>
  <option value="cats">Cats</option>
</Select>

Deaktiviert

Sie können eine Select-Komponente deaktivieren. So werden Änderungen verhindert.

Beispiel wird geladen ...

<Select name="demo-001" disabled label="Choose a pet">
  <option value="">Choose an option</option>
  <option value="dogs">Dogs</option>
  <option value="cats">Cats</option>
</Select>

Breite

Legen Sie die Breite von Select-Komponenten mithilfe der verfügbaren Werte mit der Eigenschaft css fest:

Beispiel wird geladen ...

<Select
  css={{
    width: 'fill',
  }}
  name="demo-001"
  label="Choose a pet"
  onChange={(e) => {
    console.log(e);
  }}
>
  <option value="">Choose an option</option>
  <option value="dogs">Dogs</option>
  <option value="cats">Cats</option>
</Select>

Komponente für Stripe-Apps auswählen

Verwenden Sie „Auswählen“, um aus einer Reihe von Optionen in einem Dropdown-Menü auszuwählen.

Eigenschaften auswählen

CSS

Statusmanagement

Deaktiviert

Breite

Siehe auch