TextArea-Komponente für Stripe-Apps

Verwenden Sie TextArea, um ein Eingabefeld für mehrere Textzeilen zu erstellen.

SDK-Version

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

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

Beispiel wird geladen ...

<TextArea
  label="Description"
  placeholder="Acme Inc was founded in…"
  defaultValue="Stripe Apps lets you embed custom…"
  onChange={(e) => {
    console.log(e.target.value);
  }}
/>

TextArea-Eigenschaften

Eigenschaft	Typ
`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“.
`cols`	Optional `number \| undefined`
`css`	Optional `CSS \| undefined` Verwandte Typen: CSS.
`defaultValue`	Optional `string \| 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.
`maxLength`	Optional `number \| undefined` Gibt die maximale Länge des Texts an.
`minLength`	Optional `number \| undefined` Gibt die Mindestlänge des Texts an.
`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.
`onKeyDown`	Optional `((event: React.KeyboardEvent<HTMLInputElement>) => void) \| undefined` Wird ausgelöst, wenn eine Taste gedrückt wird.
`onKeyUp`	Optional `((event: React.KeyboardEvent<HTMLInputElement>) => void) \| undefined` Wird ausgelöst, wenn ein Schlüssel freigegeben wird.
`placeholder`	Optional `string \| undefined` Wird in einer abgeblendeten Farbe angezeigt, wenn der Eingabewert leer ist.
`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.
`resizeable`	Optional `boolean \| undefined`
`rows`	Optional `number \| undefined`
`size`	Optional `("small" \| "medium" \| "large") \| undefined` Die Größe der Komponente.
`spellCheck`	Optional `boolean \| "true" \| "false" \| undefined` Wenn explizit auf `true` oder `false` festgelegt, wird die Rechtschreibprüfung aktiviert oder deaktiviert.
`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.
`wrap`	Optional `string \| undefined`
`onKeyPress`	OptionalVeraltet `((event: React.KeyboardEvent<HTMLInputElement>) => void) \| undefined`

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.

Ungültig

Sie können eine TextArea als ungültig markieren, indem die Eigenschaft invalid für das Element festgelegt wird. Es handelt sich um eine rein visuelle Eigenschaft. Standardmäßig wird false verwendet.

Beispiel wird geladen ...

<TextArea
  label="Favorite word"
  defaultValue="Stripe Apps lets you embed custom…"
  invalid
/>

Ändern der Größe möglich

Standardmäßig lässt sich die Größe der TextArea vertikal ändern. In der Regel wird diese Einstellung für Nutzer/innen verwendet, die mehr Raum benötigen. Wenn die Größe des Elements nicht geändert werden soll, muss resizeable auf false festgelegt werden.

Beispiel wird geladen ...

<TextArea
  label="Resizable bio"
  defaultValue="Stripe Apps lets you embed custom…"
/>
<TextArea
  label="Unresizable bio"
  resizeable={false}
  defaultValue="Stripe Apps lets you embed custom…"
/>

Größe

Durch Ändern des Parameters size können Sie Varianten mit etwas mehr oder etwas weniger Spielraum als die Standardgröße wählen. In der Regel sollten Sie innerhalb eines Formulars keine verschiedene Größen miteinander kombinieren. Standardmäßig wird medium verwendet.

Beispiel wird geladen ...

<TextArea
  label="Description (large)"
  size="large"
  defaultValue="Stripe Apps lets you embed custom…"
/>
<TextArea
  label="Description (medium, default)"
  size="medium"
  defaultValue="Stripe Apps lets you embed custom…"
/>
<TextArea
  label="Description (small)"
  size="small"
  defaultValue="Stripe Apps lets you embed custom…"
/>

Deaktivieren und schreibgeschützt

Ein Feld kann als disabled markiert werden, wodurch jegliche Interaktion verhindert und das Design geändert wird. Deaktivieren bedeutet, dass beim Einreichen des Formulars keine Daten aus diesem Formularelement übermittelt werden.

Ein Feld kann auch als readOnly definiert werden. Schreibgeschützt bedeutet, dass alle Daten innerhalb des Elements übermittelt werden, aber von den Nutzer/innen nicht geändert werden können.

Beispiel wird geladen ...

<TextArea
  label="Disabled"
  defaultValue="Stripe Apps lets you embed custom…"
  disabled
/>
<TextArea
  label="Readonly"
  defaultValue="Stripe Apps lets you embed custom…"
  readOnly
/>

Zeilen

Eine TextArea wird mithilfe von Zeilen und nicht wie bei einer normalen <TextArea /> durch eine Höhe in Pixeln gesteuert. So kann das Element seine Größe basierend auf einem Vielfachen der Schriftgröße und nicht auf unverarbeiteten Pixelwerten bestimmen. Das verhindert, dass der Text standardmäßig teilweise verdeckt wird.

Die vertikale Höhe der TextArea-Komponente ändert sich auch entsprechend dem eingestellten Wert für die Größe, da dadurch die Zeilenhöhe des Textes innerhalb des Eingabefelds angepasst wird.

Beispiel wird geladen ...

<TextArea
  label="Description (3 rows, default)"
  defaultValue="Stripe Apps lets you embed custom…"
/>
<TextArea
  label="Description (6 rows)"
  rows={6}
  defaultValue="Stripe Apps lets you embed custom…"
/>

Statusmanagement

Verwenden Sie die TextArea-Komponente als unkontrollierte Eingabe:

Beispiel wird geladen ...

<TextArea
  onChange={(e) => {
    console.log(e);
  }}
  label="About your business"
  placeholder="Our business is…"
/>

Breite

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

Beispiel wird geladen ...

<TextArea
  label="App feedback"
  defaultValue="Stripe Apps lets you embed custom…"
  css={{width: 'fill'}}
/>

TextArea-Komponente für Stripe-Apps

Verwenden Sie TextArea, um ein Eingabefeld für mehrere Textzeilen zu erstellen.

TextArea-Eigenschaften

CSS

Ungültig

Ändern der Größe möglich

Größe

Deaktivieren und schreibgeschützt

Zeilen

Statusmanagement

Breite

Siehe auch