Textfeld (Text Field)

Text Field-Komponente

Textfelder (Text Fields) sind vielseitige UI-Elemente, die es Benutzern ermöglichen, Text innerhalb einer Anwendung einzugeben, zu bearbeiten und anzuzeigen. Sie spielen eine entscheidende Rolle bei der Benutzerinteraktion und bieten Benutzern eine einfache Möglichkeit, Daten einzugeben, Feedback zu geben, Formulare auszufüllen und mit verschiedenen Schnittstellen zu interagieren, die Texteingaben erfordern. Textfelder können für kurze Eingaben wie Benutzernamen oder Passwörter verwendet werden, aber auch für längere Texteingaben wie Kommentare, Nachrichten oder detaillierte Beschreibungen.

Im Kontext der FireCMS-Benutzeroberfläche basieren die Designprinzipien und Komponenten lose auf den Material Design-Richtlinien von Google. Das bedeutet, dass die Textfelder in FireCMS von einer konsistenten und benutzerfreundlichen Designsprache profitieren, die ein kohärentes Erscheinungsbild über verschiedene Webanwendungen hinweg gewährleistet. Durch die Nutzung dieser Komponenten können Entwickler schnell interaktive und optisch ansprechende Formulare und Eingabebereiche erstellen, die die Benutzererfahrung verbessern und die Designkonsistenz wahren.

Verwendung

Um das TextField zu verwenden, importieren Sie es aus Ihrem Komponentenverzeichnis und übergeben Sie den value, onChange und andere erforderliche Props für Ihren Anwendungsfall.

Einfaches Textfeld

Ein einfaches Textfeld mit minimaler Konfiguration:

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"
        />
    );
}

Mehrzeiliges Textfeld

Sie können ein mehrzeiliges Textfeld erstellen, indem Sie die Eigenschaft multiline auf true setzen. Dies ist nützlich für längere Texteingaben wie Kommentare oder Beschreibungen.

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}
        />
    );
}

Größen

Die TextField-Komponente ist in verschiedenen Größen erhältlich, um verschiedenen Layout-Anforderungen gerecht zu werden. Sie können die Größe mithilfe der Eigenschaft size anpassen.

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>
    );
}

Verzierungen (Adornments)

Sie können Verzierungen am Anfang oder Ende eines Textfelds hinzufügen, um zusätzlichen Kontext oder Funktionalität bereitzustellen.

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

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

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