Aller au contenu

Champs de texte (Text fields)

Textfield

Le widget le plus basique est le champ de texte, qui permet à l’utilisateur de saisir des chaînes simples.

Si vous définissez une propriété string sans autres paramètres de configuration, vous obtiendrez un champ de texte :

import { buildProperty } from "@firecms/core";
buildProperty({
dataType: "string",
name: "Name",
validation: {
// ...
}
});

Le type de données est string ou number.

En interne, le composant utilisé est TextFieldBinding.

Textfield

Utilisez un champ multiligne lorsque vous souhaitez permettre à l’utilisateur de saisir des chaînes pouvant contenir des sauts de ligne.

Définissez l’indicateur multiline à true dans une propriété string.

import { buildProperty } from "@firecms/core";
buildProperty({
dataType: "string",
name: "Description",
multiline: true,
validation: {
// ...
}
});

Le type de données est string.

En interne, le composant utilisé est TextFieldBinding.

Textfield

Vous pouvez utiliser un champ markdown lorsque vous souhaitez que l’utilisateur final utilise des capacités de modification avancées du texte au format Markdown.

Définissez l’indicateur markdown à true dans une propriété string.

import { buildProperty } from "@firecms/core";
buildProperty({
dataType: "string",
name: "Blog text",
markdown: true,
validation: {
// ...
}
});

Le type de données est string.

En interne, le composant utilisé est MarkdownEditorFieldBinding.

Textfield

Vous pouvez utiliser un champ URL lorsque vous souhaitez vous assurer que la saisie de l’utilisateur final est une URL valide.

Définissez l’indicateur url à true dans une propriété string.

import { buildProperty } from "@firecms/core";
buildProperty({
dataType: "string",
name: "Amazon link",
url: true,
validation: {
// ...
}
});

Le type de données est string.

En interne, le composant utilisé est TextFieldBinding.

Field

Vous pouvez utiliser un champ email lorsque vous souhaitez vous assurer que la saisie de l’utilisateur final est un email valide.

Définissez l’indicateur email à true dans une propriété string.

import { buildProperty } from "@firecms/core";
buildProperty({
dataType: "string",
name: "User email",
email: true,
validation: {
// ...
}
});

Le type de données est string.

En interne, le composant utilisé est TextFieldBinding.