MultilineTextField

Composant utilisé à des fins de saisie multiligne dans les formulaires.

Usage

import { MultilineTextField } from 'nr1'

Exemples

Basique

<MultilineTextField label="Summary" placeholder="Enter a short description" />

Avec étiquette en ligne

<MultilineTextField
  label="Summary"
  labelInline
  placeholder="Enter a short description"
/>

Préformaté

<MultilineTextField
  type={MultilineTextField.TYPE.PREFORMATTED}
  label="Build command"
  placeholder="npm run build"
/>

Chargement

<MultilineTextField loading placeholder="Enter a short description" />

Désactivé

<MultilineTextField disabled placeholder="Enter a short description" />

Lecture seule

<MultilineTextField
  readOnly
  defaultValue="Some value"
  placeholder="Enter a short description"
/>

Avec description

<MultilineTextField
  description="Description value"
  placeholder="Enter a short description"
/>

Avec un message invalide

<MultilineTextField
  invalid="Not enough text, needs more"
  placeholder="Enter a short description"
/>

Accessoires

ariaLabel

chaîne

Fournissez une étiquette aux lecteurs d’écran pour décrire cette entrée. Ceci n'est requis que si l'étiquette du lecteur d'écran doit être différente de l'accessoire label , ou si vous ne fournissez pas du tout d'accessoire label.

ariaLabelledBy

chaîne

Fournissez l'id unique d'un élément dont le contenu décrit cette entrée pour les lecteurs d'écran. Ceci n'est requis que si l'étiquette du lecteur d'écran doit être différente de l'accessoire label , ou si vous ne fournissez pas du tout d'accessoire label . Utilisez ceci ou ariaLabel, pas les deux.

autoFocus

booléen

Si true, le champ de texte multiligne se concentrera automatiquement sur le montage.

className

chaîne

Ajoute les noms de classe au composant. Doit être utilisé uniquement à des fins de positionnement et d'espacement.

defaultValue

chaîne

Valeur par défaut du champ de texte multiligne.

description

chaîne

Message avec des instructions sur la façon de remplir le champ du formulaire.

disabled

booléen

Détermine si le champ peut être modifiable ou non.

info

chaîne

Des informations supplémentaires peuvent être affichées dans une info-bulle à côté de l'étiquette.

invalid

booléen|chaîne

Lorsque cette option est vraie, elle définit le champ dans un état non valide, afin d'avertir l'utilisateur qu'une attention particulière est nécessaire sur ce champ particulier. Cette propriété peut être un champ boolean ou un string. Lorsqu'il s'agit d'un string, ainsi que de l'état invalide affiché, le texte sera affiché ci-dessous.

label

chaîne

Texte à afficher comme étiquette.

labelInline

booléen

Affichez l'étiquette en ligne dans le contrôle de formulaire. À utiliser uniquement lorsque le composant n'est pas à l'intérieur d'un Form. Dans ce cas, définissez layoutType sur Form.LAYOUT_TYPE.SPLIT dans le composant Form.

loading

booléen

Si vous chargez une liste de données ou autre chose dans un champ de formulaire, indiquez à l'utilisateur que quelque chose est en cours de chargement en utilisant le formulaire d'état de chargement. Utilisé pour informer que le champ peut charger des valeurs de manière dynamique. Lorsqu'il est défini sur true, affiche un spinner de chargement ; et lorsqu'il est défini sur false, réserve de l'espace dans l'interface utilisateur afin que le spinner puisse potentiellement être affiché. Ne définissez pas la propriété (ou définissez-la sur undefined) si le champ n'est pas censé être chargé à un moment donné.

onBlur

fonction

Rappel qui est déclenché lorsque le champ de texte multiligne perd le focus.

function (event: React.FocusEvent Event source of the callback.
)

onChange

fonction

Rappel qui est déclenché lorsque la valeur du champ de texte multiligne change.

function (event: React.ChangeEvent Event source of the callback. You can pull out the new value by accessing event.target.value.
)

onFocus

fonction

Rappel qui est déclenché lorsque le champ de texte multiligne obtient le focus.

function (event: React.FocusEvent Event source of the callback.
)

onKeyDown

fonction

Rappel qui se déclenche lorsqu'une touche est enfoncée.

function (event: React.KeyboardEvent Event source of the callback.
)

onKeyUp

fonction

Rappel qui se déclenche lorsqu'une touche est sortie.

function (event: React.KeyboardEvent Event source of the callback.
)

placeholder

chaîne

Indice affiché dans le champ de texte multiligne lorsqu'il n'a aucune valeur.

readOnly

booléen

Si true, rend le champ de texte multiligne en lecture seule.

required

booléen

Si true, indique que le champ de formulaire est obligatoire.

rows

nombre

Nombre de lignes dans le champ de texte. Le minimum requis est de cinq lignes.

spacingType

é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 margin ou padding. Pour omettre une valeur, utilisez SPACING_TYPE.OMIT.

<Array of<One ofMultilineTextField.SPACING_TYPE.EXTRA_LARGE, MultilineTextField.SPACING_TYPE.LARGE, MultilineTextField.SPACING_TYPE.MEDIUM, MultilineTextField.SPACING_TYPE.NONE, MultilineTextField.SPACING_TYPE.OMIT, MultilineTextField.SPACING_TYPE.SMALL,
>
>

spellCheck

booléen

Si true, active la vérification des fautes d'orthographe par le navigateur.

style

objet

Style en ligne pour un style personnalisé. Doit être utilisé uniquement à des fins de positionnement et d'espacement.

testId

chaîne

Ajoute un attribut data-test-id. Utilisez-le pour cibler le composant dans les tests unitaires et E2E. Pour qu'un identifiant de test soit valide, préfixez-le avec votre identifiant nerdpack, suivi d'un point. Par exemple, my-nerdpack.some-element.

Remarque : vous ne verrez peut-être pas l'attribut data-test-id car ils sont supprimés du DOM. Pour les déboguer, transmettez un paramètre de requête e2e-test à l'URL.

type

énum.

NORMAL — lorsqu'un utilisateur saisit du texte dans un champ * PERFORMATTED — lorsqu'un utilisateur doit saisir du contenu à espacement fixe
<One ofMultilineTextField.TYPE.NORMAL, MultilineTextField.TYPE.PREFORMATTED, >

value

chaîne

Valeur du champ de texte multiligne. Ceci est requis pour un composant contrôlé.

Cette traduction automatique est fournie pour votre commodité.

Usage.css-21sua1{background:none;border:none;width:0;padding:0;}

Exemples

Basique

Avec étiquette en ligne

Préformaté

Chargement

Désactivé

Lecture seule

Avec description

Avec un message invalide

Accessoires

chaîne

chaîne

booléen

chaîne

chaîne

chaîne

booléen

chaîne

booléen|chaîne

chaîne

booléen

booléen

fonction

fonction

fonction

fonction

fonction

chaîne

booléen

booléen

nombre

énumération[]

booléen

objet

chaîne

énum.

chaîne

Usage