TextField
So fügen Sie Ihrer App die TextField
Komponente hinzu:
import {TextField} from '@stripe/ui-extension-sdk/ui';
<TextField label="Business name" placeholder="Acme Inc…" 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 |
| |
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 |
| |
size |
| The size of the input |
spellCheck |
| |
tabIndex |
| |
type |
| Choose between the text-alike types on an input |
onKeyPress Deprecated |
|
CSS
TextField
-Komponenten unterstützen diese CSS-Eigenschaften:
Eigenschaft | Typ | Beispiel |
width | 2/3 | |
Feldbreite. Siehe Größenanpassung für weitere Informationen. |
TextField
-Komponenten unterstützen kein anderes CSS. Verwenden Sie stattdessen ihre Eigenschaften, um sie zu gestalten.
Ungültig
Sie können eine TextField
-Komopnente 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.
<TextField label="Current year" defaultValue="1892" invalid />
Typ
type
verhält sich wie das Attribut „Typ“ bei einer <input />
, beschränkt sich jedoch auf Typen, die Text zulassen. Standardmäßig wird text
verwendet.
<TextField label="Text" type="text" /> <TextField label="Password" type="password" /> <TextField label="Search" type="search" /> <TextField label="Number" type="number" />
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.
<TextField label="Small" size="small" /> <TextField label="Medium" size="medium" /> <TextField label="Large" size="large" />
Deaktiviert 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.
<TextField label="Disabled" defaultValue="Field is disabled" disabled /> <TextField label="Readonly" defaultValue="Field is readonly" readOnly />
Statusmanagement
Verwenden Sie die TextField
-Komponente als unkontrollierte Eingabe:
<TextField onChange={(e) => { console.log(e); }} label="First name" />
Breite
Legen Sie die Breite von TextField
-Komponenten mithilfe der verfügbaren Werte mit der Eigenschaft css
fest:
<TextField css={{width: 'fill'}} />