TextArea
So fügen Sie Ihrer App die TextArea
Komponente hinzu:
import {TextArea} from '@stripe/ui-extension-sdk/ui';
<TextArea label="Description" placeholder="Acme Inc was founded in…" defaultValue="Stripe Apps lets you embed custom…" onChange={(e) => { console.log(e.target.value); }} />
Props
Prop | Type | Description |
---|---|---|
aria-label |
| Text that describes the control. Only visible to screen readers, and is not clickable. Should not be used if `label` is set. |
autoComplete |
| |
autoFocus |
| |
cols |
| |
defaultValue |
| |
description |
| Descriptive text that will be rendered adjacent to the control's label. |
disabled |
| |
error |
| Error text that will be rendered below the control. |
form |
| |
hiddenElements |
| Visually hides the specified elements. The hidden elements will still be present and visible to screen readers. |
invalid |
| Programmatically mark the value as invalid |
label |
| Text that describes the control. Will be both visible and clickable. |
maxLength |
| |
minLength |
| |
name |
| |
onChange |
| |
onKeyDown |
| |
onKeyUp |
| |
placeholder |
| |
readOnly |
| |
required |
| |
resizeable |
| Allow the user to resize the textarea |
rows |
| Rows of text that are visible in the input |
size |
| The size of the input |
spellCheck |
| |
tabIndex |
| |
wrap |
| |
onKeyPress Deprecated |
|
CSS
TextArea
-Komponenten unterstützen diese CSS-Eigenschaften:
Eigenschaft | Typ | Beispiel |
width | 2/3 | |
Weite des Textbereichs. Siehe Größenanpassung für weitere Informationen. |
TextArea
-Komponenten unterstützen kein anderes CSS. Verwenden Sie stattdessen ihre Eigenschaften, um sie zu gestalten.
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.
<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.
<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
Das Ändern der size
ermöglicht es Ihnen, Varianten mit etwas mehr oder etwas weniger Fläche als die Standardgröße zu wählen. In der Regel sollten Sie innerhalb eines Formulars nicht verschiedene Größen kombinieren. Standardmäßig wird medium
verwendet.
<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.
<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.
<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:
<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:
<TextArea css={{width: 'fill'}} />