Switch-Komponente für Stripe-Apps

Ähnlich wie Kontrollkästchen können Umschalter boolesche Werte angeben oder kontrollieren.

SDK-Version

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

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

Umschalter werden häufig für Einstellungen verwendet, die sofort gespeichert werden. Anders ausgedrückt ist Switch selten Teil eines größeren Formulars, das separat übermittelt werden muss.

Nachfolgend finden Sie ein einfaches Beispiel für einen Switch.

Beispiel wird geladen ...

<Switch
  label="This is a Switch."
  onChange={(e) => {
    console.log(e.target.checked);
  }}
/>

Switch-Eigenschaften

Eigenschaft	Typ
`autoFocus`	Optional `boolean \| undefined` Wenn `true`, fokussiert React das Element auf „verbinden“.
`checked`	Optional `boolean \| undefined` Steuert, ob die Eingabe ausgewählt ist. Wenn Sie diese Eigenschaft übergeben, müssen Sie auch einen `onChange`-Handler übergeben, der den übergebenen Wert aktualisiert.
`defaultChecked`	Optional `boolean \| undefined` Gibt den Anfangswert an, den 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.
`name`	Optional `string \| undefined` Gibt den Namen für diese Eingabe an, die mit dem Formular übermittelt wird.
`onChange`	Optional `((event: React.ChangeEvent<HTMLInputElement>) => 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.
`readOnly`	Optional `boolean \| undefined` Im Fall von `true` kann die Eingabe vom Nutzer/von der Nutzerin nicht bearbeitet werden.
`required`	Optional `boolean \| undefined` Im Fall von `true` muss der Wert angegeben werden, damit das Formular übermittelt werden kann.
`tabIndex`	Optional `number \| undefined` Setzt das Standardverhalten der Tabulatortasten außer Kraft. Vermeiden Sie die Verwendung anderer Werte als `-1` und `0`.
`value`	Optional `string \| undefined` Steuert den Text der Eingabe. Wenn Sie diese Eigenschaft übergeben, müssen Sie auch einen `onChange`-Handler übergeben, der den übergebenen Wert aktualisiert.

Statusmanagement

Verwenden Sie die Switch-Komponente als unkontrollierte Eingabe:

Beispiel wird geladen ...

<Switch
  onChange={(e) => {
    console.log(e.target.checked);
  }}
  defaultChecked
  label="This Switch is uncontrolled."
/>

Deaktiviert

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

Beispiel wird geladen ...

<Switch label="This Switch is disabled." defaultChecked disabled />

Switch-Komponente für Stripe-Apps

Ähnlich wie Kontrollkästchen können Umschalter boolesche Werte angeben oder kontrollieren.

Switch-Eigenschaften

Statusmanagement

Deaktiviert

Siehe auch