<Form> est un conteneur qui affiche un ensemble de champs de saisie utilisateur associés de manière structurée. Il peut contenir un ou plusieurs des composants de formulaire suivants :
<TextField><MultilineTextField><Checkbox><Radio><RadioGroup><Switch><Select><Dropdown>
Le composant prend en charge différents types de mises en page qui peuvent être spécifiées via la propriété layoutType .
Usage
import { Form } from 'nr1'Exemples
Disposition par défaut
<Form> <TextField placeholder="AAA Production" label="Name" /> <Select label="Select account"> <SelectItem>Option 1</SelectItem> <SelectItem>Option 2</SelectItem> </Select> <TextField defaultValue="help-production-db" label="Help channel" invalid="Please enter a valid slack channel" /> <MultilineTextField label="Description" info="Info tooltip" placeholder="Placeholder text" /> <Button type={Button.TYPE.PRIMARY} sizeType={Button.SIZE_TYPE.SMALL} spacingType={[ HeadingText.SPACING_TYPE.EXTRA_LARGE, HeadingText.SPACING_TYPE.NONE, ]} > Create dashboard </Button></Form>Disposition divisée
<Form layoutType={Form.LAYOUT_TYPE.SPLIT}> <TextField placeholder="AAA Production" label="Name" /> <Select label="Select account"> <SelectItem>Option 1</SelectItem> <SelectItem>Option 2</SelectItem> </Select> <TextField defaultValue="help-production-db" label="Help channel" invalid="Please enter a valid slack channel" /> <MultilineTextField label="Description" info="Info tooltip" placeholder="Placeholder text" /> <Button type={Button.TYPE.PRIMARY} sizeType={Button.SIZE_TYPE.SMALL} spacingType={[ HeadingText.SPACING_TYPE.EXTRA_LARGE, HeadingText.SPACING_TYPE.NONE, ]} > Create dashboard </Button></Form>Disposition divisée avec type de taille
<Form layoutType={Form.LAYOUT_TYPE.SPLIT} splitSizeType={Form.SPLIT_SIZE_TYPE.LARGE}> <TextField placeholder="AAA Production" label="Name" /> <Select label="Select account"> <SelectItem>Option 1</SelectItem> <SelectItem>Option 2</SelectItem> </Select> <TextField defaultValue="help-production-db" label="Help channel" invalid="Please enter a valid slack channel" /> <MultilineTextField label="Description" info="Info tooltip" placeholder="Placeholder text" /> <Button type={Button.TYPE.PRIMARY} sizeType={Button.SIZE_TYPE.SMALL} spacingType={[ HeadingText.SPACING_TYPE.EXTRA_LARGE, HeadingText.SPACING_TYPE.NONE, ]} > Create dashboard </Button></Form>Formulaire avec champs obligatoires
<Form> <TextField required placeholder="AAA Production" label="Name" /> <TextField defaultValue="help-production-db" label="Help channel" /> <MultilineTextField label="Description" info="Info tooltip" placeholder="Placeholder text" /> <Button type={Button.TYPE.PRIMARY} sizeType={Button.SIZE_TYPE.SMALL} spacingType={[ HeadingText.SPACING_TYPE.EXTRA_LARGE, HeadingText.SPACING_TYPE.NONE, ]} > Create dashboard </Button></Form>Accessoires
nœud | Champs de formulaire à afficher. |
chaîne | Ajoute les noms de classe au composant. Doit être utilisé uniquement à des fins de positionnement et d'espacement. |
énum. | Disposition du formulaire :
|
énumération[] | Propriété d'espacement. L'espacement est défini comme un uplet de zéro à quatre valeurs, qui suivent les mêmes conventions que les propriétés CSS comme <Array of |
énum. | Spécifie la taille des colonnes lors de l'utilisation de la disposition fractionnée. |
objet | Style en ligne pour un style personnalisé. Doit être utilisé uniquement à des fins de positionnement et d'espacement. |
chaîne | Ajoute un attribut |