Champ de texte

Composant TextField

Les champs de texte sont des éléments d’interface polyvalents qui permettent aux utilisateurs de saisir, modifier et afficher du texte dans une application. Ils jouent un rôle crucial dans l’interaction utilisateur, fournissant un moyen simple pour les utilisateurs de saisir des données, fournir des commentaires, remplir des formulaires et interagir avec diverses interfaces nécessitant une saisie de texte.

Dans le contexte de FireCMS UI, les principes de conception et les composants sont vaguement basés sur les directives Material Design de Google. Cela signifie que les champs de texte dans FireCMS bénéficient d’un langage de conception cohérent et convivial, garantissant une apparence et une sensation cohérentes dans différentes applications web.

Utilisation

Pour utiliser le TextField, importez-le depuis votre répertoire de composants et passez les value, onChange et autres props nécessaires pour votre cas d’utilisation.

Champ de texte de base

Un champ de texte de base avec une configuration minimale :

import React, { useState } from "react";
import { TextField } from "@firecms/ui";

export default function TextFieldBasicDemo() {
    const [value, setValue] = useState("");

    return (
        <TextField
            value={value}
            onChange={(e) => setValue(e.target.value)}
            label="Basic Text Field"
            placeholder="Enter text"
        />
    );
}

Champ de texte multiligne

Vous pouvez créer un champ de texte multiligne en définissant la prop multiline à true. C’est utile pour les entrées de texte plus longues comme les commentaires ou les descriptions.

import React, { useState } from "react";
import { TextField } from "@firecms/ui";

export default function TextFieldMultilineDemo() {
    const [value, setValue] = useState("");

    return (
        <TextField
            value={value}
            onChange={(e) => setValue(e.target.value)}
            label="Multiline Text Field"
            placeholder="Enter text"
            multiline
            minRows={4}
        />
    );
}

Tailles

Le composant TextField est disponible en différentes tailles pour s’adapter aux différents besoins de mise en page. Vous pouvez ajuster la taille en utilisant la prop size.

import React, { useState } from "react";
import { TextField } from "@firecms/ui";

export default function TextFieldSizeDemo() {
    const [value, setValue] = useState("");

    return (
        <div className="flex flex-col gap-4">
            <TextField
                value={value}
                onChange={(e) => setValue(e.target.value)}
                label="Small Size"
                placeholder="Small size"
                size="small"
            />
            <TextField
                value={value}
                onChange={(e) => setValue(e.target.value)}
                label="Medium Size"
                placeholder="Medium size"
                size="medium"
            />
            <TextField
                value={value}
                onChange={(e) => setValue(e.target.value)}
                label="Large Size"
                placeholder="Large size"
                size="large"
            />
        </div>
    );
}

Ornements

Vous pouvez ajouter des ornements au début ou à la fin d’un champ de texte pour fournir un contexte ou une fonctionnalité supplémentaires.