FormFieldGroup
So fügen Sie Ihrer App die FormFieldGroup
Komponente hinzu:
import {FormFieldGroup} from '@stripe/ui-extension-sdk/ui';
Props
Prop | Type | Description |
---|---|---|
description |
| Descriptive text that will be rendered adjacent to the group's legend. |
disabled |
| |
invalid |
| Marks the group as invalid. Note that this is a visual-only property, and won't prevent submission. |
layout |
| |
legend |
|
Layouts
Eine FormFieldGroup
-Komponente kann verschiedene Layouts unterstützen:
row
column
Dies ist eine Vorschau einer FormFieldGroup
-Komponente mit zwei Textfeldern in einem row
-Layout:
<FormFieldGroup legend="Full name" description="Enter your full name"> <TextField label="First name" placeholder="First name" hiddenElements={['label']} /> <TextField label="Last name" placeholder="Last name" hiddenElements={['label']} /> </FormFieldGroup>
Dies ist eine Vorschau einer FormFieldGroup
-Komponente mit zwei Textfeldern in einem column
-Layout:
<FormFieldGroup legend="Spiffy settings" layout="column"> <Switch label="Enable transmogrifier" description="Scientific progress goes 'boink'" /> <Switch label="Set zorcher on 'shake and bake'" description="Note: blasters may be useless against slime" /> </FormFieldGroup>
Status
Ein Status ist eine Möglichkeit, den Nutzer/innen die Nutzbarkeit und Gültigkeit des Formulars anzuzeigen. Eine FormFieldGroup
-Komponente kann verschiedene Statustypen aufweisen:
invalid
disabled
Status „Ungültig“
Sie können eine FormFieldGroup
-Komponente als invalid
kennzeichnen, um Nutzer/innen zu zeigen, dass ihre Eingabewerte falsch sind. Wenn die FormFieldGroup
-Komponente invalid
ist, gilt der Status invalid
nicht ebenfalls für abhängige untergeordnete Steuerelemente. Folglich müssen Sie diesen untergeordneten Komponenten Fehler manuell hinzufügen, indem Sie ihnen die Eigenschaft invalid
hinzufügen.
<FormFieldGroup legend="Full name" description="Enter your full name" invalid> <TextField label="First name" value="Tim" placeholder="First name" hiddenElements={['label']} /> <TextField label="Last name" error="Last name missing" placeholder="Last name" hiddenElements={['label']} /> </FormFieldGroup>
Status „Deaktiviert“
Wenn Sie eine FormFieldGroup
-Komponente als disabled
kennzeichnen, werden alle darin enthaltenen Felder deaktiviert. Sie können den Status disabled
für jedes Feld innerhalb der FormFieldGroup
außer Kraft setzen, indem Sie dem Feld die Eigenschaft disabled={false}
hinzufügen.
<FormFieldGroup legend="Disabling" disabled> <TextField label="Disabled" placeholder="Disabled" hiddenElements={['label']} /> <TextField label="Not disabled" placeholder="Not disabled" disabled={false} hiddenElements={['label']} /> </FormFieldGroup>